개발자

props drilling 어떻게 대처하시나요?

2023년 02월 07일조회 554

변수나 함수를 props로 넘기다 보니 detail 페이지 안에 component들 안으로 넘어가 props.drilling이 생기는데 context api로 하려고 생각중이긴 하지만 이것 또한 불편한점이 조금 있더라구요. 실무에서는 어떻게 하나 궁금합니다

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 3

인기 답변

Gorilla.Kim님의 프로필 사진

질문주신 내용과 댓글을 확인해 보니 부모의 상태와 연관있는 함수 가령 setState 같은 함수를 프롭스로 전달하고 있는것으로 보여집니다 : ) 이러한 함수를 전달해야하는 깊이가 2뎁스 이상이 될때에는 전역함수로 관리를 하는 편입니다. 보통 위와 같은 경우에 페이지 단위로 전역 스토어를 생성해 관리하거나 특정 컨테이너를 위한 컨텍스트를 생성해 데이터를 관리하는 방법이 있습니다. (제일 좋은건 해당상황을 만들지 않는것이에요, 대부분 위와같은 상황을 자세히 살펴보면 로직적인 수정으로 해결이 가능할때가 많습니다.) 전역 상태 관리를 할때는 전역상태관리 라이브러리 사용을 추천드리는데요, 일부 zustand나 jotai와 같은 전역상태 라이브러리들은 기본적으로 상태 갱신에 따른 re-rendering 문제를 줄여주기 때문입니다. [https://jotai.org/docs/advanced-recipes/large-objects] "대용량 오브젝트나 array 형태의 state에 대해 변경사항이 생겼을 때, 일반적으로 해당 state를 사용하는 모든 컴퍼넌트에 대해서 리렌더링이 발생하는데 그런 문제점을 optics라는 외부 라이브러리를 integration 해서 해결했다." 저는 요즘에는 zustand주로 와 react-query를 사용하고 있습니다 : ) Zustand는 리액트에 의존적이지 않아 데이터가 앱 외부에 저장이 이루어져 여러모로 편리한 도구입니다. 기본적으로 사용을 위한 코드가 짧기 때문에 애용중이에요 ㅎㅎ (하나의 스토어를 사용하기위해 리덕스는 최소2개 이상의 파일을 생성 및 관리해야해요 ㅠㅠ) 만약, 상태변경 함수를 전달하는게 아니라면 부모에서 내려주는 함수에 외부에서 주입되는 지역상태값등의 의존성 값들을 제거해주세요. 프롭스로 받는등 적절히 수정하셔서 별도의 유틸함수로 분리하시면 될것 같습니다. 이후에 분리된 함수를 자식 컴포넌트에서 활용하시면 될것 같아요 : )

profile picture

익명

작성자

2023년 02월 08일

감사합니다. 이해됐습니다!

인기 답변

손정현님의 프로필 사진

안녕하세요~ props drilling을 해결하는 방법은 여러가지인데요. 그중 가장 많이 쓰는건 상태 관리 라이브러리로 상태 값들을 관리하고 라이브러리에서 제공하는 훅을 사용하는 것 같습니다. 다른 방법으로는 컴포넌트를 합성하는 방법도 있는 것 같아요. 참고하시면 좋을것 같은 링크 첨부할게요 :) - https://velog.io/@jangws/React-Context%EA%B0%80-%EA%BC%AD-%ED%95%84%EC%9A%94%ED%95%A0%EA%B9%8C-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%95%A9%EC%84%B1%EC%9C%BC%EB%A1%9C-props-drilling%EC%9D%84-%EA%B7%B9%EB%B3%B5%ED%95%B4%EB%B3%B4%EC%9E%90 - https://fe-developers.kakaoent.com/2021/211022-react-children-tip/

profile picture

익명

작성자

2023년 02월 08일

자식 컴포넌트에서 어떠한 액션이 일어났을 때 최상위 부모의 state가 변해야할 때 최상위 부모 컴포넌트에서 함수를 만들고 자식한테 내려주고있는데 이럴 때에는 어떻게해야할까요? 상태관리 라이브러리에서 함수도 받을 수 있나요? 부모의 state를 상태관리로 빼기에는 다른컴포넌트에서는 안쓰이는 것이라서 빼면 관리 측면이 더 넓어지는것 같아서요.

손정현님의 프로필 사진

손정현

coya2023년 02월 08일

아하, 상위 컴포넌트의 상태 (useState)를 바꿔주는 핸들러 함수를 하위 컴포넌트로 내려주고 있는 형태라고 이해했는데 맞나요? 컴포넌트 합성으로 해결 안 될 만큼 깊은 구조로 짜여있다면 상위 컴포넌트에서 선언한 함수만 props drilling을 피할 수 있는지는 잘 모르겠네요. 부모의 state이 다른 컴포넌트에서 안쓰인다면 context api와 잘 맞을 것 같긴합니다. context는 프로바이더가 래핑된 하위 컴포넌트들만 쓸수 있어서 상태와 함수를 사용할 컴포넌트들 중 최상위 컴포넌트에 프로바이더를 적용시키시면 다른 컴포넌트가 context에 접근이 불가능한 것으로 알고 있어요. 라이브러리에서 함수도 받을 수 있고 보통 내부적으로 쉽게 사용할 수 있는 훅이 구현되어 있습니다. 예시로 코드샌드박스 몇 개 만들어봤습니다. - 리듀서와 컨텍스트 API: https://codesandbox.io/s/quirky-danny-xtzup2?file=/src/App.js - recoil: https://codesandbox.io/s/vibrant-buck-l39twu?file=/src/App.js

정규상님의 프로필 사진

redux recoil jotai 등 전역상태관리를 사용해보세용

profile picture

익명

작성자

2023년 02월 08일

함수를 props로 넘길때는 어떻게해야할까요? 보통 함수는 안넘기나요?

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!