[React.js] React를 제대로 활용하기 (3)

앞에서 기본적인 자바스크립트 문법으로 작성을 해보았다면 여기서는 스크립트의 파일을 어떻게 나눌지와 각각 분리되어 있는 여러 가지 파일을 가져와 사용하는 방법을 작성해보려고 합니다.

 

다시 말해, 디자인 패턴 구조를 상세히 시키는 것입니다.

이전에 알아두어야 하는 것은 React 컴포넌트를 구분하는 방법입니다.

컴포넌트를 구분하는 방법에는 4가지가 있습니다.

 

1. Container vs Presentational

2. Stateful vs Stateless

3. Smart vs Dumb

4. Pure vs Unpure

 

사실 이러한 방식은 몰라도 개발에 전혀 문제가 없습니다. 하지만 React의 특성상 컴포넌트이 재사용성이 매우 뛰어난 것에 비해 활용을 하지 못한다면 기존의 자바스크립트를 그대로 사용하는 것이 훨씬 용이하죠.

 

이전 글에서 작성하였다시피 하나의 Component에서 데이터의 Fetch와 Render를 같이 표현하면 Render가 중복이 될 경우 각 컴포넌트마다 Render 부분을 구현해야 하고 코드의 중복이 발생됩니다. 

 

여기서는 1번에 적혀있는 Container와 Presentational의 논리에 따라 자바스크립트 파일 구조를 나누어 보려고 합니다.

Container에는 다음과 같은 소스들이 들어가게 됩니다.

1. Data Fetch

2. Sub Component Render

3. No DOM markup, No CSS

4. Stateful

 

그리고 Presentational에는 Container와 상이한 개념들이 들어갑니다.

1. props를 통한 Data, Callback

2. UI

3. DOM markup, CSS

4. Stateless

5. Container의 소스가 필요한 경우 Function Component

 

이렇게만 작성을 하게 되면 아무래도 개발에 갓 입문하신 초보 개발자분들은 그냥 탭을 꺼버리실 수도 있습니다. (죄송합니다. 하지만 이렇게 설명하는게 최선입니다 ㅠㅠ)

 

1은 백엔드에서 가져온 데이터를 클라이언트에서 어떻게 상호작용하는지를 표시하는 것입니다. Container의 경우는 데이터를 가져올 수 있는 API의 링크라던지 연결을 관장하는 Connection이 주로 들어갈 것입니다. 그와 반대로 Presentational은 조회를 해서 가져온 데이터들의 Callback이죠.

 

2번의 항목은 1에서 가져온 데이터를 어떻게 출력해줄거냐하는 방법입니다. 예를 들어, 리스트의 형태인 경우 아래와 같이 테이블이 생성될 수 있겠죠. 그러면 이 테이블을 어디에 그리도록 지정하는 것입니다.

key	action	text	column1
1	greeting	hello	blah
2	exit	say good bye	TT

3번은 자바스크립트의 입문 단계를 거치신 개발자분들이 익숙한 DOM일 것입니다. DOM은 현재 내가 지정하고 있는 태그와 관계없이 HTML에 속한 모든 컴포넌트들을 주무를 수 있는 것입니다. Container에서는 DOM의 사용을 하지 못하게 하는 것입니다. 

여기에 추가적으로 CSS(컴포넌트에서 style)을 입히는 것 또한 DOM을 사용하여 자유자재로 변경이 가능하기 때문에 Presentational에 넣습니다. 

 

4번의 Stateful / Stateless는 React와 같은 Functional Programming에서 나온 기법 중에 하나입니다.

모든 컴포넌트는 각각 하나의 State를 가지고 있습니다. 이러한 State를 조작하여 변경하는 것이 Container에서만 허용되는 것인데, 우리는 이러한 문법을 Hooks 이라고 합니다. 자세한 내용은 다음에 다시 다뤄보도록 하려고 합니다.