[실전 리액트 프로그래밍] 이론 정리

내가 보려고 정리하는 간단한 이론,,

이론 내용이 나오면 계속해서 수정된다.

 

리액트란 무엇인가

 

- 자동으로 업데이트 되는 UI

- UI = render(state)

- render 함수는 순수함수로 작성

  순수함수 특징 : 입력값이 같으면 출력값이 같음

  ㄴ랜덤함수 사용  x (입력값이 같아도 출력값이 다름)

  ㄴ외부 상태 변경 x (다른 render 함수의 출력값에 영향)

- state는 불변 변수로 관리 : 어떤 객체의 속성 변경 시 새로운 객체를 만들어 값 할당

순수함수와 불변변수 사용시 복잡도 및 버그 발생 확률이 낮아짐, 렌더링 성능 향상

- 가상 돔 (virtual dom)을 활용하여 UI 빠르게 업데이트

 

---

 

npm start

: 기본적으로 http로 실행

 

https=true npm start (맥)

set HTTPS=true && npm start (윈도우)

: https 로 실행됨.

 

build

: (정적파일 생성)배포할 때 사용/ 서버에 애플리케이션을 실행하지 않기 때문에 서버사이드 렌더링으로 동작할 수 없음

npm run build

npx serve -s build

 

큰 이미지는 media파일에 저장이 되지만, 작은 이미지는 js 파일에 내장됨.

HTTP 요청 횟수를 줄일 수 있고, 빠르게 이미지를 보여줄 수 있음.

 

test

npm test

파일.spec.js 로 만들면 테스트 파일로 인식함

_tests_ 폴더를 만들면, 이 폴더 밑에 있는 모든 파일은 테스트 파일이 됨.

 

eject

react-scripts를 사용하지 않고 모든 설정 파일을 추출하는 명령어

CRA 기반으로 직접 개발환경을 구축하고 싶을 때 사용.

그러나 업데이트시 설정파일을 수정해야 하므로, 필요한 상황이 아니면 사용 X

 

polyfill

core-js를 사용

원하는 경로를 찾아서, import를 통해 포함시키면 됨.

CRA는 기본적으로 core-js가 내장되어 있음.

 

환경변수

NODE_ENV : cra가 기본적으로 가지고 있는 환경변수

process.env.NODE-ENV

npm start -> development

npm test -> test

npm run buile - production

각각 실행하는 것에 따라 값이 다름

 

커맨드라인에서 환경변수 입력하는 방법

REACT_APP_

REACT_APP_API_URL=api.myapp.com npm start (맥)

set "REACT_APP_API_URL=api.myapp.com" && npm start (윈도우)