PropsDrillingSol.md

Props Drilling?

• props를 다른 컴포넌트로 전달하기 위해서 여러가지 컴포넌트를 거치는 방식을 말한다.
• 부모 컴포넌트 → 중간 컴포넌트1 → 중간 컴포넌트 2→ … → 최종 컴포넌트
• 부모 컴포넌트에서 최종 컴포넌트로 props를 전달하기 위해 중간 컴포넌트들을 거친다.
• 이 depth가 깊어질 수록 상태를 추적하기 어려워지기 때문에 무조건 Prop Drilling으로 props들을 불필요한 컴포넌트들을 거치도록 하지 않고 별도의 상태관리가 꼭 필요하다.

해결책?

1. Context API
   • 리액트의 컴포넌트 트리 내에서 전역 상태를 공유할 수 있는 방법
   • 중간 컴포넌트에게 props를 넘기지 않고도 최종 컴포넌트에게 상태를 전달할 수 있다 (prop drilling 방지)
2. Redux
   • 중앙 집중식 Storage와 상태 업데이트를 위한 Reducer를 사용함
   • 단방향 데이터 흐름을 따라서 Reducer 등의 단위 테스트가 비교적 쉬움
   • Action, Reducer, Action Creator 등의 코드를 모두 작성해야 함.
3. Recoil
   • 비교적 최근에 나온 새로운 상태 관리 라이브러리
   • Facebook사에서 개발
   • 가장 React스러운 상태관리라는 철학을 갖고있음
4. MobX
   • Redux의 여러 점을 보완하여 나온 상태관리 라이브러리
   • Redux보다 조금 더 객체 지향적이며, Immutable.js 와 같은 불변성을 유지하기 위한 라이브러리를 굳이 사용할 필요가 없다는 특징

나는 이걸 써보고 싶다!

저는 Recoil을 사용해보고 싶습니다!

비교적 최근에 나온 라이브러리이기 때문에 가장 사용해보고 싶고, 또 초심자가 시작하게 적당한 점, 작은 프로젝트를 시작하는 데에 과도한 보일러 플레이트가 필요하지 않는다는 점에서 현재 저의 개발 실력과 동아리 협업 프로젝트라는 규모에 가장 적합한 툴이 아닐까 생각했습니다! 또 React와도 가장 어울리는 도구라는 점에서도 저희가 웹 개발을 리액트로 하는 만큼 상태관리는 Rocoil로 사용해보는 것도 좋을 것 같아요!

추가로 다른 Redux나 Context API같이 기존에 오랫동안 사용되었던 종류들은 그만큼 레퍼런스도 많고 혼자 공부할 수 있는 방법을 잘 찾아볼 수 있을 것 같지만, Recoil은 최근에 나와서 타 도구들에 비해 레퍼런스나 커뮤니티가 부족한 만큼 SOPT에서 다른 개발자 친구들과 함께 공부하고 실습해나가는 것이 큰 도움이 될 것 같다고 생각합니당.