[React] 프롭스 드릴링(Props Drilling)

오늘 공부한 내용 중 정말 나를 미치게 만든 내용이 한가지 있었는데, 바로 프롭스 드릴링(Props Drilling) 이다.

프롭스 드릴링(Props Drilling)이란?
상위 컴포넌트가 하위 컴포넌트로 Props를 전달할 때 발생하는 구조적 문제를 말한다.

🥲 예시

function Son (props){ // ()에 인자를 받아서 사용한다.
  return <div>나는 {props.gfName}의 손자입니다!</div>
  // 나는 우리할아버지의 손자입니다!
}

function Mother (props){ // ()에 인자를 받아서 사용한다
  const gfName = {props.GrandfaName}; // "우리 할아버지" 전달 받아서 또 넘길 준비
  return <Son/>
}

function Grandfa (){
  const name = "우리 할아버지"
  return <Mother GrandfaName={name}/>
}

function App (){
  return <Grandfa/>
}

정말... 보면 끔찍하다.

App에서 리턴한 내용을 보면 Grandfa라는 함수를 호출하고 있고 Grandfa는 Mother를, Mothersms Son까지 가는 그런 상태이다.

하지만 여기서 더 끔찍한건 name = "우리 할아버지"을 Son 함수까지 올려 보내고 싶은 거다.
그 과정에서 Mother는 징검다리로써 변수를 받아 다시 전달 해주고 있다.

간단하게 방법에 대해 설명을 하자면 우선 Grandfa 함수 안에 name 변수에 "우리 할아버지"를 할당시킨다.
그리고 Mother를 부르는 리턴문에서 GrandfaName에 담아서 폭탄 던지듯 Mother에 던진다.

그럼 여기서 그대로 Son에게 전달 해 주는게 아니라 props라고 인자를 받아서(참고로 이 자리에는 아무런 이름이 들어와도 된다.) 가공을 한번 더 해 준다. 바로 이렇게... gfName = {props.GrandfaName};

그러면 아들에게 다시 던져준다. 이때도 전달 받는 Son 함수의 인장로 props를 통해 받는다.
여기서 props는 일종의 받는 용도로 쓰이는 문인가 보다.

이러한 형태를 바로 프롭스 드릴링(Props Drilling)이라고 하는데
여기는 물론 Mother만이 중간 다리 역활을 했지만 만약 중간 다리가 100개고 1000개면...?
생각만해도 너무 끔찍하다.

나중에 들은 이야긴데 이러한 문제를 방지하기 위해 Redux라는 걸 사용해서 좀 더 편하게 관리를 할 수 있다고 한다.

과연...! 우선은 아직 Redux를 사용하기 전이니 최대한 기초 지식과 다루는 법에 포커스를 두고 공부를 계속 해봐야겠다.