Props, props drilling이란? ( + key props)

---

Props

properties의 줄임말로 리액트 컴포넌트간에 데이터를 전달하고 통신하는데 사용되는 개념이다.

 

부모컴포넌트가 자식 컴포넌트에게 데이터나 설정값을 전달할 때 사용되며, 컴포넌트의 속성(특성)을 나타내는 데이터이다.

 

props를 통해 컴포넌트의 동작을 다르게 조정하거나 동적인 데이터를 렌더링하는 데 사용된다. 

 

 

props 특징

• 읽기전용 : 자식 컴포넌트는 부모로부터 받은 props를 변경할 수 없다. 읽기전용으로 사용한다.
• 전달방식 : 부모컴포넌트에서 자식컴포넌트로 데이터를 전달할 때 사용된다.
• 동적 데이터: props를 사용하여 동적으로 데이터를 렌더링하거나 컴포넌트의 동작을 제어할 수 있다.
• 재렌더링 트리거 : props가 변경되면 해당컴포넌트가 리렌더링된다. 부모로부터 받은 props가 변경되면 자동으로 해당 컴포넌트의 업데이트가 발생한다. 

 

 

Props drilling 

props를 하위 컴포넌트로 계속해서 중첩되게 전달하는 것을 의미한다.

 

이로인해 컴포넌트 구조가 복잡해지고 코드 유지보수가 어려워지기도 한다. 

 

props drilling이 나타나는 상황

• 깊은 중첩구조 : 여러개의 컴포넌트에 걸쳐 하위 컴포넌트로 props를 계속해서 전달하는 경우
• 중간컴포넌트에서 데이터전달 : 상위 컴포넌트와 하위 컴포넌트 사이에 중간 컴포넌트가 있을경우, 중간을 거쳐서 props를 전달해야하는 경우가 생긴다.
• 불필요한 props 전달 : 위와같이 중간컴포넌트에서 props를 사용하지 않는 경우들이 생긴다.

 

props drilling 해결방법

• ContextAPI 사용 : contextAPI를 사용하여 전역적으로 상태를 관리하고 컴포넌트간에 데이터를 전달한다. 이를 통해 중간 컴포넌트를 거치지 않고 필요한 컴포넌트로 데이터를 전달할 수 있다.
• Redux, Recoil사용 : Redux나 Recoil등 상태관리 라이브러리를 사용하여 애플리케이션 전체의 상태를 중앙에서 관리한다.
• 커스텀 훅 사용 : 중복코드를 최소화하고 데이터를 전달하는 등 유용한 커스텀 훅을 사용하여 문제를 완화한다.

 

 

key props

key props는 리액트에서 컴포넌트 리스트를 렌더링할때 각 항목을 고유하게 식벽하기 위해 사용되는 속성이다. 

 

컴포넌트 리스트를 렌더링할 때 각 요소에 대한 고유한 'key'값을 제공함으로써 리액트가 리스트 항목의 변경을 효율적으로 추적하고 업데이트하는데 도움을 준다. 

 

key props 예시

function ListItem({ item }) {
  return <li key={item.id}>{item.name}</li>;
}

function List({ items }) {
  return <ul>{items.map(item => <ListItem key={item.id} item={item} />)}</ul>;
}

 

props로 받은 'items'를 ListItem에 'key' 값을 설정하여 랜더링한다. 

 

그렇다면 각 항목을 고유하게 식별되어 리스트항목이 추가되거나 변경될때 리액트가 적절하게 처리할 수 있게 된다.

 

key props 사용이유

• 성능최적화 : 'key'를 사용하여 각 항목을 식별함으로 리액트가 변경된 항목만 재 렌더링하고 업데이트 할 수 있다. 불필요한 렌더링을 방지하고 성능을 최적화한다. 
• 컴포넌트 추적: 'key'를 제공하면 리액트가 각 컴포넌트 인스턴스를 추적할 수 있다. 이로인해 각 컴포넌트 상태와 라이프사이클을 제대로 관리할 수있다.
• 리스트 재정렬시 문제방지 : 'key'를 제공하지 않으면 리스트 항목의 순서가 변경되거나 추가되었을때 문제가 발생할 수 있다. 'key'를 사용하면 리액트가 고유식별자로 인식하여 재정렬시에도 정확한 업데이트를 수행한다.