230614) Props Drilling 이란?

Props란?

 

Props는 부모컴포넌트에서 자식컴포넌트로 값을 전달해 줄 때 사용된다

예를 들자면, 할아버지의 이름을 엄마에게 전달해 주기 위해서는 아래와 같은 코드가 작성된다.

 

function Grandpa() {
  const name = "할아버지";
  return <Mother fatherName={name} />;
}

function Mother(props) {
  return <div>나는 {props.fatherName}의 자식입니다 </div>;
}

여기서 Mother(props)에 있는 props는 p나 father mother f m 등으로 적어도 return 문과 동일하게 맞춰 준다면 잘 해석되긴 하지만, props는 props임을 보여 주는 것이 여러모로 좋으니 props로 통일해서 적는 것이 좋다!

 

 

Props Drilling이란?

 

Props Drilling이란 최상위에 위치한 부모 컴포넌트 내에 자식 컴포넌트가 여러개 존재하고, 최상위 컴포넌트로부터 여러개의 자식을 거쳐 자식 컴포넌트에 Props를 전달하는 현상을 뜻한다. 예시는 아래 코드와 같다.

 

function Grandpa() {
  const name = "할아버지";
  return <Mother fatherName={name} />;
}

function Mother(props) {
  return <Child grandpaName={props.fatherName} />;
}

function Child(props) {
  return <div>나는 {props.grandpaName}의 손자입니다</div>;
}

위 코드는 Grandpa의 name을 Child에게 전달해 주기 위해 Mother 컴포넌트는 그저 '전달'의 역할만 하고 있는 상황을 보여 준다.

 

위 코드처럼 최상위 부모요소로부터 최종적으로 원하는 자식 컴포넌트에게 값을 전달하기 위해 여러 자식 컴포넌트를 거치는 것을 Props Drilling이라고 칭한다. (드릴처럼 뚫고 들어가는 느낌이라서!)

 

하지만 이런 Props Drilling은 여러개가 생겼을 경우 오류가 발생하면 어디에서 오류가 났는지 찾기 어렵기에 유지보수가 어려운 것은 물론, 단순히 전달의 목적으로만 많게는 몇 십, 몇 백개의 함수가 낭비되며 사용될 수 있기 때문에 지양하여야 한다!

 

오늘도 잘 해냈다!