리액트를 다루는 기술-2 (JSX)

Module Bundler, Transpiler

 

1. Module Bundler

 

• 별개의 js 파일을 script 태그로 다운로드 받을 경우 파일이 다르더라도 같은 변수명이나 함수명에 대한 오류가 발생하는데 이러한 문제를 해결해 줌
• 분리되어 있는 파일을 파일별 scope를 구분지어 하나의 파일로 통합시켜줌
• 웹팩의 경우 통합하려면 어차피 파일을 다 읽어야하는데 그 김에 할 수 있는 것들을 loader나 plugin으로 추가할 수 있음
• webpack, rollup 

 

2. Transpiler

 

• 최신버전의 자바스크립트를 지원하지 않는 환경, 예를 들면 es6를 지원하지 않는 환경에서 동작할 수 있도록 구 표준을 준수하는 코드로 바꿔줌
• babel 

 

 

---

 

 

JSX란?

 

• 익숙한 markup 형태로 개발을 할 수 있도록 해주는 문법
• 보기 쉽고 익숙하다는 장점

 

JSX 문법

 

1. 감싸인 요소

• 컴포넌트 내부는 하나의 DOM tree 구조로 이루어 져야함

function App() {
	return (
		<div>
			<요소>
			<요소>
		</div>
	)
} 

• div가 싫다면 fragment 기능 사용하면 됨

function App() {
	return (
		<>
			<요소>
			<요소>
		</>
	)
} 

 

2. 자바스크립트 표현

 

• JSX 내부에서 {} 안에 javascript 코드를 작성 할 수 있음
• 노트에 let과 const 에 대해서 나와있었음

 

3 if문 대신 조건부 연산자

 

• JSX 내부 자바스크립트에서는 if 를 사용할 수 없음
• 조건이 필요할 떄에는 삼항 연산자 사용
  • return 값이 존재하는 것만 사용가능함

 

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

 

5. undefined를 렌더링 하지 않기

 

• 리액트 컴포년트에서 undefined만 반환하여 렌더링 하는 상황을 만들면 안됨 ( 오류 발생함)
• JSX 내부에서 렌더링하는 것은 괜찮음

 

6. 인라인 스타일링

 

• 스타일을 넣어줄 떄 객체형태, 카멜표기법으로 작성

 

7. class 대신 className

 

8. 주석

• {/* */} 로 작성함

 

---

 

 

Eslint와 Prettier 적용하기

 

• ESlint 문법 검사도구
• Prettier 코드 스타일 자동 정리 도구