[React] JSX
1. JSX란?
JSX는 JavaScriptXml의 줄임말로 자바스크립트에 xml이 추가된 자바스크립트 확장문법이다.
리액트는 공통적인 로직은 따로 분할해서 사용하는데 이런 컴포넌트 형식으로 만드는데 유용하게 사용하고 있다.
2. JSX 사용하기
리액트 설정이 모두 완료되면 볼 수 있는 파일들이 있다.
위 파일들 중 index.js 먼저 확인해 보자.
여기서 봐야 할 부분은 ReactDOM.createRoot
리액트를 실행하면 모든 요소들이 저 ReactDOM을 거쳐 render 하게 되어있다. 나는 쉽게 저 영어를 해석했다 '뿌리를 생성하다' 생성한 뿌리를 실행하다. (단순)
render부분에서는 <App />이 보이는데 이것이 컴포넌트이다. 다시 말해, 저 코드는 App을 실행하기 위한 돔이라고 볼 수 있다.
App.js 안을 살펴보자.
보통 리액트를 공부하다 보면 Element와 Component를 헷갈리기 쉽다. 코드는 여러 방법으로 짤 수 있으니 더 그럴 지도..? 난 그랬음
간단하게 요약만 하면 return 되고 있는 객체들을 엘리먼트, function App 자체는 컴포넌트라고 할 수 있다.
그럼 여기서 엘리먼트가 될 수 있는 것들은 뭘까?
<div>~</div>, <h2></h2> 등 컴포넌트를 구성하고 있는 모든 요소들을 엘리먼트라고 부를 수 있다.
컴포넌트는? 이 엘리먼트들로 구성된 것
return 되는 요소들 안에 <Header />를 한 번 살펴보자
위에서 말한 것처럼 return되는 요소들이 엘리먼트라고 했으니, Header.js에서 볼 수 있는 엘리먼트는? <header> Header </header>이다. 그리고 이 엘리먼트들이 구성된 Header가 컴포넌트라고 할 수 있겠다.
이러한 컴포넌트에 공통 로직을 담으면 같은 로직을 반복하지 않고 컴포넌트만 불러오면 간결하고 중복하지 않는 코드를 짤 수 있다.
이것이 JSX의 장점!
위 구성요소로만 리액트 실행 순서를 간단히 보면 Header.js -> App.js -> index.js로 볼 수 있겠다.
3. JSX 사용 방법
JSX는 몇 가지 규칙을 가지고 있다.
- 사용하는 모든 태그들은 닫아줘야 한다.
- ex) <div></div>, <image/> 셀프클로징태그
- 최상위 태그 규칙
- 가장 바깥에 태그를 지우면 오류 발생 -> jsx로 컴포넌트를 생성하여 리턴하려면 반드시 최상위 태그로 묶어줘야 한다.
- fragment 최상위 태그를 주고 싶지 않을 경우 -> React import -> <React Fragment> (선호하지X)
- or <></> 빈 태그로 만들 수 있다.
- 컴포넌트를 불러오기 위해선 import 필수
- 보통 프로젝트를 만들어보면 알겠지만 필요한 로직을 불러올 때는 import를 한다.
- 컴포넌트도 마찬가지이다. 컴포넌트를 쓰기 위해서는 컴포넌트에서도 내보내야 하고 필요한 곳에서는 받아와야 한다.
- export default로 컴포넌트를 내보내고, 필요한 소스에서는 import 해서 사용할 것.