리액트로 작업하기

리액트에서는 컴포넌트 단위로 UI를 조각내고 서로 데이터가 흐르도록 결합하는 방식으로 웹 애플리케이션을 만든다.

1단계: UI를 컴포넌트 계층 구조로 나누기

### 컴포넌트 계층 구조 예시 ###

FilterableProductTable
  SearchBar
  ProductTable
    ProductCategoryRow
    ProductRow

props를 통해 데이터를 단방향으로 전달받는 컴포넌트를 만든다.

비교적 작은 프로젝트에서는 top down 방식으로 컴포넌트 계층의 상위에서 내려가면서 만드는 것이 유리하고, 상대적으로 복잡하고 규모가 큰 프로젝트일수록 bottom up 방식으로 하위 컴포넌트에서 올라가면서 만드는 것이 유리하다.

상태는 기본 데이터 모델을 변경하여 사용자와 상호작용할 수 있는 UI를 만들기 위해 필요하다.

DRY(Don't Repeat Yourself) 원칙 - 상태를 구조화할 때 가장 중요한 원칙은 중복을 제거하는 것이다. 같은 데이터를 중복해서 여러 개의 상태로 나눠 관리하면 데이터를 업데이트할 때마다 일관성을 유지하기 어려워진다.

DRY 원칙을 염두에 두면서 컴포넌트에서 사용하는 데이터를 나열한 뒤 각 기준을 적용해본다.

UI에서 담당할 최소 상태를 결정하고 나면, 상태를 소유하고 변경을 담당하는 컴포넌트를 식별해야 한다. 기본적으로 리액트는 부모에서 자식 컴포넌트로 계층 구조를 따라 데이터를 전달하며, 이를 단방향 데이터 흐름이라고 한다.

애플리케이션에서 사용하는 각각의 상태를 기반으로 렌더링하는 컴포넌트를 식별한다.
계층 구조에서 가장 가까운 공통 컴포넌트를 찾는다.
상태를 어떤 컴포넌트에 배치할지 결정한다.
1. 상태를 공통 부모 컴포넌트에 배치하는 경우가 종종 있다.
2. 공통 부모 위에 있는 컴포넌트에 배치하는 경우도 있다.
3. 적절한 컴포넌트를 찾을 수 없는 경우, 상태를 보유하기 위한 컴포넌트만 새로 만들어 일반적인 부모 컴포넌트 위의 계층 구조 어딘가에 추가하는 기법도 있다.

기본적으로 리액트 애플리케이션의 데이터는 부모에서 자식 컴포넌트로 흐르지만, 사용자 입력에 따라 상태를 변경하려면, 계층 구조 깊은 곳의 이벤트에 따라 상태가 변경되도록 흐름을 역전시켜야 한다.

보통 상태 변경을 담당하는 컴포넌트에서 이벤트 핸들러를 정의하고, 이벤트 핸들러를 자식 컴포넌트로 전달하는 방식으로 데이터 흐름을 역전시킨다.

Last updated 2 years ago