2장. JSX

JSX는 자바스크립트의 확장 문법이며, XML과 비슷하다. 브라우저 실행 전 코드가 번들링 되는 과정에서 일반 자바스크립트 형태로 변환된다.

2-1. JSX 장점

1. 보기 쉽고 익숙하다
   • HTML 코드를 작성하는 것과 비슷하고, JSX를 사용하는 주된 이유이다.
2. 더욱 높은 활용도
   • HTML 태그를 사용할 수 있을 뿐만 아니라, 컴포넌트도 HTML 태그 쓰듯이 작성한다.

2-2. JSX 문법

1. 감싸는 요소 : 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. why? 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 하나의 DOM트리 구조로 이루어져야 한다.
2. 자바스크립트 표현 : JSX 내부에서 코드를 { } 로 감싸면 자바스크립트 표현식을 사용할 수 있다.
3. if문 대신 조건부 연산자 : JSX 내부의 자바스크립트 표현식에서는 아쉽게도 if문을 사용할 수 없다. 하지만 조건에 따라 다른 내용을 렌더링 해야할 때는 조건부 연산자(삼항 연산자)를 사용하면 된다.
4. AND 연산자(&&)를 사용한 조건부 렌더링
5. undefined 렌더링 하지 않기 : 어떤 값이 undefined일 수도 있다면 OR(||) 연산자를 사용하면 해당값이 undefined일 때 사용할 수 있는 값을 지정할 수 있으므로 오류를 방지 할 수 있다.
   • CSS 내에서 사용할 때도 주의해야한다.
6. 인라인 스타일링
7. className 사용 : class값을 설정해도 스타일이 적용되긴 하지만, 경고를 띄운다.
8. 꼭 닫아야 하는 태그 : input 과 br 등
9. 주석

2-3. ESLint와 Prettier

• ESLint : 문법 검사 도구
• Prettier : 코드 스타일 자동 정리 도구 -> 가독성 중점