2020-12-03 :: JSX

코드 이해하기

import 구문을 통해서 모듈 설치가 가능하다. 이러한 기능은 node.js에서 지원한다. node에서는 require라는 구문을 사용한다.

모듈 통합 기능을 브라우저에서도 사용하기 위해 bundler를 사용한다. 대표적인 bundler로는 WebPack, Parcel등이 있다. 리액트 프로젝트에서는 주로 웹팩을 사용한다. 번들러 도구를 사용하면 import로 불러온 모듈을 모두 하나로 합쳐 하나의 파일로 만들어 준다. 최적화를 위해 여러 개의 파일로 나누는 경우도 존재한다.

웹팩을 이용하면 SVG나 CSS형식의 파일도 import할 수 있는데, 이 때 웹팩의 loader가 사용된다. 로더 덕분에 여러 형태의 미디어 파일을 사용할 수 있다. 또한 babel이라는 도구를 통해 최신 자바스크립트 문법을 ES5형태로 변환한다.

JSX

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

ReactDOM.render는 무엇인가? 이 코드는 컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있다. 이 함수의 첫 번째 인자에는 페이지에 렌더링할 JSX컴포넌트가 들어가고 두 번째 인자에는 렌더링할 document 내부 요소를 설정한다.

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

ES6에서 const와 let

ES6 이전 문법에서는 let대신 var이 사용되었다. var 키워드의 scope는 함수가 단위였다. 따라서 if, for 처럼 블록 내부에 같은 이름의 변수를 선언했을 때 블록 범위 밖의 변수에도 영향을 끼친다. 반대로 let의 scope는 블록이기 때문에 블록 밖에 있는 변수에 대해서 불변성이 보장이 된다. ES6에서 var을 사용할 일은 없다.

If문 대신 사용하는 구문

JSX내부의 자바스크립트 표현식에서 if문을 사용할 수 없다. 때문에 특정 조건 내용에 따른 렌더링을 해야하는 경우에는 조건 연산자 또는 &&연산자를 사용한 조건부 렌더링을 해야한다.

{/* &&연산자를 사용한 조건부 렌더링, JSX에서의 주석은 이렇게 달면 된다. */} return <div>{value === true && <h1>조건을 충족합니다.</h1>}</div>

&& 연산자로 조건부 렌더링을 할 수 있는 이뉴는 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 렌더링하지 않기 때문이다. 만약 렌더링 할 요소가 undefined인 경우 보여주고싶은 요소가 있다면 다음 구문을 사용할 수 있다.

return <div>{undifined || '대신 보여주고 싶은 요소'}</div>