[React18] 1. React로 UI를 구현하는 법

 

React로 UI를 구현하기 위해서 일반적으로 5가지 단계를 거칩니다.

Step 1: UI를 컴포넌트 계층으로 나누기

가장 먼저 해야 하는 건 컴포넌트를 나누는 것입니다. (여기서 컴포넌트란 재사용이 가능한 독립된 모듈을 의미합니다.) 컴포넌트를 나눌 때는 여러 가지 방법이 있습니다. 이미 디자이너가 만든 작업을 참고하는 방법, 프로그래밍적으로 단일 책임, 즉 한 가지 일만 수행할 수 있을 만큼 분해하는 방법, CSS적으로 class 선택자 무엇을 만들지 결정해 그와 맞게 컴포넌트를 만드는 방법이 있습니다.

명확한 정답은 없습니다. 당장 해당 페이지에 맞는 컴포넌트일지라도 기획이 변경된다면 다른 컴포넌트로 분리해야 하는 경우도 있습니다. 중요한 것은 기획자, 디자이너, 퍼블리셔 등 함께 일하는 동료들끼리 해당 컴포넌트의 이름을 명확하게 정해야 합니다. 각자 다른 이름으로 컴포넌트를 다르게 이해한다면 커뮤니케이션한 때 소통에 오류가 발생할 수 있습니다.  
 
모두 컴포넌트로 식별했다면 컴포넌트들을 계층 구조로 정렬할 수 있습니다. 계층구조를 보면서 페이지 구조가 바로 보인다면 개발에 들어가셔도 됩니다. 그렇지 않다면 계층구조를 한 번 유심히 보면서 컴포넌트가 제대로 식별됐는지 다시 검토해 보면 좋습니다. 

Step 2: React로 정적인 UI 만들기

컴포넌트 계층 구조가 완성되었으니 앱을 구현할 차례입니다. 먼저 정적으로 만든 다음 상호작용을 추가하는 방향이 좀 더 쉽습니다. 데이터 모델을 렌더링 하는 앱의 정적인 버전을 만들기 위해 다른 컴포넌트를 재사용하고 props를 이용하여 데이터를 넘겨주는 컴포넌트를 구현할 수 있습니다. props는 부모가 자식에게 데이터를 전달하는 방식입니다. 데이터는 상위 컴포넌트에서 하위 컴포넌트로 흘려가기 때문에 단방향 데이터 흐름이라고도 합니다. (정적인 버전을 만드는 데는 state는 오직 상호작용을 위해 사용하기 때문에 state를 쓰지 않는 게 좋습니다.)

앱을 만들 때 계층 구조에 따라 상층부에 있는 컴포넌트부터 하향식(top-down)으로 만들거나 혹은 하층부에 있는 컴포넌트부터 상향식(bottom-up)으로 만들 수 있습니다. 프로젝트가 커지면 상향식으로 만들고 작성하면서 개발하기가 더 쉽습니다. (하층부에서 컴포넌트를 만들고 테스트하고 문제없다면 그 위에 컴포넌트를 만들고 테스트할 때 하층부에 있는 컴포넌트들도 함께 테스트할 수 있습니다.)
 

Step 3: 최소한의 데이터만 이용해서 UI State 표현하기

UI를 상호작용하게 만들려면 사용자가 기반 데이터 모델을 변경할 수 있어야 합니다. React는 state를 통해 데이터 모델을 변경할 수 있게 합니다. state는 앱이 기억해야 하는, 변경할 수 있는  데이터 집합입니다. 정말 최소한만 만들어야 하고 그 외에는 필요할 때 계산할 수 있게 해야 합니다. 예를 들어 쇼핑 목록을 작성하는 경우 항목을 state 배열로 저장하고 항목의 개수를 state로 저장하기보다는 배열의 길이를 읽는 방식으로 하는 것이 좋습니다.
 
** state는 기본적으로 값이 변화하고, 부모로부터 props를 통해 전달되지 않으며, 기존의 state 또는 props로 계산할 수 없습니다.
 
** props vs state : props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 넘겨서 외관을 커스터마이징 하게 해 주고, state는 컴포넌트의 메모리 같은 성격으로 변화하면서 상호작용을 만들어 냅니다. 보통 state는 부모 컴포넌트에 저장하고 해당 값을 자식 컴포넌트에 props로서 전달하곤 합니다.

Step 4: State가 어디에 있어야 할지 정하기

최소한으로 필요한 state 데이터를 결정한 후에는 어떤 컴포넌트를 이 state를 소유하고 변경할 책임을 지게 할지 정해야 합니다. 먼저 해당 state를 기반으로 렌더링 하는 모든 컴포넌트를 찾고, 그들의 가장 가까운 공통되는 부모 컴포넌트를 찾고, 공통 부모 (그보다 더 상위의 컴포넌트)에 state를 둘 수 있습니다. 만약 적절한 컴포넌트를 찾지 못했다면 state를 소유하는 새 컴포넌트를 만들 수 있습니다. 
 
컴포넌트를 결정했다면 해당 컴포넌트에 useState() 훅으로 컴포넌트에 state를 추가합니다.
 
 

Step 5: 역 데이터 흐름 추가하기

props와 state로 단방향으로 데이터가 아래로 흐르면서 올바르게 렌더링 됩니다. 하지만 사용자 입력에 따라 state를 변경하려면 역방향으로도 데이터가 흐를 수 있게 해야 합니다. 부모 컴포넌트는 데이터를 변경하는 함수를 props를 통해 데이터 변경이 일어나는 하위 컴포넌트로 전달합니다. 그렇게 되면 변경이 될 때마다 변경하는 함수가 호출되면서 부모에 있는 state는 업데이트됩니다.
 
React로 컴포넌트와 애플리케이션을 구축하는 방법에 대해 간략하게 설명했습니다. 물론 완벽하게 구축하려면 필요한 부분이 좀 더 있지만 구축할 때 대략적인 방법을 아는 것과 모르는 것에는 차이가 있습니다. 해당 방법에 익숙하게 된다면 기획/디자인을 보면서 UI 구현 작업을 할 수 있을 겁니다. 
 

 

---

 

** React18 공식 문서 보고 정리한 내용입니다.
https://ko-react-exy5xcwjj-fbopensource.vercel.app/learn/thinking-in-react

React로 사고하기 – React