[React를 다루는 기술 정리] 2장 JSX

React를 다루는 기술 정리

2장 JSX

2.4.1 감싸인 요소

• 리액트 컴포넌트에서 요소 여러개를 왜 하나의 요소로 꼭 감싸 주어야 할까요?

그것은 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.

2.4.2 자바스크립트 표현

• JSX 는 DOM 요소를 렌더링 하는기능과 자바스크립트 표현식을 쓸 수 있다.

var은 scope가 함수 단위 이고 let, const는 scope가 블록 단위 이다. ES6 이후로는 let, const만 사용하자.

2.4.4 AND 연산자(&&)를 사용한 조건부 렌더링

• && 연산자로 조건부 렌더링을 할 수 있는 이유

리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문입니다. 여기서 주의해야 할 점은 falsy한 값인 0은 예외적으로 화면에 나타난다는 것입니다.

2.4.7 class 대신 className

• 일반 HTML에서 CSS 클래스를 사용할 때는 class라는 속성으로 설정합니다. 하지만 JSX에서는 class 가 아닌 className으로 설정해 주어야 합니다. → react v16 이상부터는 class를 className으로 변화시켜 주고 경고를 띄웁니다.

2.4.9 주석

• JSX 내부에서 주석을 작성할 때는 {//} or {/**/} 와 같이 작성

2.6 정리

• JSX는 HTML과 비슷하지만 완전히 똑같지는 않습니다. 코드로 보면 XML 형식이지만 실제로는 자바스크립트 객체이다.