[React] JSX

✅ 개념

• 자바스크립트 확장 문법
• XML과 비슷하게 생겼음
• 브라우저에서 실행되기 전 코드가 번들링되는 과정에서 바벨을 사용해 일반 자바스크립트 형태의 코드로 변환
  => * 바벨(Babel)
  • 주로 호환성 등을 이유로 ES6 이후 코드를 이전 버전으로 변환시키는 툴
  • 그 외에 대표적인 기능 중 하나가 JSX 코드를 브라우저가 이해하기 쉽도록 ES5로 변환시키는 역할
  • create-react-app에서 기본 설치
• HTML 코드를 작성하는 것과 비슷해 작성이 쉽고 가독성이 높음
• jsx로 만든 컴포넌트들을 jsx 안에서 작성할 수 있음

✅ 규칙

🔸 return

• 여러 요소가 있다면 반드시 한 부모 요소로 감싸줘야함
• Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 하나의 DOM 트리 구조로 이루어 져야 한다는 규칙
• div 혹은 Fragment 태그 주로 사용
  => Fragment 태그는 빈태그로 대체 가능 => < >< / >

🔸 JavaScript 표현식

• 중괄호 {}를 활용해 자바스크립트 표현식 사용

🔸 if문 대안

• jsx 내부 자바스크립트 표현식에서는 if문 사용이 불가
• 대안1. 삼항 연산자
• 대안2. AND 연산자 (&&)
  => 특정 조건을 만족하면 보여주고, 아니면 아무것도 렌더링 하지 않는 상황에 유용
  => && 앞 조건이 거짓이면 뒷내용을 렌더링하지 않음
  => falsy한 0은 렌더링 한다는 유의점이 있음

🔸 undefined 반환 안돼용

• 함수에서 undefined만 반환해서 렌더링 하면 오류가 발생
• OR 연산자 사용 (||)
  => || 앞이 undefined일 경우 렌더링 할 것을 미리 지정해 오류 방지

🔸 인라인 스타일링

• 객체 형식으로 지정
• '-'이 들어간 속성들은 이를 없애고 카멜표기법 사용

🔸 className

• 클래스를 지정할 때 class가 아닌 className 사용
• 예전에는 완전 오류가 발생했지만, 지금은 class 써도 오류문과 함께 적용이 잘 되긴 함

🔸 태그는 꼭 닫자

• HTML에서는 종종 태그를 닫지 않아도 괜찮은 경우가 있음(ex. input)
• jsx에서는 안돼용 => 안닫으면 오류남!!