React로 사고하기

리액트 공식문서 - React로 사고하기를 읽고 정리한 글입니다.

단일 책임 원칙

single responsibility principle

하나의 컴포넌트는 한가지 일을 하는게 이상적이라는 원칙

• 1 컴포넌트 1 일
• 1 함수 1 일
• 1 파일 1 일
• 코드가 150줄이 넘어간다면 분명히 줄일 수 있다. 하위 컴포넌트로 분리하자.

정적 UI를 만든 후 컴포넌트 계층 구조로 나누기

• top-down
• bottom-up

State 추가하기

state 추가의 핵심은 중복배제원칙

• 애플리케이션이 필요로 하는 가장 최소한의 state를 찾고 이를 통해 나머지 모든 것들이 필요에 따라 그때그떄 계산되도록 만드세요.
• 예를 들어 TODO 리스트를 만든다고 하면, TODO 아이템을 저장하는 배열만 유지하고 TODO 아이템의 개수를 표현하는 state를 별도로 만들지 마세요.

어떤 컴포넌트가 state를 소유하고 변경할지, state의 위치 정해주기

역방향 데이터 흐름 추가하기

• 예를들어 우리는 사용자가 폼을 변경할 떄마다 사용자의 입력을 반영할 수 있도록 state를 업데이트하기를 원합니다. 컴포넌트에 콜백을 넘겨서 state가 업데이트 되어야 할 때마다 호출되도록 할 것입니다.

React 사고방식

코드를 쓸 일보다 읽을 일이 더 많다는 사실을 기억하세요. 모듈화되고 명시적인 코드는 읽을 때 덜 어렵습니다. 컴포넌트를 적절히 만들면 코드 재사용성을 통해 코드 라인이 줄어들기 시작할 것입니다 :)