React 의 방식

내 할일 잘 하기·2023년 3월 2일
0

React

목록 보기
7/9

React 의 방식으로 사고해보자.

  1. 컴포넌트 나누기
  2. 데이터 가져오기
  3. 상태 관리하기
  4. 각각의 기능 구현하기
  5. 디자인 입히기

1. 목업으로 시작하기

  • 디자인 + 데이터 API를 받았다고 가정해보자.
  • 데이터 API 결과값의 구조를 제대로 확인해두자.

2. UI를 컴포넌트 계층 구조로 쪼개기

  • 디자인을 확인하면서 블럭별로, 기능별로, 컴포넌트 계층구조를 잘 설계해보자.
  • 재사용성을 고려하여 효율적인 코드를 설계해보자.

3. React로 정적인 버전을 제작하기

  • state를 사용하지 말고, 정적인 버전으로 페이지를 제작하자.

4. UI state에 대한 최소한의, 완전한 표현을 찾아내기

  • 최소한의 state를 이용하여, 최소 집합의 결과를 생각해내자.
    여기서의 핵심은 “중복배제”의 원칙이며 서비스 내에서 필요로하는 가장 최소한의 state를 찾아내고 이를 통해 나머지의 모든 것들은 필요에 따라 때에 맞춰 계산되도록 작성해라.
    어떤게 반드시 state가 되어야만 하는지를 고려해보자.
    ⇒ 1. 부모로부터 props로 전달되지 않는 것.
    ⇒ 2. 시간이 지나면 변하는 것
    ⇒ 3. 컴포넌트 내의 다른 state나 props로 계산할 수 없는 것
    ⇒ etc. 계속 생각해볼 것!!!
  • React에는 props와 state라는 두 가지 데이터 “모델”이 존재하며 이 둘의 차이을 분명히 이해해야한다.
    https://ko.reactjs.org/docs/faq-state.html#what-is-the-difference-between-state-and-props

5. State가 어디에 있어야 하는지 생각하기

  • 어떤 컴포넌트가 state를 변경하거나 소유할 지 생각해보자.
  • React는 항상 컴포넌트 계층구조를 따라 아래로 흘러가는 단방향 데이터 흐름을 가진다는 점을 기억하자.
  • 아래와 같은 방식으로 해당 사항을 고려해볼 수 있다.
  • 서비스가 가지는 각 state에 대해서...
  1. state를 기반으로 렌더링하는 모든 컴포넌트를 찾아보자.
  2. 공통 소유의 컴포넌트 (common owner component)를 찾아보자.
    ⇒ 계층 구조 내에 특정 state가 있어야 하는 모든 컴포넌들의 상위에 있는 하나의 컴포넌트
  3. 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야 한다.
  4. state를 소유할 적절한 컴포넌트를 찾아내지 못했다면, 상위 컴포넌트 (wrap)를 제작하여 해당 컴포넌트에 state를 소유시키자.

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

  • 계층 구조의 하단에 있는 컴포넌트에서 상위 컴포넌트의 state를 업데이트 할 수 있도록 하자.
  • React는 전통적인 양방향 데이터 바인딩과 비교했을 때는 더 많은 타이핑이 필요하지만, 데이터 흐름을 명시적으로 보이게 만들 프로그램이 어떻게 동작하는지 파악하기 쉬워진다.

7. 코드는 쓰는 일보다, 읽는 일이 더 많다는 점 인지하기

  • 모듈화를 통하거나, 명시적으로 코드를 작성하여 읽을 때 수월할 수 있도록 작성하자.
profile
함께 일하고싶은 개발자로 기억될래요

0개의 댓글