변수에 기본값을 설정하고 싶을 때, 논리연산자 OR(||)을 사용하는 것이 일반적이었습니다.

1
2

const name = 'Dongwon';
const user = name || 'Guest';

이러한 사용은 자바스크립트의 false값 (0, ‘’, NaN, null, undefined) 모두를 Guest로 할당하기 때문에 잠재적 버그 가능성이 높았습니다.

ES11에 추가된 Nullish coalescing operator(??)를 사용하면 좀 더 명확하게 사용할 수 있습니다.

ES11에 추가된

• Optional chaining 연산자를 이용해 에러 없이 속성값에 접근해보자

코드스플리팅

• 자바스크립트 함수 비동기 로딩
• 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

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

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

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

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

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