React로 생각하기

React로 생각하기(Thinking in React)

React를 처음 배울 때 가장 궁금한 게 "그럼 이 UI를 어떻게 설계해서 만들지?"일 거예요. React 문서는 UI를 만들 때 쓰는 일관된 사고 흐름을 안내해 줘요. 이 흐름을 익히면 컴포넌트를 나누고, 상태(state)를 어디에 둘지, 데이터가 어느 방향으로 흘러야 할지를 자연스럽게 정할 수 있어요. 핵심 단계를 살펴볼게요.

출처: https://react.dev/learn/thinking-in-react

상태는 최소한으로, 나머지는 계산으로

상태를 설계할 때는 앱이 정말 필요로 하는 최소한의 상태만 두고, 나머지는 필요할 때 계산하라는 원칙이 핵심이에요. 예를 들어 쇼핑 목록을 만든다면 항목 자체는 배열로 상태에 저장해요. 그런데 목록의 항목 개수도 같이 보여주고 싶다고 해서 그 개수를 또 다른 상태 값으로 저장하지 말아요. 배열의 length를 읽으면 되거든요.

Props vs State

  • State는 컴포넌트의 "기억"과 같아요. 컴포넌트가 어떤 정보를 추적하고, 상호작용에 따라 그 정보를 바꿀 수 있게 해요. 예를 들어 Button 컴포넌트가 isHovered 상태를 추적할 수 있어요.
  • Props는 부모가 자식에게 내려주는 값이고요.

상태가 어디에 살아야 하는지 찾기

상태를 넣을 위치를 정하는 절차는 이래요.

  1. 그 상태를 기반으로 무언가를 렌더링하는 모든 컴포넌트를 찾아요.
  2. 그들의 가장 가까운 공통 부모 컴포넌트를 찾아요 — 계층에서 그 모두 위에 있는 컴포넌트예요.
  3. 상태가 어디에 살지 결정해요. 어느 컴포넌트에도 상태를 두기 어색하다면, 상태만 담당하는 새 컴포넌트를 만들어 공통 부모 위 계층 어딘가에 추가해요.

예를 들어 검색 텍스트와 체크박스 값을 상태로 쓰는 컴포넌트들이 있다면, 그 둘의 공통 부모인 FilterableProductTable에 상태를 두는 식이에요.

function FilterableProductTable({ products }) {
  const [filterText, setFilterText] = useState('');
  const [inStockOnly, setInStockOnly] = useState(false);

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

사용자 입력에 따라 상태를 바꾸려면 데이터가 반대 방향으로도 흘러야 해요. 계층 아래쪽에 있는 폼 컴포넌트가 위쪽 FilterableProductTable의 상태를 갱신해야 하죠. 상태는 FilterableProductTable이 소유하므로 오직 그 컴포넌트만 setFilterText와 setInStockOnly를 호출할 수 있어요. 그래서 이 함수들을 SearchBar에 prop으로 내려줘야 해요. 이렇게 하면 사용자가 입력을 바꿀 때마다 상태가 그 변경을 반영하게 돼요.

더 알아보기