코드스플리팅

• 자바스크립트 함수 비동기 로딩
• React.lazy, Suspense를 통한 컴포넌트 코드 스플리팅
• Loadable Components를 통한 코드 스플리팅

• Hooks로 컨테이너 컴포넌트 만들기
  • useSelector
  • useDispatch
  • useStore
  • connect 함수와의 주요 차이점

• middleware 란?
  • middleware 만들기
  • redux-logger
• 비동기 작업 처리 미들웨어
  • redux-thunk
  • redux-saga

리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있습니다. 또한 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있습니다.

단순히 전역 상태 관리만 한다면 Context API를 사용하는 것만으로도 충분합니다.
하지만 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기 때문에 프로젝트의 규모가 클 경우에는 리덕스를 사용하는 편이 좋습니다.

리덕스는 편리한 개발자 도구도 지원하며, 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해줍니다.

• 리덕스의 키워드
• 리액트 없이 쓰는 리덕스
• 리덕스의 세 가지 규칙

• SPA 란?
• SPA의 단점
• 기본적인 사용법
• URL 파라미터와 쿼리
• 서브 라우트
• 리액트 라우터 부가 기능

리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있습니다.

• 일반 CSS
• Sass 사용하기
• CSS Module
• styled-components

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, useEffect등의 기능을 제공합니다.

• useState
• useEffect
• useReducer
• useMemo
• useCallback
• useRef
• 커스텀 Hooks 만들기
• 다른 개발자가 만든 Hooks

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재합니다.

컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다.

컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리하거나, 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 때 등에 컴포넌트 라이프사이클 메서드를 사용합니다.

라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다.

• 라이프사이클 메서드의 이해
• 라이프사이클 메서드 살펴보기
• 라이프사이클 메서드 사용하기

• 컴포넌트 배열

• key

• 응용

HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있습니다. 바로 ref(reference의 줄임말) 개념입니다.

• ref는 어떤 상황에서 사용해야 할까?

• ref 사용

• 컴포넌트에 ref 달기

• 참고 :
  리액트 컴포넌트 안에서도 id를 사용할 수 있지만, 특수한 경우가 아니라면 사용을 권장하지 않음.
  예를 들어 같은 컴포넌트를 여러 번 사용한다면 중복 id를 가진 DOM이 여러 개 생기니 잘못된 사용이 됨.

  ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않음.