😁 JSX란?

자바스크립트의 확장 문법

• 브라우저에서 실행되기 전에 바벨을 사용하여 JS 코드로 변환됨
• 자바스크립트로 일일이 요소를 만들지 않고 HTML 코드처럼 생산성이 높아 사용됨.

JSX 문법

• 새로 정의한 component를 HTML 요소처럼 쓸 수 있다.
• 여러 컴포넌트가 있다면 반드시 부모 요소 하나로 감싸야 한다.
• 자바스크립트 표현식을 작성하려면 {}를 이용해 쓴다.

• return (<div> {variable === 'condition' ? <div> correct </div> : <div> false </div>} </div>)```

• return (<div> {variable === 'condition' && <h1> correct </h1>} </div>)```

• JSX 안에서 주석은 꼭 {/* 내용 */} 형태로 적어야 한다.

ESLint와 Prettier (VSC에서)

• ESLint는 문법 검사 도구이다.
• Prettier는 코드 스타일 자동 정리 도구이다.