JBEE.io
JBEE.io copied to clipboard
JaeYeopHan
react/[react]-3.-react-architecture/
[React] 3. React Architecture | JBEE.io
React에서 널리 사용되는 Pattern(?)이라고 하면 Dan의 Presentational and Container Components이 아닐까 생각된다. 16.8.x에서 도입된 hooks API로 과연 이 구조가 의미가 있는 구조일까, 맞는 구조일까 다시 생각해보면서 구조를 잡아보았다.👉 고민 1. Function vs Class우선 모든 컴포넌트를 함수(Function)로 작성했다. 함수로 작성되는 컴포넌트는 dumb component라고 해서 props…
https://jbee.io/react/[react]-3.-react-architecture/
재엽님 글 잘 봤습니다 😃 초기 애플리케이션 설계 단계에서 고민될만한 부분들을 너무 잘 정리해주셨네여 👍
합성(composition)의 아쉬운 점
Vue에도 합성을 위한 문법인 slot이 있다. Vue는 이 합성에 대한 부분이 더 고려가 되어 named slot이 있다. 합성을 할 때, 넘겨지는 값에 name을 추가하여 보다 확장성 있게 component를 합성할 수 있다.
React에서는 props.children으로 넘겨지기 때문에 한 번에 두 개의 컴포넌트를 합성 후, 레이아웃을 다르게 진행하고 싶을 때, 난감하다. 이럴 경우 어쩔 수 없이 두 개의 컴포넌트 중 children과 성격이 더 잘 맞는 녀석을 children으로 넘기고 나머지는 props로 넘겨주어야 한다.
이 경우엔 render props를 활용해 컴포넌트를 작성하면 어떨까요?
컴포지션해야하는 컴포넌트가 많은 경우,
renderFoo, renderBar... 와 같이 여러 render prop을 정의하고 각각의 컴포넌트 렌더 함수를 넘겨줌으로써 말씀하신 횡단관심사 문제도 해결하고 컴포넌트 뎁스도 줄일 수 있을 것 같은데.. 의견 부탁드리겠습니다!
@jaeseokk 오호 의견 감사합니다 재석님!🙏 뭔가 제가 아쉬워 하는 포인트랑 다른 것 같아요!
render props는 해당 props를 전달받는 컴포넌트의 state 또는 함수를 사용할 때 그 의미가 있다고 생각하는데요, 이 부분은 custom hooks로 처리하여 큰 이점이 없다고 생각합니다!
그리고 말씀해주신 것처럼 renderFoo, renderBar와 같이 함수를 정의해서 넘겨주는 것과 props로 넘겨주는 것은 딱히 차이가 없을 것 같아요!
재석님 의견을 제가 제대로 이해한 것이 맞을까요?ㅎㅎ
아하 제가 좀 헷갈렸네요. 부모의 행동 및 상태에 따라 컨트롤되는 자식 컴포넌트를 구성하는 경우가 아니라 단순히 현재 상태에 대한 컴포넌트를 구성하는 상황에 대한 것인가 보네요..
그렇다면 위 내용은 이 경우에 children prop으로 바로 작성하는 것에 비해, prop으로 넘겨줄 경우 해당 컴포넌트에 prop을 추가적으로 정의해주어야한다는 번거로움을 말씀하신거겠죠? 이것에 대해선 저도 공감하는바 입니당..ㅎㅎ
그러나 vue 의 named slot 을 쓸 경우 해당 slot에 대한 name의 정적 타이핑이 어려운 반면, react 에서 prop으로 넘겨줄땐 propTypes 와 같은 도구로 타이핑이 가능하다는 부분은 좋은 점으로 볼 수 있을 것 같습니다ㅎㅎ
또한 재엽님 말씀처럼 functional component 와 hooks api를 활용하는 것이 권장되는 상황에선 횡단 관심사 문제도 custom hook을 사용하여 해결하는 것이 바람직할 것 같네요
답변 감사합니다! 다음편도 기대할게여 😆
공감할 수 있는 고민이 많습니다. 좋은 글 적어주셔서 감사해요.
찌찌뽕 목록
- customHooks vs Component lifecycle
- useLayoutEffect vs useEffect
- children vs slot
All Dumb Components 라는 옷걸이를 스스로 만들고 몸을 맞추는 방식이 멋있네요.
