JSX가 뭔데요?
- JS를 확장한 문법이고 HTML에서 사용하는 문법과 흡사한 문법이다.
- 기본적으로 React element를 만들 수 있게 해준다. 따라서 React.createElement를 대체할 수 있다. (어떻게 동작하는지는 뒤에서 살펴보자)
JSX는 문법은 어떻게 생겼나요?
기본 문법
- 태그 열고 닫고, 내용은 열고 닫는 태그 사이에 적고, property는 HTML 태그의 속성처럼 적음
- event는 마치 태그가 가진 하나의 속성인 것처럼 추가해 준다.
- ReactJS extension으로 event Listener 처리해 준다.onClick = {() => console.log("cliked")}
JSX를 왜 쓰는데요? (편하고 쉬우니까 쓰는데요.)
- 어플리케이션을 여러가지 작은 요소로 나누어 관리할 수 있게 해줌
- 먼저 보기 쉽게 코드를 분리한 뒤, 함께 렌더링 하는 것 (여러 요소로 잘게 쪼개 만들기 그 다음에 합쳐 주기)
- 어떻게 하면 컴포넌트를 다른 컴포넌트 안에 넣을수 있는가?
JSX를 쓰려면 뭐가 필요한데요? (Babel이 필요한데요.)
- 브라우저는 JSX를 온전히 이해하지 못하므로 브라우저가 JSX를 이해할 수 있게 변환해주어야 함
< Babel의 역할 >
-
Babel은 JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔줌
- 브라우저가 이해할수 있는 형태? (= React.createElement를 사용하는 형태) -
script안에는 우리가 Babel에게 넘겨준 코드(JSX)가 적혀있음. Babel은 그걸 브라우저가 읽을 수 있는 코드(React.createElement)로 바꿔서head에 담아놓음
< React.createElement>
< JSX 1 >
- line 8/ Babel standalone을 이용해 다운받음
- line 9/
type="text/babel"
- line 26/ container 요소를 만드는 건 여전히 React.createElement로 하고 있음
< JSX 2 >
- line 28/ Container도 컴포넌트로 만들었음
- line 34/
ReactDOM.render(<Container />, root);Container 컴포넌트를root에 랜더링 해주기
-
Title과Button을 함수로 만들어 주기
-Title은 기본형function Title () { return (...); }으로 적었고
-Button은 arrow functionconst Button = () => (...);으로 적었음 -
여러 컴포넌트들이 합쳐진 구성을 만든 것임
-div태그를 렌더링 하고 있는Container컴포넌트 안에Title에 관련된 코드와Button에 관련된 코드를 포함시킨 것
❗️컴포넌트(우리가 직접 만든 요소)의 첫 글자는 반드시 대문자여야 함
- 소문자면 React와 JSX는 HTML의 태그로 인식함
- 컴포넌트(React Element를 함수 내에 담은 것)는 원하는 만큼 재사용 가능
- 함수의 형태이기 때문에 가능
- 동일한 코드를 재사용할 수 있는 방법
const Button = () => (...);
- 이 Button은button이라는 React Element를 반환하는 함수
