[React] 컴포넌트 파일 생성시의 규칙

- 함수명은 대문자로 시작 
- 해당함수는 JSX를 리턴해야함
- 해당 함수를 export 시켜야 됨. (export default 함수명)
- 하나의 컴포넌트 함수는 복수요소의 JSX를 리턴할 수 없음
- 복수개의 JSX를 리턴시에는 괄호로 감싸줌, 단수개 JSX 리턴시에는 괄호 생략 가능
- 복수개의 요소를 리턴하고 싶을때는 무조건 wrapping 태그로 감싸줘야 됨
★★- 중첩되는 태그없이 복수요소의 JSX를 리턴하고 싶으면 fragment활용 <></>
=> 이걸로 감싸면 부모쪽에서는 div로 감싸져서 나오지 않음.
★★- 클래스명을 입력할 시에는 class가 아닌 className으로 표기 해야됨 (class 객체지향시 활용하는 예약어이기 때문에 사용 불가)
- 화살표 함수 형태로도 제작 가능 const App = () => {}
- 화살표 함수 안쪽의 중괄호와 return 구문을 생략 가능

 

※ ES7 React/Redux/GraphQL/React-Natvie snippets 기능 : React할 때 컴포넌트 만들 때 자동으로 만들어짐
rfce - react functional component export
rafce - react arrow functional component export

 

jsx를 만들고 사용하는 방법 1 (한개만)

//rfce - react functional component export
//rafce - react arrow functional component export
function Header() {
	return (
		<header>
			<h1>Header</h1>
		</header>
	);
}

export default Header;

 

import Footer from './Footer.js';

function App() {
	return (
		<>
			<Header />
		</>
	);
}

export default App;

jsx를 만들고 사용하는 방법 2 (여러개 한번에)

//하나의 파일에서 여러개의 컴포넌트 함수를 export 가능 (default 키워드는 제거)
export function Header() {
	return (
		<header>
			<h1>Header</h1>
		</header>
	);
}

export function Footer() {
	return (
		<footer>
			<h1>footer</h1>
		</footer>
	);
}

export function Section() {
	return (
		<section>
			<h1>Layout</h1>
		</section>
	);
}

//하나의 파일에서 여러개의 컴포넌트 비구조할당으로 import 가능
import { Header, Footer, Section } from './Common';

function App() {
	return (
		<>
			<Header />
			<Section />
			<Footer />
		</>
	);
}

export default App;