리액트를 다루는 기술[2]: JSX

JSX : 자바스크립트의 확장 문법. 코드의 번들링 과정에서 바벨을 사용하여 자바스크립트 코드로 변환됩니다.

 

JSX 특징

1. 부모요소가 하나 있어야 합니다.

컴포넌트를 하나의 DOM tree로 만들어서 Virtual DOM으로 컴포넌트 변화를 감지하기 위해서입니다.

2. JSX 내부에서 {}을 사용하여 자바스크립트 표현식을 사용할 수 있습니다.

3. JSX 내부에서 조건부 연산자를 사용할 수 있습니다.

4. 컴포넌트는 undefined를 반환할 수 없습니다.

return 문에 undefined만 있으면 안됩니다.

5. 스타일을 적용할 때는 객체 형태로, 카멜 케이스로 작성하여 넣습니다.

6. class가 아니라 className을 설정하여 css class를 사용하여야 합니다.

 

기타용어

디렉토리(directory): 파일 분류를 위해 붙이는 이름 공간으로 폴더와 유사한 개념입니다.

 

모듈: 관련된 데이터와 함수를 하나로 묶은 단위입니다. 프로그램을 구성하는 요소입니다.

개별적으로 컴파일된 후, 링커로 하나의 실행 파일로 만들어집니다.

 

번들러(bundler): 여러개의 모듈화된 자바스크립트 파일을 하나로 합치는 도구입니다.

브라우저는 모듈화된 자바스크립트를 읽지 못하기 때문에 합쳐줍니다.

리엑트에는 번들러로 웹팩(Webpack)을 주로 사용합니다.

 

바벨(babel): 자바스크립트의 새로운 문법을 사용할 수 있게 도와주는 도구로, 자바스크립트 컴파일러 중 하나입니다.

여기서 컴파일러는 다른 형식으로 코드를 변환한다는 의미에서 사용되었습니다.

 

바벨(Babel)과 폴리필(Polyfill)