원문 – Presentational and Container Components
어떤 구조로 React 컴포넌트를 짜야하는가에 대한 글인 듯.
확실히 보여주기만 하는 컴포넌트와, 그것에 적당한 상태를 집어넣어주는 컴포넌트를 분리하는 것은 굉장히 중요한 것 같다. Redux를 쓰더라도 모든 컴포넌트에 mapStateToProps, mapDispatchToProps를 하는 것은 코드를 경직된 구조로 만들게 하는 경향이 있더라고.
Presentational의 가장 중요한 특징 두 개를 본문에서 꼽아보자면
- Are concerned with how things look.
- Have no dependencies on the rest of the app, such as Flux actions or stores.
Container에서 세 개를 뽑아보자면
- Are concerned with how things work.
- Call Flux actions and provide these as callbacks to the presentational components.
- Provide the data and behavior to presentational or other container components.
그래서 자주 쓰이는 div.form-group으로 둘러쌓여진 label과 input[type=text]가 있는 것을 TextField.js 명명해서 Presentational Component로 사용한다. 물론 자잘한 처리가 필요하더라고. 본문에서도 언급됐지만 presentational이라고 해서 꼭 Stateless component일 필요가 없다고 했는데, 실제로 나도 ES6 Class로 짰다. 일정길이 이상 입력하지 않으면 minlength 미만이어도 errMsg를 띄우지 않게 해주는 등의 감.성.이 필요했거든ㅋㅅㅋ
그 외에 라우팅 먹는 녀석들은 Container components라고 생각하면 편하고, state가 있냐 없냐가 가장 중요하긴 한 듯. 물론 위에 쓴 TextField도 state가 있지만 워낙 지역적인 scope이니까 용인 가능하다고 해야하나?
… 근데 여기도 예외가 있었으니 라우팅을 먹으면서 정적인 녀석들이 있다. 이용약관 같은거…
One thought on “Presentational and Container”