JSX

JSX는 react에서 HTML을 쉽게 사용할 수 있게 해주는 문법

• create react app 으로 처음 React 앱을 생성할 때 설치되는 라이브러러리인 babel이 JSX라는 문법 사용할 수 있게 해줌
• JSX로 HTML을 작성하면 babel이 자동으로 JSX 코드를 브라우저가 이해할 수 있는 JS 코드로 변환해 줌

JSX의 작동 원리

ReactDOM.render 이 정해진 위치에 원하는 컴포넌트를 렌더링 해줌

ex ) ReactDOM.render(<App />, document.getElementById("root"));

첫 인자로 component를 받고, 두 번째 인자로 실제로 Component를 그릴 위치를 받음

⇒ public 폴더 안의 index.html 파일에서 id가 root인 div태그를 찾음.

---

JSX 문법

표현식(expresssions)와 문장(statements)

표현식 == 값을 산출해내는 코드의 조각들

문장 == 특정한 행동을 하겠다는 설명

JSX에서 변수 넣기

const name = "code pot";
const App = () =>{
	return <div>{name}</div>;
}

→ 코드로 선언한 변수를 중괄호로 감싸서 JSX에서 사용 가능

JSX에서 함수 사용하기

const user = {
	firstName: 'toy',
  lastName: 'crane'
}

const formatName(user){
	return user.firstName + ' ' + user.lastName;
}

const App = () =>{
	return <div>{formatName(user)}</div>
}

JSX에서 if문처럼 사용하기

→ JSX에서는 표현식만 사용할 수 있기 때문에 if문처럼 사용하려면 삼항 연산자를 사용해야 함.

const isLogin = true;
const App = () =>{
	return fruits.map((fruit) => <div>{fruit}</div>);
}

주의사항

1. React import 꼭 하기
   • import React from “react”
2. HTML처럼 태그 반드시 닫기
3. 최상위 태그(부모 태그)가 반드시 있어야 함.
   • div를 최상위 태그로 넣기 싫다면 <> </> 이용 → fragment 태그

---

Reference : https://react.codepot.kr/docs/week01/doc5