[React] SoC(Separation of Concerns)

이애진·2023년 1월 25일
0

React

목록 보기
19/28
post-thumbnail

1. Hook vs. VAC

VAC(View Asset Component)를 사용하려면 Presentational(only view render) / Container(view 제외 모든 것) 컴포넌트를 도입해야한다
VAC는 기존에 존재하던 Presentational/Container 패턴의 별칭일 뿐이다
Presentational/Container로 나누는 것이 자연스러울 때 나누면 좋지만 그렇지 않다면 hook이 그 역할을 대신 할 수 있다

cf) VAC 컴포넌트 조건
1) 반복이나 조건부 노출, 스타일 제어와 같은 렌더링과 관련된 처리만 수행
2) 오직 props로만 제어되며 stateless 컴포넌트
3) 이벤트에 함수를 바인딩할 때 어떠한 추가 처리도 하지 않는다

2. 그렇다면 그 둘의 차이는?

재사용성의 목적에 있다

Hook와 Presentational/Container 는 모두 관심사 분리를 돕긴하지만,
Hook은 로직을 재사용 하는 목적을 갖고 독립적으로 테스트 될 수 있으며, Presentational/Container는 컴포넌트를 재사용 하는 목적을 갖기 때문에 Presentational 컴포넌트는 어디든지 사용될 수 있다 (비즈니스 로직이 무엇이든 props로만 넘기면 되기 때문)

3. 결론

둘 중에 무엇을 써라라고는 확실하게 말할 순 없지만 (통합해서 써도 무관,..), 어떤 것을 재사용할지에 따라서 달라질 수 있다
근데 hooks로 충분히 관심 분리 가능한데 왜 분리를 하려고 하느냐에 대해 얘기하는 것 같다
계속 방법론에 관해 고민이 계속 드는건 컴포넌트 기반 라이브러리의 한계라고 생각이 든다

ref

profile
Frontend Developer

0개의 댓글