리액트
웹 애플리케이션 개발에 필요한 기능 중 UI만 제공한다.
전역 상태관리, 라우팅, 빌드시스템 등을 직접 구축해야 한다.
변경된 상태값을 기반으로 UI를 자동으로 업데이트 한다.
state와 props
상태값은 해당 컴포넌트가 관리하는 데이터, 속성값은 부모 컴포넌트로부터 전달받는 데이터다.
리액트에서 UI 데이터는 반드시 상탯값과 속성값으로 관리해야 한다.
react는 부모컴포넌트에서 자식컴포넌트로 데이터흐름이 발생하는 단방향!
가상 돔
이전 UI상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산한다. 불필요한 UI업데이트는 줄고, 렌더링 성능이 좋아진다.
함수형 프로그래밍
render함수는 순수 함수로 작성하고 state는 불변변수로 관리한다.
상태값을 수정할 때는 기존 값을 변경하는 게 아니라 새로운 객체를 생성해야 한다.
코드의 복잡도가 낮아지고, 찾기 힘든 버그가 발생할 확률이 줄어든다.
-> 렌더링 성능을 크게 향상시킬 수 있다.
리액트 네이티브
하나의 소스코드로 안드로이드와 IOS에서 동작하는 앱을 만들 수 있다.
바벨
자바스크립트 코드를 변환해주는 컴파일러. JSX 문법을 createElement 함수로 사용 변환해준다.
플러그인 단위로 자바스크립트 파일을 변환해 주는데, 하나의 목적을 위한 여러개의 플러그인 집합을 프리셋이라고 한다.
+) 폴리필
자바스크립트 최신 기능을 모두 사용하면서 오래된 브라우저를 지원하려면 바벨로 코드 문법을 변환하는 동시에 폴리필도 사용해야 한다.
폴리필은 런타임에 기능이 존재하는지 검사해서 기능이 없는 경우 주입한다.
JSX
babel을 통해 js파일로 컴파일되기 때문에 지켜야 할 규칙이 있다.
- className 키워드 사용.
- self-closing-tag (
<img />) 사용. - jsx 안에서 변수나 문법을 사용할 때에는 중괄호로 감싸야 한다.
- 두개 이상의 elements는 무조건 상위 element로 감싸져 있어야 한다.
React.fragment
Dom node를 추가하지 않고 그룹화 할 수 있다. 유일한 속성 key
-> 불필요한 Dom 생성을 막아 메모리를 적게 사용한다. div 태그의 경우 css 레이아웃에 영향을 주는데, fragment는 영향을 주지 않는다.
// 유일한 속성인 key
<React.fragment key={idx}>
<div/>
</React.fragment>
// key 속성을 부여할 수 없다.
<>
<div/>
</>
웹팩
자바스크립트로 만든 프로그램을 배포하기 좋은 형태로 묶어주는 도구. 모듈 번들러
- 모듈: 각 리소스 파일
- 번들: 웹팩 실행 후 나오는 결과 파일. 하나의 번들 = 모듈의 모임
ESM 문법
- default는 한 파일에서 한 번만 사용할 수 있다.
- default로 내보내진 코드는 괄호 없이, 원하는 이름으로 가져올 수 있다. ex) myFunc1
- default 키워드 없이 내보내진 코드는 괄호를 사용해서 내보낼 때 사용한 이름 그대로 가져와야 하며, as 키워드를 이용해서 이름을 변경할 수 있다. ex) as myFunc2
// file1.js
export default function func1 () {}
export function func2 () {}
// file2.js
import myFunc1, { func2 } from './file1.js'
// file2.js
import { func2 as myFunc2 } from './file1.js'클래스형 컴포넌트 vs 함수형 컴포넌트
함수형 컴포넌트는 상태값을 가질 수 없고, 리액트 컴포넌트의 생명주기 함수를 작성할 수 없었다.
16.8 ver 부터 훅이라는 기능이 추가되면서 훅과 함께 함수형 컴포넌트를 작성하는 것을 권장한다.
Create-React-App
리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다.
ex) 바벨과 웹팩, 테스트시스템, HMR(Hot-Module-Replacement), ES6+문법, CSS 후처리 등
- HMR 코드를 수정하면 화면에 즉시 반영된다.
npm start개발 모드 실행 시 에러 메세지가 출력된다. - index.js로 부터 연결된 모든 js파일과 css 파일은 src폴더 밑에 있어야 한다. src폴더 바깥에 있는 파일을 import하면 실패한다.
- index.html에서 참조하는 파일은 public 폴더 밑에 있어야 한다. link나 script 태그를 이용해서 포함시킬 수 있다.
- 이미지, 폰트 파일도 src폴더 밑에서 import 하여 사용하는 것이 좋다. -> 웹팩에서 해시값을 이용해 url을 생성해주어 브라우저 캐싱 효과를 볼 수 있다.
폴리필
자바스크립트 표준에는 새로운 문법과 새로운 객체, 함수가 추가된다.
새로운 문법은 대부분 브라우저에서 지원하지 않더라도 바벨을 이용하면 빌드 시점에 코드가 변환되어 사용이 가능하다.
CSS
코드 재사용을 위해 Sass, css-module, css-in-js를 사용한다.
Sass
변수와 믹스인 개념이 있어서 중복 코드를 줄일 수 있다.
npm i nods-sass
scss 확장자를 가지는 파일을 불러오면 자동으로 Sass 파일이 CSS파일로 컴파일 된다.- 다른 scss 파일에 정의된 변수를 사용할 수 있다. ex)
$mainColor
css-in-js
자바스크립트 안에서 관리되기 때문에 공통되는 CSS 코드를 변수로 관리할 수 있고, 동적으로 코드를 작성하기 쉽다.
SPA 단일 페이지 어플리케이션
초기 요청 시 서버에서 첫 페이지를 처리하고 이후의 라우팅은 클라이언트에서 처리하는 웹 애플리케이션
react-router-dom
- BrowserRouter로 전체를 감싸야 한다.
- Link 페이지 전환 시 사용하는 컴포넌트, to 이동할 주소
- Route path="/" 슬래시 단위로 이동.
- match 속성값
${match.url}/:roomId을match.params.roomId로 받아 사용할 수 있다.
Reference
실전 리액트 프로그래밍 / 인사이트 / 이재승
