React의 Props Drilling과 상태관리

👾 Props Drilling이란?

 

출처: https://shishirarora3.medium.com/best-method-for-props-drilling-in-react-485605f26b5c

 

 Props Drilling은 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미한다.

 

👾 Props Drilling의 문제점

• 코드의 가독성이 나빠진다.

• 코드의 유지보수가 어렵게 된다.

• state 변경 시 props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생한다. → 웹 성능에 악영향을 줄 수 있다.

 

👾 Props Drilling을 방지하기 위한 방법

1. 컴포넌트와 관련 있는 state는 될 수 있으면 가까이 유지하는 방법

2. 상태관리 라이브러리를 사용하는 방법
  → 상태관리 라이브러리를 사용하게 되면 전역으로 관리하는 저장소에서 직접 state를 꺼내쓸 수 있기 때문에 Props Drilling을 방지하기에 매우 효과적이다.

 

 

👩🏻‍💻 example. Props Drilling 예시와 상태관리 라이브러리 Redux 활용 예시

 example 1-1. props drilling

props를 제일 깊은 컴포넌트까지 내려주기

 

⬇︎

 example 1-2. Redux를 활용해 props drilling을 개선

상태관리 라이브러리를 사용하여 props drilling 개선

 

 

 

 

 example 2-1. Props Drilling으로 인한 불필요한 리렌더링 예시

Child6에 있는 👋 버튼을 누르면 Child3에 느낌표가 하나씩 추가되는 간단한 애플리케이션

Child3, Child6이 하나의 상태를 공유하기 때문에 최상위 컴포넌트인 App에서 상태를 관리해야 하고, 이 때문에 상태를 변경할 때마다 App 컴포넌트가 리렌더링 되면서 모든 컴포넌트가 리렌더링 된다. 변경되는 상태와 연관이 없는 컴포넌트까지 불필요하게 리렌더링 되는 것이다. (Console을 통해 확인 가능)

 

⬇︎

 example 2-2. Redux의 리렌더링 최적화

위 예시 애플리케이션에서 Redux를 활용하여 전역 상태 관리를 할 수 있게 만들수 있다. 상태의 영향을 받아 화면을 변경해야 하는 컴포넌트만 리렌더링 된다. (Console을 통해 확인 가능)

 

 

 

---

출처: 코드스테이츠 SEB 수업자료

✏️ 공부하며 정리한 내용입니다. 잘못된 정보나 더 공유할 내용이 있으면 댓글로 알려주세요!

읽어주셔서 감사합니다 😊