상태관리와 Props Drilling

✅ 상태란?

: 리액트에서 상태란, 컴포넌트 내부에서 변할 수 있는 값이다.

: 이번 3주차 구현 과제를 예시로 들어보면, 카드 이미지를 오픈한 상태와 오픈하지 않은 상태로 구분할 수 있다.

import react, {useState} from 'react'

function Component () {
	const [isOpen, setOpen] = useState(false);
	
	return (
		{
			isOpen ? <div>오픈한 카드 이미지</div> : <div>오픈하지 않은 카드 이미지</div>
		}
	)
}

→ isOpen이(상태) true면 오픈한 카드 이미지가 화면에 나오고, false면 오픈하지 않은 카드 이미지가 나올 것이다.

이처럼 컴포넌트 내부에서 변할 수 있는 값이 State(상태)라고 할 수 있다.✅ 상태관리를 왜 해야할까?

: 리액트는 각 컴포넌트 간의 직접적인 데이터 전달이 어렵기때문에, 데이터를 부모 컴포넌트에 보내고 다시 해당 상태 데이터를 필요한 컴포넌트로 전달해야 한다. props 전달이 3~5개 정도 컴포넌트라면 문제가 되지 않지만, props 전달이 10개 그 이상의 과정을 거치게 된다면 코드를 읽을때 해당 props를 추적하기 힘들어질 것이다.

💬 즉, Props Drilling이 많아질 경우 Prop의 출처를 찾기 어렵다. 그렇다면 Props Drilling은 무엇일까?

💡 Props Drilling

: React 애플리케이션에서 데이터를 전달하기 위해 필요한 과정을 설명하는 용어

: props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트를 거치면서 컴포넌트 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정

: 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해, 중간 컴포넌트를 거쳐 프로퍼티를 내려주는 것을 의미한다. 이러한 중간 컴포넌트는 원하는 자식 컴포넌트에게 프로퍼티를 전달하기 위해 필요하지만, 해당 값을 직접 사용하지 않는 경우에도 프로퍼티를 받고 전달해야 한다.

• 장점

  1. 명시적인 값의 사용

     어디서 데이터가 사용되는지 명확하게 보여 준다. 이를 통해 코드의 의도를 더 명확하게 파악할 수 있다.

  2. 값 추적 용이성

     값의 흐름을 쉽게 추적할 수 있다. 추적 경로를 통해 버그를 디버깅하거나 코드를 변경할 때 편리하다.

  3. 코드 변경 파악 용이성

     코드 변경이 애플리케이션의 다른 부분에 어떤 영향을 주는지 파악하는데 용이하다. 이러한 명확한 데이터의 흐름 파악은 변경 사항에 따른 영향을 사전에 예측하고 관리할 수 있게한다.

• 단점

  1. 프로퍼티 데이터 형식 변경의 불편함

     Props Drilling 데이터의 데이터 형식을 변경해야 하는 경우, 컴포넌트 계층 전체에서 업데이트 하는 것이 어려울 수 있다.

  2. 중간 컴포넌트에 불필요한 프로퍼티 전달

     컴포넌트 분리 과정에서 중간 컴포넌트를 통해 불필요한 프로퍼티가 전달될 수 있어 복잡성을 초래할 수 있다.

  3. 누락된 프로퍼티 인지의 어려움

     필요한 프로퍼티가 타겟 컴포넌트에 전달되지 않은 상황을 인지하기 어려울 수 있어 잠재적인 문제를 발견하기 어려울 수 있다.

  4. 프로퍼티 이름 변경 추적의 어려움

     프로퍼티 이름이 계층에서 변경되면 해당 값을 추적하고 업데이트 하는 것이 어려워질 수 있다.

💬 Props 전달이 많은 과정을 거치면 복잡해지고 그 복잡성이 많은 단점을 야기한다. 단순히 생각한다면 상태관리는 이러한 복잡성을 방지하기 위해서 필요할 것이다.

📌 상태관리가 필요한 이유

1️⃣ 복잡한 시스템을 다루는 경우 필수적이다. 상태 관리 없이 진행된다면, 사용자가 애플리케이션 내에서 수행하는 작업의 상태를 추적하는 것이 매우 어려워진다.

2️⃣ 프로그램이 어떻게 구동 되는지 예측 가능하고, 코드를 추후에 유지 보수에 유리하다. (문제 발생시, 빠른 원인 파악 가능)

3️⃣ 여러 컴포넌트 간의 데이터 공유를 용이하게 한다. 즉 중복 코드를 방지하고 코드의 재사용성을 증가시킨다.

4️⃣ 필요한 상태에만 업데이트를 진행해 불필요한 렌더링, 네트워크 요청을 최소화한다.

💬 Props Drilling의 단점과 상태관리의 필요성을 연관 지어보면, Props Drilling을 해결하는 것이 상태관리를 하는 방법중 하나이지 않을까?

✅ Props Drilling 해결방법

1. 전역 상태관리 라이브러리 사용

   : redux, Mobx, recoil 등을 사용하여 해당 값이 필요한 컴포넌트에서 직접 불러 사용할 수 있다.일련의 불필요한 전달을 해소한 방법이라고 할 수 있다.

2. 적극적인 Children 사용

   💡 Children

   : 공식문서) 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있다. 범용적인 ‘박스’역할을 하는 sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있다. → 태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 Props

   • props.children의 필요성

     : 주로 자식 컴포넌트 또는 html 엘리먼트가 어떻게 구성되어있는지 확정할 수 없지만, 화면에 표시해야 하는 경우 사용한다.

   : 하나의 컴포넌트에서 값을 관리하고, 그 값을 하위요소로 전달할 때 코드의 추적이 어려워지지 않게 된다.(children을 활용하여 props 전달을 깔끔하게 해낼 수 있다.)

3. React context

   : React에 내장된 전역 상태관리 도구로써, 별도의 라이브러리 설치 없이 사용가능하며, props 전달없이 특정 상태 값을 공유할 수 있다.

4. 렌더링 될 컴포넌트를 불필요하게 여러 컴포넌트로 나누지 않는다.

   : React는 단 하나의 컴포넌트에 application 전체를 작성하더라도 기술적인 제약이 없으므로, 불필요한 컴포넌트 쪼개기를 할 필요가 없다. 컴포넌트를 재사용해야할 상황을 기다렸다 분할해도 괜찮으며, 불필요한 props drilling을 방지할 수 있다.