Presentational and Container

원문 – Presentational and Container Components

어떤 구조로 React 컴포넌트를 짜야하는가에 대한 글인 듯.

확실히 보여주기만 하는 컴포넌트와, 그것에 적당한 상태를 집어넣어주는 컴포넌트를 분리하는 것은 굉장히 중요한 것 같다. Redux를 쓰더라도 모든 컴포넌트에 mapStateToProps, mapDispatchToProps를 하는 것은 코드를 경직된 구조로 만들게 하는 경향이 있더라고.

Presentational의 가장 중요한 특징 두 개를 본문에서 꼽아보자면

1. Are concerned with how things look.
2. Have no dependencies on the rest of the app, such as Flux actions or stores.

Container에서 세 개를 뽑아보자면

1. Are concerned with how things work.
2. Call Flux actions and provide these as callbacks to the presentational components.
3. 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이니까 용인 가능하다고 해야하나?

… 근데 여기도 예외가 있었으니 라우팅을 먹으면서 정적인 녀석들이 있다. 이용약관 같은거…