[REACT] JSX 특징

1. 표현식 평가

 >> JSX는 자바스크립트처럼 취급된다. 즉 동적인 콘텐츠도 다룬다는 말이다.

 >> 리턴되는 값을 동적으로 생성되게 하려면 { } 중괄호로 감싸주는게 전부이다.

 >> 중괄호는 표현식 먼저 평가돼그 결과를 리턴하게 만든다.

 

2. 복수의 엘리먼트 리턴

 >> 여태 다른 엘리먼트를 자식으로 두는 상위 엘리먼트 하나만을 리턴한것을 볼수 있는데 복수의 엘리먼트를 리턴할 수 있으며 방법으로는 

 1) 배열 같은 식의 문법을 사용한다.

   - 단일한 부모 엘리먼트 없이 p태그 세 개를 리턴하고 있다.

   -  또한 복수의 아이템을 리턴할 때 다룰수도 있는 사항이 있는데 바로 각 아이템에 key 속성과 고유 값을 지정하는 것.

   2) 리액트 v16.2.0부터 추가된 프래그먼트 라는 패턴이 개입된다.

     - 리턴하고 싶은 아이템들을 React.Fragment라는 컴ㅊ포넌트 안에 넣기만 하면된다

     - 이는 단지 HTML로 트랜스파일될 때 존재하지 않는 것으로 취급하라고 JSX에게 알려줄 뿐이다.

     - 쉼표나 다른 구분자가 필요 없으며, key 속성과 고유값을 지정할 필요가 없다.

    - 추가적으로 React.Fragment를 지정하는 대신 사용할수 있는 축약된 구문은 빈 <> 와 </> 태그이다.

    - 결과는 위와 동일하게 출력된다.

 

3. 인라인 CSS 사용불가 

  - JSX에서는 style 속성 안에 직접 CSS를 포함할 수 없으며, 그 대신 스타일 정보를 담은 객체를 참조해야 한다.

 

  4. 주석 

   - JSX에 주석은 넣는 방식은  { } 중괄호 안에  /**/ 을 넣어주면 된다.

   - 태그 안에 주석을 넣을 경우는 { } 중괄호를 사용하지 않아도 됩니다.

 

  5. 대소문자 구별

   - HTML 엘리먼트를 나타낼 때는 태그를 소문자로 입력해야 하며,

   - 컴포넌트를 나타낼 때에는 대문자가 사용되어야 한다.

 

6. JSX 코드는 render 나 return 함수 안에서만 사용하는게 아니라 어디서든 사용 가능하다