JSX (Section 3)

참고> velopert.com/3626

 

1. React를 사용하면 웹 애플리케이션에서 사용하는 UI를 재사용 가능한 컴포넌트로 분리하여 작성하기 때문에
프로젝트의 유지보수성을 우수하게 해줌

2. import 구문: 파일에서 JSX를 사용하려면, 현재 파일에 필요한 React Component를 꼭 import 해야 함.

3. webpack은 빌드시 파일의 확장자에 따라 다른 작업을 자동으로 해줌
-> CSS 파일을 불러오면 메인 프로젝트에서 사용한 프로젝트를 한 파일에 모두 결합해줌
-> JavaScript 파일을 불러오면 모든 코드들이 제대로 로딩되게끔 순서를 설정하고 하나의 파일로 합쳐줌.
-> svg처럼 따로 설정되지 않은 확장자의 경우 그냥 파일로 불러오고 나중에 사본을 만들어 그 경로를 받아옴.

4. 컴포넌트를 만드는 두 가지 방법
1) 클래스를 통하여 만듦
ex) class App extens Component { ...}

-> 이 방식의 컴포넌트에는 꼭 render 함수가 있어야 하고, 그 내부에서 JSX를 return 해주어야 함.

2) 함수를 통하여 컴포넌트를 만듦

 

5. 브라우저 상에서 React Component를 보여주기 위해선 ReactDOM.Render 함수를 사용함.

-> 첫번째 파라미터는 렌더링 할 결과물
-> 두번째 파라미터는 컴포너트를 어떤 DOM에 그릴지 정해줌

6. JSX 문법은 HTML과 비슷한 모양임
-> 단순히 감싸기 위해서 div 태그를 쓰는게 마음에 안들 경우 Fragment 태그를 사용하면 됨 (v16.2 부터 사용 가능) 
-> JSX 내부에서 조건부 렌더링을 할 때는 보통 삼항 연산자를 사용하거나 AND 연산자를 사용함.
if문을 사용할 수는 없음. 사용하려면 IIFE(즉시 실행 함수 표현)를 사용해야 함.
-> style은 JSX 내에서 선언할 때는 객체 형태로 작성해주어야 함.
-> class는 JSX 내에서 className으로 사용함.