[React] 리액트에서 생각하기

리액트로 프론트 개발을 하다보면 백에서 하던 것과 조금은 다른 플로우로 코드를 짜게 된다. 리액트스러운 코드란 무엇일까 고민을 하다가, 리액트 공홈에 있는 "Thinking in React"라는 글을 정리해보고자 한다. 이 글에서는 리액트 코드를 짤 때의 바람직한 순서를 제시하고 있다. 

 

원문: https://react.dev/learn/thinking-in-react

Thinking in React – React

 

먼저 API에서 받아오는 JSON이 있고, 디자이너로부터 받은 설계도가 있다고 가정한다.

Step 1. UI를 컴포넌트 계층으로 분해한다.

디자인에 있는 각 컴포넌트와 하위 컴포넌트에 이름을 붙인다. JSON이 잘 구성되어 있다면, UI와 구성이 잘 매핑이 될 것이다. UI를 컴포넌트로 쪼개서, 각 구성요소가 데이터 모델의 한 부분과 매핑되도록한다. 원문에는 다음과 같은 예시 그림이 나온다.

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

이렇게 요소들에 이름을 붙이고 나면, 어떤 요소가 어디 밑으로 들어가야하는지 계층을 나눈다. 

 

 

Step2. 리액트에서 정적 버전을 만든다.

컴포넌트의 계층 구조가 결정되면, 상호작용(interactivity)이 없는 static 버전의 UI를 데이터 모델로부터 렌더링한다. 한 컴포넌트는 다른 컴포넌트를 사용하게 되고, prop을 사용해서 데이터를 넘겨주게 된다. 이렇게 만들어진 static 버전은 디스플레이만을 위한 것이며, 어떤 state 변수를 사용하지 않는다. 

 

 

Step3. UI state에 대해 최소한이지만 완전한 표현을 찾는다.

동적인 UI를 위해서 최소한으로 변경할 수 있는 state를 찾는다. State를 구성할 때 가장 중요한 원칙은 DRY (Don't Repeat Yourself)이다. 어떤 것이 state가 되고, 되지 말아야 하는가? 다음과 같은 질문을 통해 구별해볼 수 있다. 

• 시간이 지나도 변하지 않으면 X
• props를 통해 부모로부터 전달받으면 X
• 존재하는 state나 props를 통해 계산될 수 있으면 X

 

Step4. state가 있어야할 위치를 파악한다.

어떤 컴포넌트가 state를 바꾸고 소유할지를 정한다. 특정 state로 렌더링하는 모든 컴포넌트를 찾고, 가장 가까운 부모 컴포넌트를 찾고, 어디 위치해야하는지를 결정한다.

 

 

Step5. 역방향 데이터 흐름 추가

지금까지는 state와 props가 계층 구조를 따라서 넘어간다. 하지만 사용자의 입력에 따라서 state를 바꾸려면, 다른 방식으로 데이터가 넘어가는 것 또한 지원해야한다. 

 

 

 

 

•