JSX
기존의 페이지는 기본적으로 .html .css .js 3가지의 파일형식으로 나뉘어 진다.
하지만 jsx는 하나의 파일에서 앞서말한 모든 형식을 포함시킬 수 있으며
크게 script 부분과 retrun()문 내의 html요소로 나뉘며
- script : 함수, 변수 등 기존 js파일에 작성했던 요소들이 들어간다.
- return() : script 내부에 존재하며 () 안쪽에 html요소를 입력하여 html을 리턴해준다.
- script 밖 : 이 부분엔 파일 전역에서 사용가능한 요소들인 import, css, types, querys 등등이 들어간다.
JSX는 코드의 간략화 / 태그의 목적성 명시 / 코드의 반복사용에 용이함 등 장점을 보이며,
폴더구조 사용법에 따라 원하는 형태로 사용할 수 있다는 장점을 가지고 있다.
문법
1. 부모요소
JSX의 retunr()이 반환하는 html을 반드시 부모요소가 필요하다.
위와 같이 감싸는 부모요소가 없을 경우 에러가 발생하며.
이렇게 <></> tag로 감싸줄 경우 에러가 발생하지 않는다. div를 사용해도 되지만
<></> 를Fragment 사용하여 보다 간략화 하여 사용 할 수 있다.
.
2. 자바스크립트표현
JSX는 return() 내부에서 코드를 {}로 감싸 자바스크립트 표현식을 작성할 수 있다.
{props.projectData?.fetchProject.projectName} 같이 DB에서 받아오는
동적인 data값을 표현할 수 도 있고,
{props.projectData && (
...
)}처럼 조건부 랜더링에 사용 될 수도 있으며 메서드 또한 사용가능하다 이 외 사용방법은 매우많다.
.
3. 조건부 연산자
JSX 내부의 자바스크립트 표현식에서는 if문의 사용이 불가능하다.
하지만 조건에 따라 다른 내용을 랜더링 할 때는 JSX 밖에서 if문을 사용하여 값을 설정하거나
{} 내에서 조건부 연산자(삼항연산자 ex)=== !== ...)를 사용할 수 있다.
