1. 코드 번들링
1) 코드 번들링
- 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import 구문을 사용하여 특정 파일을 불러올 수 있다.
but 이렇게 모듈을 불러와서 사용하는 것은 원래 브라우저에는 없던 기능으로 Node.js에서 지원하는 기능이다. (import가 아닌 require라는 구문으로 패키지를 불러온다.)
-> 이러한 기능을 브라우저에서도 사용하기 위해 번들러를 사용한다.
2) 번들러
- 번들러: 파일을 묶듯이 연결하는 것.
ex) 웹팩, Parcel, browserify
-> 리액트에서는 보통 웹팩을 사용하는데 편의성과 확장성이 다른 도구보다 뛰어나기 때문이다.
번들러 도구를 사용하면?
- import 또는 require 모듈을 불러왔을 때 불러오는 모듈을 모두 합쳐서 하나의 파일을 생성한다.
- 최적화 과정에서 여려 개의 파일로 분리될 수 있다.
3) 번들러 도구 웹팩
- 웹팩을 사용하면 SVG, CSS 파일도 불러와서 사용 가능하다.
-> 파일을 불러오는 것은 로더라는 기능이 담당한다.
ex) SVG-loader, CSS-loader, babel-loader
- babel-loader는 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5 문법으로 변환해준다.
2. JSX
1) JSX
- 자바스크립트의 확장 문법으로 XML과 매우 비슷하다.
< JSX의 장점 >
① 보기 쉽고 익숙하다.
② 더욱 높은 활용도
-> HTML 태그, 컴포넌트를 JSX안에서 사용할 수 있다.
2) JSX 문법
① 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.
- Virtual DOM에서 컴포넌트 변화를 감지해 낼 떄 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.
② JSX 내부에서 자바스크립트 표현식을 사용할 때 { }로 코드를 감싼다.
③ JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수 없다.
-> but 조건에 따라 내용을 렌더링할 때는 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나 { } 안에 조건부 연산자를 사용하면 된다.
-> 조건부 연산자 = 삼향 연산자 라고도 한다.
function App() {④ AND 연산자 &&를 사용하여 조건부 렌더링을 구현할 수 있다.
- && 연산자로 조건부 렌더링이 가능한 이유는 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않는다.
-> false 값인 0인 예외적으로 화면에 나타난다.
const number = 0;
return number && <div>내용</div>
{/* 화면에 0이 나타난다. */}⑤ 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안된다.
- 어떤 값이 undefined일 수도 있다면 OR(||) 연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있기 때문에 오류를 해결할 수 있다.
⑥ 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 한다.
- 스타일 이름 중 -문자가 포함되는 이름 (background-color)가 있다면 -문자를 없애고 카멜 표기법으로 작성하여야 한다.
-> backgroundColor로 작성한다.
⑦ JSX에서는 class가 아닌 className으로 설정하여야 한다.
- HTML과 CSS 클래스를 사용할 때는 class 속성을 사용하지만 JSX에서는 className을 사용한다.
⑧ JSX에서는 태그를 닫지 않으면 오류가 발생한다.
- HTML 코드를 작성할 때 가끔 태그를 닫지 않는 상태로 작성하기도 하는데 문제 없이 작동하지만 JSX에서는 태그를 꼭 닫아야 한다.
ex) input HTML 요소는 < input >< /input > 또는 < input >이라고 작성해도 작동한다.
- 태그 사이에 별도의 내용이 들어가지 않는 경우에는 선언하면서 동시에 닫을 수 있는 self-closing 태그를 선언한다.
⑨ 주석 {/ ... /}
- JSX 내부에서 주석을 작성할 때는 {/ ... /} 형식으로 작성한다.
3. ESLint 와 Prettier 적용하기
- ESLint: 문법 검사 도구
-> 코드를 작성할 때 실수를 하면 에러 혹은 경고 메시지를 VS Code 에디터에서 바로 확인할 수 있게 한다.
- Prettier: 코드 스타일 자동 정리 도구
-> 들여쓰기, 세미콜론 ; 등 자동으로 바꾸어 준다.
