[React]Frontend 설계 5단계

모든 개발자가 생각하는 고민일 것입니다. 필자는 Frontend 설계 방식을 매번 고민하고 시작하지만 계획한 설계 흐름과 다른 방식으로 개발을 진행하는 경우가 많습니다. 이번 기회에 React 에서 권장하는 설계 방식을 학습하고 정리해봤습니다.

React 에서 권장하는 설계 우선 접근법

React로 사고하기 - React

React로 사고하기 – React

React 공식 문서에 설명된 내용을 필자가 나중에 보기 위해 정리만 해둔 것입니다. 각 단계에 대한 자세한 내용과 예시는 위 공식문서에 잘 설명되어 있습니다.

1. UI Component 계층 구조 나누기

Front End 에서 Draw 되는 모든 부분의 Component 대해서 주변에 Box 를 그리고 이름을 정합니다.

But, 어떤 부분까지 Component 로 정하고 나눠야 되는가?

쉽게 생각해서 함수형 프로그래밍, 객체지향 프로그래밍 등 많은 분야에서 캡슐화, 모듈화를 위해 사용 되는단일 책임 원칙테크닉을 사용하는 것입니다. 하나의 Component 하나의 일만 수행합니다. 이 단계에서 필자는 Atomic Design 기법을 자주 적용합니다.

2. 정적인 버전 만들기

쉽게 생각해 1단계에서 설계한 계층적 데이터 모델을 가지고 사용자와의 상호작용이 없는 화면의 구조(UI)만 랜더링 합니다.

이때 React 는 props 만 사용하고 state 는 사용하지 않는 것을 권장합니다. 그 이유는 당연히 state는 상호작용을 위해서 사용 되기 때문입니다.

즉, 2단계에서는 모든 랜더링을 Stateful Component가 아닌 Client의 상태 정보를 기록하지 않는 Stateless Component 방식으로 계층구조의 정적 Component 를 Bottom Up or Top Down 흐름으로 설계합니다.

2단계에서 부모에서 자식에게 Data 를 전달하는 Props만 사용하는단방향 바인딩(데이터 흐름)방식 Component 를 설계한다면 Data Model 의 변경으로 UI가 어떻게 업데이트 되어야 하고 어디서 변경이 이루어져야 하는 것인지 알 수 있습니다.

3. 최소한의 UI State 집합 분류

사용자와 상호작용을 통해 지속적으로 데이터 모델이 변경이 필요한 부분이 있을 것입니다. React 에서 해당 내용을 State 로 관리할 수 있습니다. 이런 State가 되어야 하는 데이터의 최소 집합을 찾아야 할 것입니다.

여기서 필자는 State가 왜 최소가 되어야 하는지 궁금점이 생겼지만 Life Cycle 을 확인하여 금방 이해할 수 있었습니다. Life Cycle 의 Render 를 거치는 것 즉, Re-Rendering 가 이루어지는 작업은 "New Props", "setSate()", "forceUpdate()" 가 있습니다. 당연히 Component 의 State 의 남발(?)은 불필요한 Re-Render가 생길 것이고 Performance 입장에서 부담이 생길 것 입니다.

State 의 최소 집합을 분리하는 핵심 원칙은 DRY(중복배체) 원칙입니다. 앞서 말했듯이 State 의 중복으로 불필요한 Re-Render 를 줄여야 할 것입니다.

React 문서에서는 State 결정에 있어서 3가지의 질문지를 제시합니다.

• 부모로 부터 Props 로 전달됩니까?
• Life Cycle 에서 말했듯이 new Props는 render 과정을 거치게 됩니다. 이 경우 Props 로 전달되는 데이터에 대해서 동일한 State 를 선언하면 불필요한 re-render 를 발생시킬 것입니다.
• 시간이 지나도 변하지 않습니까?
• 사용자와 상호작용을 통해 변경되지 않는 값에 대해서 State 를 설정하는 것은 당연히 불필요한 작업일 것입니다.
• 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요?
• 이 역시 이미 계산 가능한 데이터에 대해서 State 를 설정함으로 불필요한 re-render 가 발생할 것입니다.

4. State가 어디 존재할지 결정

이 단계에서는 State 를 포함할 Stateful Component 를 결정합니다.

React 에서 이 단계 역시 단계를 제시합니다.

• 3단계에서 결정된 최소한의 State 를 기반으로 Rendering 되는 Component를 찾습니다.
• 해당 Component 들에 대해서 계층구조에서 공통된 부모 Component 를 찾습니다.
• 찾은 부모 Component 혹은 더 상위의 Component를 Stateful Component 로 설정합니다.
• State 를 소유할 공통 부모 Component 를 찾을 수 없다면 새로운 Stateful Component 를 상위 계층에 추가합니다.

5. 양방향 바인딩 추가하기

1-4 단계를 거치며 Props, state를 사용하여 단방향 바인딩 구조가 완성했을 겁니다.

하지만 사용자 상호작용을 통해 변경된 Component 의 정보를 부모가 알아야 되는 경우는 반드시 생길 수 있습니다. 5단계에서는 양방향 바인딩이 필요한 부분을 분리하고 우리가 알고 있는 Event, Callback 을 이용하여 양방향 바인딩을 추가합니다.