No Story, No Ecstasy

15. Context API - Context API는 전역적으로 사용할 데이터가 있을 때 유용한 기능 - 예) 로그인 정보, 애플리케이션 환경 설정, 테마 등 - 새 Context 만들기 . import { createContext} from 'react'; . const ColorContext = createContext({ color: 'black' }); - Provider를 사용하면 Context의 value를 변경할 수 있다. . Provider를 사용할 때는 value 값을 명확히 명시해야 한다. - 동적 Context 사용하기 . Context의 value에 값이 아닌 함수를 전달할 수도 있다. . onClick: 좌클릭, onContextMenu: 우클릭 (e => {e.preventDe..

14. 외부 API를 연동하여 뉴스 뷰어 만들기 - 비동기 작업의 이해 > API 호출해서 데이터 받아오기 > API 키 발급받기 > 뉴스 뷰어 UI 만들기 > 데이터 연동하기 > 카테고리 기능 구현하기 > 리액트 라우터 적용하기 - 비동기 작업의 이해 . setTimeout(func, 3000) : 3초 후에 func 수행 - Promise: 콜백 지옥 코드가 형성되지 않도록 ES6에 도입된 기능 . then을 사용하며 그 다음 작업을 설정하기 때문에 콜백 지옥이 형성되지 않는다. function increase(number) { const promise = new Promise((resolve, reject) => { setTimeout(() => { const result = number + 10;..

13. 리액트 라우터로 SPA 개발하기 - SPA (Single Page Application)란? . 기존에는 사용자에게 보이는 화면은 서버 측에서 준비했다. . 리액트 같은 라이브러리를 사용하는 뷰 렌더링은 사용자의 브라우저가 화면 준비를 담당한다. . 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트한다. (서버 API로 필요한 데이터만 새로 불러옴) . 라우팅(다른 주소에 다른 화면을 보여주는 것): react-router, reach-router, Next.js 등 - SPA의 단점 . 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다. . 그러나, 코드 스플리팅을 사용하면 라우트 별로 파일들을 나누어서 트래픽과 로딩 속도를 개선할 수 있다. . 자바스크립트를 수행하지 않는 일..

12. immer를 사용하여 더 쉽게 불변성 유지하기 - 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 객체를 복사 및 갱신이 가능하다. - 하지만, 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트하는 것이 힘들어진다. - immer를 사용하면 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하며 불변성을 유지하며 업데이트할 수 있다. - immer 설치 $ yarn create react-app immer-tutorial $ cd immer-tutorial $ yarn add immer - immer 사용법 Ex 1) import produce from 'immer'; const nextState = produce(originalState, draft => { // 바꾸고 싶은 ..

11. 컴포넌트 성능 최적화 - useState 기본값에 함수를 넣어주면, 처음 렌더링될 때만 함수가 실행된다. . ex) useState(createBulkTodos()) -> 리렌더링마다 호출, useState(createBulkTodos) -> 최초 렌더링 때만 호출 - 크롬 개발자도구 > Performance 메뉴에서 성능 모니터링 - 느려지는 원인 분석 (렌더링이 발생하는 상황) 1. 자신이 전달받은 props가 변경될 때 2. 자신의 state가 바뀔 때 3. 부모 컴포넌트가 리렌더링될 때 4. forceUpdate 함수가 실행될 때 -> 최대한 리렌더링 횟수를 줄여야 한다. - React.memo를 사용하여 컴포넌트 성능 최적화 . 리렌더링을 방지할 때는 shouldComponentUpdat..

- 파일 구성 . public/index.html : 실제 메인페이지 . App.js의 내용을 index.js가 index.html에 넣어주는 것이다. . node_modules: library 모아두는 곳 . public: static 파일 보관함 (압축이 안 됨) . package.json: 설치한 라이브러리들이 메모되는 곳 - JSX (데이터 바인딩) . className으로 클래스명을 선언한다. . App.css에서 스타일 수정 . {} 안에 변수명을 그대로 넣어준다. 예: { 변수명, 함수 등 } . 뭐가 되었든 변수로 선언하고 싶으면 중괄호를 사용하면 된다. . style을 설정할 때도 무조건 중괄호 안에 object 자료형을 넣는다. . Image는 import해와서 사용한다. . 주석처리 ..

1. React 개발을 위한 환경 구성 - create-react-app이란? 페이스북에서 만든 react 웹 개발용 boilerplate npx create-react-app 2. 디렉토리 진입 후 Docker 실행을 위한 파일 작성 2.1. docker-compose.yml version: '3.7' services: react_01_app: container_name: react_01_app build: context: . dockerfile: Dockerfile volumes: - '.:/app' - '/app/node_modules' ports: - '3001:3000' environment: - NODE_ENV=development - CHOKIDAR_USEPOLLING=true #App이 수..