리액트 디자인 패턴과 모범 사례

1장. 리액트에 대해 알아야 할 모든 것

__선언식 프로그래밍
__리액트 요소
__잊어야 할 기존의 모든 방식
__흔한 오해
__요약

2장. 깔끔한 코드 관리

__JSX
____바벨
____Hello, World!
____DOM 요소와 리액트 컴포넌트
____프로퍼티
____자식
____HTML과 다른 점
____속성 전개
____자바스크립트 템플릿
____일반적인 패턴
__ES린트
____설치
____구성
____리액트 플러그인
____에어비앤비 구성
__함수형 프로그래밍의 기본
____일급 객체
____순수성
____불변성
____커링
____합성
____함수형 프로그래밍과 인터페이스
__요약

3장. 진정한 재사용 가능 컴포넌트

__클래스 만들기
____createClass 팩토리
____React.Component 확장
____주요 차이점
____상태 비저장 함수형 컴포넌트
__상태
____외부 라이브러리
____작동 방식
____비동기
____리액트 럼버잭
____상태 사용
__프로퍼티 형식
____리액트 독젠
__재사용 가능 컴포넌트
__살아 있는 스타일 가이드
__요약

4장. 모든 것을 조합하기

__컴포넌트 간 통신
____children
__컨테이너와 프레젠테이션 패턴
__믹스인
__상위 컴포넌트
__리컴포즈
____컨텍스트
__함수 자식
__요약


5장. 올바른 데이터 읽기

__데이터 흐름
____자식-부모 통신(콜백)
____공통 부모
__데이터 읽기
__리액트 리페치
__요약

6장. 브라우저에 맞는 코드 작성

__폼
____제어되지 않는 컴포넌트
____제어되는 컴포넌트
____JSON 스키마
__이벤트
__참조
__애니메이션
____리액트 모션
__SVG
__요약

7장. 컴포넌트 꾸미기

__자바스크립트 내의 CSS
__인라인 스타일
__라듐
__CSS 모듈
____웹팩
____프로젝트 설정
____로컬 범위 CSS
____원자형 CSS 모듈
____리액트 CSS 모듈
__스타일드 컴포넌트
__요약

8장. 재미와 효율을 위한 서버 측 렌더링

__유니버설 애플리케이션
__서버 측 렌더링을 구현하는 이유
____검색 엔진 최적화
____공용 코드베이스
____성능 개선
____복잡성을 무시하지 말 것
__간단한 예제
__데이터 읽기 예제
__Next.js
__요약

9장. 애플리케이션의 성능 개선

__조정과 키
__최적화 기법
____컴포넌트 업데이트 여부
____상태 비저장 함수형 컴포넌트
__일반적 해결책
____업데이트하는 이유
____render 메소드 안에 함수 만들기
____상수 프로퍼티
____리팩토링과 좋은 설계
__툴과 라이브러리
____불변성
____모니터링 툴
____바벨 플러그인
__요약

10장. 테스트와 디버깅

__테스트의 혜택
__제스트를 사용한 편리한 자바스크립트 테스트
__유연한 모카 테스트 프레임워크
__리액트용 자바스크립트 테스트 유틸리티
__실제 테스트 예제
__리액트 트리 스냅샷 테스트
__코드 커버리지 툴
__일반적인 테스트 솔루션
____상위 컴포넌트의 테스트
____페이지 객체 패턴
__리액트 개발자 툴
__리액트를 사용한 오류 처리
__요약

11장. 피해야 할 안티 패턴

__프로퍼티를 사용한 상태 초기화
__상태 변경
__인덱스를 키로 사용
__DOM 요소에 프로퍼티 전개
__요약

12장. 다음 단계

__리액트에 기여하기
__코드 배포
__npm 패키지 게시
__요약