리액트 시작 전 기초

책 '실전 리액트 프로그래밍'의 1장을 읽고 학습 목적으로 정리한 내용입니다.

• 리액트는 UI 기능만 제공한다.
  • 따라서 전역 상태 관리, 라우팅, 빌드 시스템 등을 각 개발자가 직접 구축해야 한다.
  • 진입장벽을 낮추기 위해, create-react-app을 이용하면 하나의 명령어로 리액트 개발 환경을 구축할 수 있다.
• 프런트엔드 라이브러리(또는 프레임워크)를 사용하는 이유는 무엇일까?
  • 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해주기 때문이다.
    • UI = render(state)
    • 이런 도구를 사용하지 않으면 브라우저의 돔을 직접 업데이트 해야 하고, 돔을 직접 업데이트하는 코드는 잘 관리하지 않으면 프로그램이 커질수록 복잡도가 기하급수적으로 커진다.
• 리액트의 장점
  • 가상 돔을 통해서 UI를 빠르게 업데이트한다는 점이다.
• 가상 돔
  • 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 가상 DOM 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다.
• 함수형 프로그래밍을 적극적으로 활용한다
  • render 함수는 순수함수로 작성한다
    • 인수 state가 변하지 않으면 항상 같은 값을 반환해야 한다.
  • state(리액트의 props와 state)는 불변 변수로 관리한다
    • 컴포넌트의 상탯값을 수정할 때는 기존 값을 변경하는 게 아니라 새로운 객체를 생성해야 한다.
  • 장점
    • 이와 같이 하면 복잡도가 낮아지고, 찾기 힘든 버그가 발생할 확률이 줄어든다.
    • 렌더링 성능을 크게 향상시킬 수 있다.
• 리액트 네이티브
  • 리액트 개발 자바스크립트 파일 중 react.js는 플랫폼 구분 없이 리액트 네이티브 등을 통해 모바일에서도 공통으로 사용되는 리액트의 핵심기능을 담고 있으며, react-dom.js는 웹에서만 사용되는 파일이다.
  • 웹 앱을 개발할 때 사용되는 리액트 패키지(react.js)가 리액트 네이티브에서도 그대로 사용된다. 웹에서의 react-dom 역할을 하는 리액트 네이티브 코드가 별도로 존재한다.
  • 다만, 인앱 구매나 푸시 알림과 같이 플랫폼에 종속적인 기능을 사용하기 위해서는 플랫폼별로 코드를 작성해야 한다.
  • JavaScriptCore
    • 이는 웹킷에 내장되었으며 C++로 작성된 자바스크립트 엔진이다.
    • 리액트 네이티브는 모바일에서 자바스크립트를 실행하기 위해 JavaScriptCore를 사용한다.
    • 대부분의 모바일 운영체제는 JavascriptCore를 앱 빌드 시 포함함으로써 Js 실행환경을 제공한다.
  • 가상 돔
    • 리액트의 가상 돔은 웹뿐만 아니라 리액트 네이티브에서도 동작한다.
    • 가상 돔은 데이터가 변경됐을 대 UI에서 변경된 부분을 빨리 찾기 위해 사용되는 범용적인 자료구조다.
• 바벨
  • 바벨은 자바스크립트 코드를 변환해 주는 컴파일러다.(JS를 입력으로 받아 다른 JS 파일을 출력)
    • 바벨을 사용하면 최신 JS 문법을 지원하지 않는 환경에서도 최신 문법을 사용할 수 있다.
    • 코드에서 주석을 제거하거나 코드를 압축하는 용도로 사용될 수도 있다.
    • 리액트에서는 JSX 문법을 사용하기 위해 바벨을 사용한다. 바벨이 JSX 문법으로 작성된 코드를 createElement 함수를 호출하는 코드로 변환해 준다.
  • 파일을 변환해주는 작업은 플러그인 단위로 이루어진다.
    • 두 번의 변환이 필요하면 두 개의 플러그인을 사용한다. 하나의 목적을 위해 여러 개의 플러그인이 필요할 수 있는데, 이러한 플러그인의 집합을 프리셋(preset) 이라고 한다.
  • @babel/cli 에는 커맨드 라인에서 바벨을 실행할 수 있는 바이너리 파일이 들어 있다.
  • @babel/preset-react 는 리액트 애플리케이션을 만들 때 필요한 플러그인을 모아 놓은 프리셋이다.
