Container/Presenter 폴더 구조와 Props

1. 컨테이너와 프레젠터 패턴

프로젝트를 만들 때 코드가 100줄 이상 넘어간다면 가독성이 떨어진다. 그래서 하나의 파일을 여러 개로 분리해서 사용한다. 폴더를 나눠서 사용하는데, 이것을 폴더 구조, 혹은 ‘패턴’이라 부른다. 실무에서 사용하는 패턴 중 리액트에서 인기 있는 것 중 하나가 바로 컨테이너와 프레젠터 패턴이다.

바닐라 자바스크립트를 사용할 때는 html, css, js를 모두 따로 사용했었다. 그러다가 리액트를 사용하면서는 모두 자바스크립트 파일로 만들었다. 이걸 이제 다시 로직(js), 화면(jsx), 스타일(css-in-js)로 나누어서 저장하고 필요한 부분에 찾아가서 보게 만들 것이다. 이미지에 보이는 BoardWrite.container는 이름일 뿐이라 꼭 저 형식을 지켜야 하는 것은 아니다. (그치만 가장 깔끔)

container 파일에는 기존에 return 위쪽에 있던 js 코드를, presenter 파일에는 return() 안에 있던 html 내용을 담아준다. 그리고 export와 import를 이용해 연결해준다.

이때, import해주는(불러오는) 부분이 “부모 컴포넌트”이고, export하는(불려가는) 부분이 “자식 컴포넌트”이다.

그런데, 위에서 handleChangeWriter에 불이 꺼져 있다. 그 이유는, 컴포넌트는 연결했지만 안에 있는 변수나 함수는 따로 놀고 있기 때문이다. 즉,contaioner에서는 handleChangeWriter를 만들어놨는데 안 썼고, presenter에서는 handleChangeWriter가 없는데 사용하고 있는 중이기 때문이다.

소스코드 파일은 나눴지만, 실행은 하나의 파일처럼 실행되어야 한다!! 어떻게 해야 할까? 바로바로 Prop을 이용하는 것이다~!

---

2. Props

Props는 위의 상황처럼, 컴포넌트가 두 개로 나뉘었을 때 데이터와 기능의 연결고리가 끊어지는 문제를 해결해준다. Props는 부모가 가지고 있는 변수나 함수를 자식에게 물려주는 것이다. prop을 만드는 방법은 다음과 같다:

1. 키, 밸류가 있는 props 객체를 만든다
2. Presenter에 있는 곳으로 props를 보낸다
3. props의 객체를 사용한다

여기서 props의 첫 번째 특성을 알 수 있다. 바로 ‘단방향’으로만 가능하다는 것이다. 자식이 부모에게 물려줄 수는 없고, 부모가 자식에게만 물려줄 수 있다! (내리사랑 props… 앵귤러는 양방향도 된다고 한다)

container와 presenter, 그리고 props가 어떻게 사용되는지 다음을 보면 이해하기 좋다.

Props의 두 번째 특성은, ‘상대적’이라는 것이다. 예를 들면, presenter에서도 기존 css 파일인 emotion을 불러오게 되는데, 이때는 presenter가 부모가 되기 때문에 props를 물려줄 수 있게 된다.

이때 위의 이미지처럼 두 개만 import 하는 것이 아니라 만약 1억개라면 presenter의 코드가 매우 지저분할 것이다. 그래서 모두모두 import해오고 싶다면, *과 as를 사용하면 된다.

import * as S from "./BoardWrite.style";

이 부분에서 S는 임의로 정한 이름이라 아무거나 상관 없다. 그치만 꼭 jsx 부분에서 임의로 정한 이름을 붙여서, WriterInput 태그를 S.WriterInput으로 바꿔주어야 적용이 된다.

이것도 객체 형태로 주고 받기 때문에 가능하다. S라는 객체의 프로퍼티 키로 커스텀한 태그의 식별자가 들어가게 되기 때문인 것이다.