상황 설명

레이아웃에서 전체보기를 클릭하면 필터링된 제품만 나오도록 하기위해 모든 제품이 있는 AllProduct를 만들고 거기에 state값으로 데이터를 보내고 필터링처리를 하기로 했으나 AllProduct에서는 필터링처리가 정상적으로 이루어지지 않았고 state의 값을 확인하기 위해 console을 찍은 결과 undefined로 데이터 전달이 정상적으로 주어지지 않았음,

원인

Link to를 이용해 데이터를 전달했을 때 state에 ts타입 오류가 발생한것으로 보아 ts 형식에 맞지 않아 오류가 생긴것으로 추정했고 해결법으로 1. props를 직접통해 전달, 2. contextApi 를 통해 상태 를 전역관리하는 방법 중에 2번을 택함.

이유

우선 각 방법의 장단점을 나눠보았다.

• Props 장점
• 명시적 데이터 흐름: 데이터가 어느 컴포넌트에서 어디로 전달되는지 명확합니다.
• 성능 최적화: 필요한 컴포넌트에만 데이터를 전달하므로 불필요한 리렌더링을 피할 수 있습니다.
• 디버깅 용이: 데이터의 흐름이 명시적이므로 상태 변경 추적이 더 쉽습니다.
• Props 단점
• Props drilling: 깊이 중첩된 컴포넌트 트리에서는 많은 수준을 거쳐 데이터를 전달해야 하므로 코드가 지저분해질 수 있습니다.
• 유연성 부족: 전역적으로 공유해야 하는 상태를 일일이 전달하기 번거롭습니다.