• createElement 함수

  React.createElement(componenet, props, ...children) => ReactElement

  1. component는 문자열이나 리액트 컴포넌트다. 문자열이면 HTML 태그에 해당하는 돔 요소가 생성된다.
  2. props는 컴포넌트가 사용하는 데이터를 나타낸다.
  3. children은 해당 컴포넌트가 감싸고 있는 내부의 컴포넌트를 가리킨다.
• JSX
  • JSX 문법은 HTML에서 태그를 사용하는 방식과 유사하다.
  • HTML 태그와의 가장 큰 차이는 속성값을 작성하는 방법에 있다.
    • class → className (자바스크립트 예약어와 중복을 피하기 위함)
• npx
  • npx 명령어는 외부 패키지에 포함된 실행 파일을 실행할 때 사용된다.
• 웹팩
  • 웹팩은 자바스크립트로 만든 프로그램을 배포하기 좋은 형태로 묶어 주는 도구다.
  • 필요성
    • 2000년대 초반에는 필요한 자바스크립트 코드의 양이 많지 않았다. 그런데 웹사이트 제작 방식이 단일 페이지 어플리케이션으로 전환되면서, 한 페이지에도 자바스크립트 파일이 수십 또는 수백 개 필요하게 되어 기존 방식이 통하지 않았다.
    • 관리해야 하는 자바스크립트 파일이 많아지면 생기는 문제점
      • 파일 간의 의존성 때문에 선언되는 순서를 신경써야 한다.
        • 뒤에 선언된 자바스크립트 파일이 앞에 선언된 파일에서 생성한 전역 변수를 덮어쓰는 위험도 존재한다.
  • 패키지 설치
    • npm install webpack webpack-cli
  • 사용
    • 웹팩을 이요하여 여러 개의 자바스크립트 파일을 하나의 파일로 합치려면, ESM 문법이나 commonJS 문법을 활용하여 궁극적으로 index.js에서 다른 모듈을 가져오는 코드를 작성하고 npx webpack 명령어를 실행한다.
      • 그러면 dist 폴더 밑에 main.js 파일이 생성된다.
  • 브라우저 캐싱 효과
    • 이미지 파일이나 폰트 파일도 마찬가지로 src 폴더 밑에서 import 키워드를 사용해서 포함시키는 게 좋다. 웹패에서 해시값을 이용해서 url을 생성해 주기 때문에 파일의 내용이 변경되지 않으며 브라우저 캐싱 효과를 볼 수 있다.
• serviceWorker.js
  • serviceWorker.js 파일에는 PWA(progressive web app)와 관련된 코드가 들어 있다.
  • PWA는 오프라인에서도 잘 동작하는 웹 앱을 만들기 위한 기술이다.
    • CRA로 프로젝트를 생성하면 PWA 기능은 기본적으로 꺼져 있다.
    • PWA 기능을 원한다면 index.js 파일에 serviceWorker.register(); 코드를 넣으면 된다.
• CRA 필수 파일
  • index.html, index.js, package.json 파일을 제외한 나머지 파일은 데모 앱을 위한 파일이기 때문에 마음대로 수정하거나 삭제해도 괜찮다.
  • index.js로부터 연결된 모든 JS 파일과 CSS 파일은 src폴더 밑에 있어야 한다.
• 주요 명령어
  • npm start
    • 개발 모드로 프로그램을 실행한다. HMR이 동작하여 코드 수정 시 화면에 즉시 반영된다.
    • API 호출을 위해 https로 실행해야 하는 경우 다음 명령어 실행하면 자체 서명된 인증서와 함께 https 사이트로 접속한다.
      • 맥 : HTTPS=true npm start
      • 윈도우 : set HTTPS=true && npm start
  • npm run build
    • 배포 환경에서 사용할 파일을 만든다.
    • 로컬에서 웹 서버를 띄워서 확인할 수 있다.
      • npx serve -s build
        • serve 패키지는 노드 환경에서 동작하는 웹 서버 애플리케이션이다.
  • npm test
    • 테스트 코드가 실행된다.
      • CRA에서는 JS 파일이 다음 조건을 만족하면 테스트 파일로 인식한다.
        • __tests__ 폴더 밑 JS 파일, 파일명이 .test.js 또는 .spec.js 로 끝나는 파일
      • watch 모드가 필요 없는 환경은 다음 명령어 사용
        • 맥: CI=true npm test
        • 윈도우: set "CI=true" && npm test
    • npm run eject
      • 숨겨져 있던 CRA의 내부 설정 파일이 밖으로 노출된다. 이 기능을 사용하면 바벨이나 웹팩의 설정을 변경할 수 있다.
