리액트를 다루는 기술, The Art Of React

# 🎈 왜 리액트인가? ### 2. 조화 과정 ### 1. DOM이란? ### 2. Virtual DOM # 🧶 작업 환경설정

# JSX란? ## 자바스크립트의 확장 문법 ## JSX 문법 ## ESLint와 Prettier (VSC에서)

# 😁 클래스형 컴포넌트 ## 클래스형 컴포넌트의 특징 ## 함수형 컴포넌트를 사용해야하는 경우 ### function 컴포넌트 ### class 컴포넌트 # 😋 props # 😏 state ## props와 state의 차이점 # 🙄 state 사용 시 주의점

# 😁 리액트의 이벤트 시스템 ## 이벤트를 사용할 때 주의 사항 # 🤣 예제로 이벤트 핸들링 익히기 ## 여러 인풋을 State로 다루는 방법 # 😍 함수형 컴포넌트로 구현해 보기 ## input 요소가 여러 개일 때 state를 객체로 다루는 법

# 🤣 ref란? # 😁 ref는 어떤 상황에서 사용해야 할까? ### 콜백 함수를 통한 ref 설정 ### createRef를 통한 ref 설정 # 😄 컴포넌트에 ref 달기 # 🎁 scrollTop, scrollHeight, clientHeight의 차이

# 😁 자바스크립트 배열의 map() 함수 ## arr.map(callback, [thisArg] ### calback 함수의 세 가지 파라미터 ### thisArg # 😋 데이터 배열을 컴포넌트 배열로 변환하기 ## 특정 컴포넌트를 추가하고 삭제하기

# 😀 라이프사이클 메서드의 이해 ## 마운트 ## 업데이트 ## 언마운트 ## componentDidCatch # 🙄 라이프사이클 메서드 사용하기

# 😁 useState # 😃 useEffect # 🙄 useReducer # 😏 useMemo # 😙 useCallback # 😋 useRef # 😜 Custom Hooks

# 😀 가장 흔한 방식, 일반 CSS ## 이름 짓는 규칙 ## CSS Selector # 😁 Sass 사용하기 # 😂 CSS Module # 😃 styled-components

# 😇 프로젝트 준비하기 # 😎 UI 구성하기 ## Flexbox Froggy # 😱 기능 구현하기 ## App ## TodoTemplate ## TodoInsert ## TodoList ## TodoListItem

# 🤪 크롬 개발자 도구를 통한 성능 모니터링 # 😰 React.memo를 사용하여 컴포넌트 성능 최적화 ## useState의 함수형 업데이트 ## useReducer를 사용 # 😍 불변성의 중요성 # 🥰 react-virtualized를 사용한 렌더링 최적화

# 😎 immer를 설치하고 사용법 알아보기 # 😂 useState의 함수형 업데이트와 immer 함께 쓰기

# 😁 SPA란? # 😭 SPA의 단점 ## Link # 😍 URL 파라미터와 쿼리 ## URL Query ## qs # 🙄 서브 라우트 # 😐 리액트 라우터 부가 기능 ## history ## withRouter ## Switch ## NavLink

# 😁 비동기 작업의 이해 ## 콜백 함수 ## Promise Then ## Async Await # 😎 Axios로 API 호출해서 데이터 받아 오기 # 😋 Newsapi API 키 발급받기 # 🤩 usePromise 커스텀 Hook 만들기

# 😎 Context API를 사용한 전역 상태 관리 흐름 이해하기 # 😋 Context API 사용법 익히기 ## createContext ## Provider # 😁 동적 Context 사용하기 ## useContext Hook

# 😎 개념 미리 정리하기 ## 액션 ## 액션 생성 함수 ## 리듀서 ## 스토어 ## 디스패치 ## 구독 # 😋 리액트 없이 쓰는 리덕스 # 😂 리덕스의 세 가지 규칙 ## 단일 스토어 ## 읽기 전용 상태 ## 리듀서는 순수한 함수 ## 주의사항

# 😁 UI 준비하기 # 😂 리덕스 코드 작성하기 # 😍 Hooks를 사용하여 컨테이너 컴포넌트 만들기 ## lib/useActions.js ## immer ## react-redux ## react-scripts ## redux ## redux-actions

# 🙄 미들웨어란? ## 미들웨어 코드의 기본 구조 ## 로그 남기는 미들웨어 코드 # 😎 비동기 작업을 처리하는 미들웨어 ## Redux-Thunk ### Exercise ## Redux-Saga

# 😎 비동기 작업을 처리하는 Redux-Saga # 😁 Redux-Saga가 필요한 상황 # 🤩 제너레이터 함수 이해하기 # 🥳 실전 코드 연습

# 😄 Koa # 😎 Middleware # 😜 Nodemon # 😍 Koa-router # 😱 Route 모듈화 # 🤓 REST API # 🧐 Koa-bodyparser # 🥶 REST API2

# 😁 관계형 데이터베이스의 한계 # 🤪 MongoDB 준비(MacOS) # 🧐 스키마와 모델 # 😘 실습 코드

# 😄 Database API # 😎 요청 검증 # 😘 페이지네이션

# 😄 JWT # 😎 실제 코드 # ⭐️ 팁 - openssl rand -hex 64: 랜덤 키를 만들어준다.

이 글은 "리액트를 다루는 기술(김민준, 길벗)"을 요약한 글입니다. 많은 예제 코드들이 이 책에서 인용되었습니다. 자세하고 정확한 내용을 확인하시려면 책을 직접 구매해 읽어보시기를 추천드립니다.