스터디 내용
- (무호) 컴포넌트를 어떤 관점에서 보는가에 따라 달라질 수 있는데, 컴포넌트라고 하는 것은 Html의 element와 동일한 형태를 가진다고 생각함. 커스텀훅이라고 하는 함수의 형태를 가진 것은 렌더링은 배제된 기능적인(비즈니스 로직) 부분에 더 중점을 둔 부분이라고 생각함. 비즈니스 로직을 담고 있던 컨테이너가 커스텀 훅으로 대체된 것 아닌가? 하고 생각함.
- (사휘) 모달과 같이 공통적인 것이라면 만들겠지만 그 외 경우라면 판단이 어려웠음. 데이터를 딱 분리해서 전처리, 후처리를 하는 경우는 쓸수도 있을까?
- (민철) 무호님과 거의 똑같이 생각함. Conatiner presentaionl 만든 사람도 이제 쓰지말고 커스텀 훅으로 가라고 함. 더 엄격히 분리할 때 커스텀 훅을 사용한다고 생각함. presentor 컴포넌트를 재사용하고 싶어서, 커스텀 훅으로 만들게되면 presentor + 커스텀 훅 / Container 이렇게 사용하게 됨. 관심사 분리라는 게 동일한 목적인 것 같음
- 버튼을 예로 들면 각 비즈니스 로직이 서로 다른 컴포넌트가 있으면
- 오디오 버튼에서도 관련된 훅 사용, 미디어 버튼에서도 관련된 훅을 사용할 수 있는데
- 프리젠터 버튼 ← 커스텀 훅을 사용 / container는 커스텀 훅으로 가공된 데이터를 렌더링 함
- (정희) 모달 컴포넌트에서 타이머는 훅으로 뺀 경험있음
- (사휘) 어떤 지점에서 그렇게 했는지?
- (정희) 일반적인 기능인데 도메인이랑 같이 섞여있어서 어색했음
- (무호, 민철) 관심사 분리하고 독립적으로 만들수록 유지보수에 대한 비용이 낮아짐, 복잡도 감소
- (사휘) 커스텀 훅을 쓰면 좀더 선언적이 되는 것 같음
- (무호) 커스텀 훅에서 렌더링 관련된 로직이 포함되면 절대 안된다는 경험을 했음. 어떻게 그려낼 것인가에 대한 로직이 컴포넌트로 숨어버리면 어떻게 그려질지 파악하기 어려움
- (사휘) 회사 코드를 리팩토링을 할 때 커스텀 훅을 엄청 만들어있는 걸 본적이 있는데, 너무 추상화가 되어 있어서 문제가 생겼을 때 디버깅을 하기 어려움. 어디서 문제가 생겼는지 한 번에 파악하는 것도 필요함. 관심사에 맞게 단위를 잘게 쪼개는 것도 중요할 것 같음.
- (무호) 함수 분리와 훅 분리도 중요한 듯
- (민철) 토스 슬래시 21 진유림님도 비슷한 이야기 하셨음. 컴포넌트가 됐든 훅이 됐든 중요한 정보를 안에 숨기면 무슨 일을 하는지 알 수 없다. 좀더 정리해서 이야기 해보면, 핵심로직은 외부에서 주입하게 하고 세부로직은 안에서 캡슐화 한다.
- (사휘) 외부에서 주입한다는 것은 무슨 의미인가요?
- (민철) 예를 들어, Popover(버튼에 호버 시 뜸) 베이스 컴포넌트를 구현할 때 인터페이스를 어떻게 해야할까 고민했었는데, Popover가 어떻게 뜨는지는 버튼은 알 필요가없으니 Popover 내부로 구현하고, Popover를 어디서 띄울지는 외부에서 주입
- (민철) 코드 짤 때의 원칙은 인터페이스(걔를 사용하는 것의 입장)을 생각해보면 좋음
중요 부분
- 커스텀 훅에 렌더링 관련된 로직이 있으면 절대 안된다. ⇒ 추후 파악 불가
- 컴포넌트는 무언가를 그려내야한다는 관점
- 커스텀 훅은 비즈니스 로직
- 커스텀 훅을 사용하면 선언적이 된다.
- 컴포넌트를 사용하는 입장에서 바로 알 수 있게 핵심 로직은 외부에서 주입, 세부적인 내용은 안에서 캡슐화 하자