[React] 🚨"props drilling" - 제가 props를 계속 전달 전달하고있는데요...

리액트로 유튜브 클론 코딩을 할때였다.

얼추 완성을 하고 프론트 퍼실님의 피드백을 받았다.

 

내가 맡은 부분은 short였다. 

 

이건 내가 구현한 화면을 캡쳐해서 들고온것이다.. (미완성이지만)

사진을 보면 알 수 있듯이 오른쪽에 뜨는 패널이 내용만 다를뿐 재사용되고있다.

그래서

화면의 재사용을 높이고자 컴포넌트 단위로 분리해서 코드를 짜고 있었다.

이렇게

 

short - video, panel

panel 안에 comment랑 explain 이렇게 구성했다.

 

그런데 문제점.. 의문점이 하나 발생했다.

유튜브 API를 불러오기 전에 임시 데이터를 만들어서 넣었긴 한데,

이걸 데이터 요청을 한번만 하기 위해서, (즉 데이터 한번만 불러오게 하려고)

 

Short 여기서부터

계속 props로 explain까지

전달전달전달...

하고 있는데 이게 맞는건가. 하는 생각이 들었다.

=> 바로 이 문제가 props drilling 이다.

Props Drilling 이란? Prop drilling 은 "스레딩 Props" 또는 "컴포넌트 체이닝"이라고도 하며, Props를 통해 부모 컴포넌트에서 중첩된 자식 컴포넌트로 데이터를 전달하는 프로세스를 말합니다. Prop drilling은 prop이 실제로 prop을 필요로 하는 깊게 중첩된 자식 컴포넌트에 도달하기 위해 여러 계층의 중첩된 컴포넌트를 통과해야 할 때 발생합니다. 계층 구조의 각 중간 컴포넌트는 prop 자체를 사용하지 않더라도 prop을 아래로 전달해야 합니다. 출처 : freecodecamp(https://www.freecodecamp.org/news/prop-drilling-in-react-explained-with-examples/)

이런 느낌이다.

댓글과 설명창에 데이터를 전달하기 위해 패널을 거쳐감..

그런데 props로 계속 값을 넘기다보니 관리하기도 힘들것 같고,

뭔가 중간에 에러가 날것도 같은거다.

코드가 더러워보이기도 하고.!

---

 

그러면 어떻게 해야할까. 어떻게 이 문제를 해결할 수 있을까.

퍼실님이 얘기해주신 해결책은 두가지였다.

1. children 을 사용해본다.

2. 상태관리 라이브러리를 사용한다.

이것때문에 상태관리 라이브러리를 사용하는 것이기도 한다.

아하! Redux를 사용하는 이유가 이거였구나.

---

그래서 코드를 children으로 리팩토링해보려 한다.

이야기가 길어질것 같으니 우선 Children에 대해 이해를 하고, 그 후에 코드 리팩토링 포스팅으로 돌아오겠다.

안녕👋