React는 사고방식이 다르다?

React에서는 UI를 컴포넌트 단위로 분리하여 구성한다. 그렇기 때문에 우리는 기존에 해왔던 자바스크립트 방식과는 조금 다른 사고방식이 필요하다.

React적 사고방식은 5가지 단계로 나뉘며, 이 흐름을 잘 따라가면 절반 이상은 성공했다고 봐도 된다. (내 뇌피셜...이자 경험담)

1. UI를 컴포넌트 계층으로 쪼개기

첫번째로 내가 만들고자 하는 UI를 어떤 컴포넌트들로 쪼갤건지 구상을 해야 한다.

이 UI는 사용자가 input에 검색어를 입력하면 해당하는 품목을 보여준다.

계층 구조를 살펴보면 다음과 같다.

1. 전체를 감싸는 FilterableProductTable 컴포넌트가 최상위에서 container 역할을 한다.
2. 사용자 입력을 받기 위한 SearchBar와 제품 목록을 출력하는 ProductTable로 나뉜다.
3. ProductTable 내부에서 중복되는 요소들을 컴포넌트로 만들어주면 카테고리를 보여주는 ProductCategoryRow와 각각의 품목을 보여주는 ProductRow로 나눌 수 있다.

컴포넌트 구조를 정리해보면 다음과 같다.

FilterableProductTable
├── SearchBar
├── ProductTable    
│  	├── ProductCategoryRow 
│  	└── ProductRow       

이렇게 본인이 만들고자 하는 UI를 컴포넌트 단위로 나누고 정리하는 것이 중요하다.

---

2. 정적인 버전 구현하기

대체로 정적인 버전을 먼저 구현하고 이후 동적인 요소들을 추가하는 것이 더 쉽기 때문에 정적인 버전을 먼저 만들어준다. 이때 props를 사용하여 데이터를 전달한다. (props는 부모가 자식에게 데이터를 넘겨주는 방법이다.)

정적인 버전을 구현할 땐 state를 사용하지 않는다. state는 동적인 데이터 관리에 사용하기 때문이다.

이 과정에서 단순히 JSX만 리턴하게 컴포넌트를 만들어준다.

---

3. 최소한의 데이터만 사용해서 UI State 표현

React는 state를 통해 데이터를 변경한다.
그러나 과도한 state 사용은 복잡성이 증가하여 문제가 생길 가능성이 높아진다.
따라서 중복 배제(Don't Repeat Yourself) 원칙에 따라 최소한의 state를 사용해야 한다.

state가 될 수 있는 기준은 다음과 같다.

1. 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.

2. 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.

3. 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 
   그렇다면 절대로 state가 아닙니다!

예를 들어, input값과 같이 시간에 따라 변화하고 다른 컴포넌트를 통해 유추할 수 없는 데이터가 state에 적합하다.

---

4. state의 위치 정하기

state로 정할 데이터를 정했다면 어떤 컴포넌트에 위치시킬지 정해야 한다.
React가 단방향 데이터 흐름을 따르기 때문에 state의 위치를 잘 정해야 한다.

부모에서 자식으로만 데이터가 전달되기 때문에 state를 잘못 두면 문제가 발생한다.
1. state를 하위 컴포넌트에 두면 상위에서 필요로 할 때 다시 올려야 함 -> 복잡성 증가
2. 유지보수를 위해 -> 상위 컴포넌트에서 props로 전달하면 재사용이 쉽고 유지보수가 쉽다.

기본적인 규칙:

1. 해당 state를 기반으로 하는 모든 컴포넌트 찾기
2. 컴포넌트들의 공통된 부모에 state를 위치시키기
3. 공통 부모가 없다면 state를 갖는 새로운 컴포넌트를 만들어 상위에 추가

이 단계에서 useState()를 사용해 state를 정의하고 필요한 하위 컴포넌트에 props로 전달하면 된다.

---

5. 역 데이터 흐름 추가하기

이제 state가 업데이트될 수 있도록 이벤트 핸들러를 추가해주면 된다. React에서는 주로 onChange, onClick 등을 사용해 state를 업데이트한다.

예시

<input 
  type="text" 
  value={searchTerm} 
  onChange={(e) => setSearchTerm(e.target.value)} 
/>

여기서 input을 사용할 때 value와 onChange를 쌍으로 기억해두면 된다.

🎊 리액트적 사고 5단계 마무리 🎊

---

결론

5개의 단계를 따라가면 React의 기본적인 사고방식을 이해할 수 있고 더욱 효율적으로 코드를 짤 수 있다.

또한, UI를 만들기 전에 어떤 데이터를 어떻게 가공하고 사용할 것인지 미리 생각을 해놓으면 더욱 수월하게 만들 수 있다!!

출처: React 공식 문서 - Thinking in React