• 폴리필
  • 새 자바스크립트 표준이 나와도 대다수 사용자의 브라우저에서 지원하지 않으면 사용할 수 없다. 그러나 바벨을 이용하면 새 문법도 대부분의 브라우저에서 어느 정도 사용 가능하다.
  • 실행 시점에 주입하고자 하는 객체나 함수가 현재 환경에 존재하는지 검사해서 존재하지 않은 경우에만 주입하는 게 좋다. 이렇게 기능이 존재하는지 검사해서 그 기능이 없을 때만 주입하는 것을 폴리필이라고 한다.
• 코드 분할
  • 코드 분할을 이용하면 사용자에게 필요한 양의 코드만 내려 줄 수 있다.
  • 동적 임포트를 통해 코드 분할할 수 있다.
• 환경 변수 사용하기
  • CRA에서는 빌드 시점에 환경 변수를 코드로 전달할 수 있다.
  • 전달된 환경 변수는 코드에서 process.env.{환경 변수 이름} 으로 접근할 수 있다.
  • NODE_ENV 환경변수의 값은 다음과 같이 결정된다.
    • npm start로 실행하면 development
    • npm test로 실행하면 test
    • npm run build로 실행하면 production
  • 이외의 환경변수는 REACT_APP_ 접두사를 붙여야 한다.
    • process.env.REACT_APP_ 형태로 접근한다.
  • 환경 변수는 셸에서 입력하거나 .env 파일을 이용해 입력할 수 있다.
    • 셸로 환경변수 입력하는 방법
      • 맥 : REACT_APP_API_URL=api.myapp.com npm start
      • 윈도우 : set "REACT_APP_API_URL=api.myapp.com" && npm start
• CSS 작성 방법
  • 리액트 프로그래밍을 할 때는 컴포넌트를 중심으로 생각하는 게 좋다. UI는 컴포넌트의 조합으로 표현되며, 컴포넌트 하나를 잘 만들어서 여러 곳에 재사용하는 게 좋다. 그렇게 하기 위해서 각 컴포넌트는 서로 간의 의존성을 최소화하면서 내부적으로는 응집도를 높여야 한다.
    • 응집도가 높은 컴포넌트를 작성하기 위해 CSS 코드도 컴포넌트 내부에서 관리하는 게 좋다.
      • 컴포넌트 내부에서 CSS 코드를 관리하는 방법으로 css-module, css-in-js 등이 있다.
    • css-module
      • css-module을 사용하면 일반적인 css 파일에서 클래스명이 충돌할 수 있는 단점을 극복할 수 있다. 컴포넌트 단위로 스타일을 적용할 때 좋다.
      • CRA에서는 css 파일 이름을 다음과 같이 작성하면 css module이 된다. {이름}.module.css
      • css-module은 클래스명 정보를 담고 있는 객체를 내보내며, css 파일에서 정의한 클래스명은 style 객체의 속성 이름으로 존재한다. 각 클래스명에 고유한 해시값이 들어 있다.
    • css-in-js
      • 이는 css 코드를 js 파일 안에서 작성하는 방식이다. 이 덕분에 공통되는 css 코드를 변수로 관리할 수 있고, 동적으로 css 코드를 관리하기도 쉽다.
      • styled-components 등이 있다. 태그드 템플릿 리터럴 문법을 이용한다. 탬플릿 리터럴에서 표현식을 사용하면 컴포넌트의 속성값을 매개변수로 갖는 함수를 작성할 수 있다.
• 단일 페이지 애플리케이션
  • SPA 구현하려면 다음 두 가지 기능이 필요하다.
    • 자바스크립트에서 브라우저로 페이지 전환 요청(pushState)을 보낼 수 있다. 단, 브라우저는 서버로 요청을 보내지 않아야 한다.
    • 브라우저의 뒤로 가기(popState)와 같은 사용자 페이지 전환 요청을 자바스크립트에서 처리할 수 있다. 이때도 브라우저는 서버로 요청을 보내지 않아야 한다.
  • 브라우저 API의 pushState, replaceState 함수와 popState 이벤트를 사용한다. 브라우저에는 히스토리에 state를 저장하는 스택이 존재한다.
    • replaceState는 pushState와 거의 같지만 스택에 state를 쌓지 않고 가장 최신의 state를 대체한다.
  • 브라우저 히스토리 API를 이용해서 페이지 라우팅 처리를 직접 구현할 수도 있지만, react-router-dom을 이용하는 것이 더 간단하다. 이 패키지 또한 내부적으로 브라우저 히스토리 API를 사용한다.
    • react-router는 웹뿐만 아니라 리액트 네이티브도 지원한다.