[React] JSX와 리액트 컴포넌트

JSX

• JavaScript Syntax Extension 자바스크립트 문법 확장자
• HTML 마크업 코드를 작성하여 HTML 요소를 설명하고 생성할 수 있게 한다.
• 리액트는 UI 전체와 부분을 설명하고 생성하기 위한 것이므로 JSX가 리액트 컴포넌트로 사용된다
• 하지만 브라우저는 JSX를 읽을 수 없다.
• 리액트 프로젝트에서는 개발 서버가 실행되면 리액트 빌드 프로세스가 브라우저에서 사용 가능한 코드로 변환한다.
• .jsx 대신 .js만 사용하는 리액트 프로젝트로 있다.
  • 빌드 프로세스가 .js 파일 안에서도 JSX 코드를 찾을 수 있기 때문이다.
• 리액트에서 컴포넌트로 인식되기 위한 두 가지 규칙이 있다.
  • 함수 제목이 대문자로 시작되어야 함
  • 함수에서 렌더링 가능한 값이 반환되어야 함

 

컴포넌트 생성

function Haeader() {
	return ...
}

function Footer() {
	return (
		...
	)
}

• 대문자 시작하는 함수명
• return으로 값 반환하기, 여러 줄이면 () 괄호로 묶기

 

컴포넌트 사용

function Header() {
	return (
		...
	)
}

function Footer() {
	return (
		...
	)
}

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

• 함수 이름으로 시작 태그와 마무리 태그로 넣으면 됨 <...> <.../>
• 마무리 태그만으로도 사용 가능 <... />