JSX

드디어 리엑트 입성 ⭐️

🔵 JSX

: javascript를 확장한 문법

• react에서 UI를 구성할때 사용하는 문법
• react 엘리먼트를 생성
• 새로운 React App 생성시
  ➡️ 터미널에서 npx create-react-app 앱이름

but) 브라우저가 바로 실행할 수 있는 코드 X

➡️ 브라우저가 이해할 수 있는 코드로 변환이 필요해 !
➡️ 이때 사용하는 것이 바로 "Babel"

• babel : JSX를 브라우저가 이해할 수 있는 javascript언어로 컴파일 -> 브라우저가 읽고나면 화면에 렌더링

---

🔵 JSX를 사용하는 이유?

• Javascript + HTML 를 동시에 이용해 기능과 구조를 한눈에 확인할 수 있다.
  • 구조와 동작에 대한 코드를 한뭉치로 적은 코드셋 ➡️ "Component"
  • 코드간결 + 가독성 Up

🔵 JSX 문법

• 여러 엘리먼트를 작성하는 경우 ➡️ opening tag와 closing tag로 감싸주기
  

  • <>와 </>로 닫아주기도 함 !

• CSS class 속성을 지정하는 경우 ➡️ "clssName"으로 클래스명을 지정해줘야함

• JSX에서 Javascript를 사용하는 경우 ➡️ 중괄호 {} 사용필수

  • 사용하지 않는 경우, 문자열로 인식
    

• JSX 컴포넌트 생성시 ➡️ "대문자(PascalCase)"로 컴포넌트 명 지정 !!
  

• 조건부 렌더링 사용시 ➡️ 삼항연산자 사용 !
  

• 여러개의 HTML 엘리먼트 표시해야 하는 경우 ➡️ map() 함수 사용

  • ⭐️ 여기서 주의할 점
    ➡️ map함수 사용시에는 반드시 "key" JSX 속성을 넣어야 한다

  

  • 변하지 않고, 예상 가능하며, 유일한 ID가 없는 경우 항목의 인덱스를 key로 사용한다