개발자.. 너란놈..

- 함수명은 대문자로 시작 
- 해당함수는 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;

※ RealDOM - 실제 돔

- HTML 태그를 이용해서 구조를 만들면 브라우저가 이를 해석해서 실제 DOM 형태로 객체를 만들고 화면에 렌더링하는 형태

※ VirtualDOM - 가상 돔

- 실제 브라우저에서 RealDOM으로 변환되기 전 메모리상에서 DOM구조를 가상으로 만들어서 기존의 DOM 구조와 차이점을 분석
- 기존 DOM과 변경되는 부분을 수정해서 최종적으로 RealDOM으로 출력하는 형태

※ JSX

- 리액트에서 자체적으로 가상 돔을 편하게 생성해주는 문법체계 (실제로는 JavaScript로 DOM을 만들지만 개발자의 사용성을 위해 HTML 표현 방식을 채택)