[React] JSX란 무엇인가?

리엑트는 렌더링 로직이 UI로직(이벤트가 처리되는 방식, 시간에 따라 state가변 하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식)과 연결되는 사실을 받아들인다.

📖 JSX란?

JSX는 자바스크립트를 확장한 문법이다.

JSX는 리엑트 엘리먼트를 생성합니다.

JSX로 작성한 코드는 브라우저에서 실행되지 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 코드 형태로 변환합니다.

 

🔖 JSX 사용하기

JSX에 자바스크립트 변수, 함수 포함할 수 있다.

 

컴파일이 끝나면, JSX 표현식이 정규 자바스크립트 함수 호출이 되고 객체로 인식됩니다.

 

🔖 조건부 렌더링

jsx에서는 if문 자체는 쓸수없다!

사용하려면 함수로 분리하거나, 삼항연산자를 사용해야한다.

 

위에 처럼 if 문 자체는 쓸수없지만 삼항연산자를 쓰는 것은 가능하다.

→ 삼항 연산자 자체가 리엑트의 표현식이 되기 때문이다.

 

삼항 연산자가 아닌 if문만 사용하고 싶은 경우

→ &&를 사용해주자.