✍🏻 [Code Camp_TIL] 6일차: 폴더 구조 체계화(container / presenter), props, export와 export default

폴더 구조 체계화

우리가 프로젝트를 만들 때 폴더 구조를 체계화해서 파일을 잘 정리하는 것이 필요하다. 폴더 구조의 패턴은 여러 가지가 있다. 그 중 `React`에서 쓰는 패턴은 크게 3가지가 있다.

container / presentational 패턴: JS와 HTML(JSX) 부분을 따로 나눔. -> 유명한 고전 방식
hooks 패턴: use로 시작하는 hooks 기반으로 폴더 만들기 -> 최신 방식
아토믹(atomic) 패턴: component를 좀 더 체계화

hooks 패턴이 최신식이기는 하나, 아직까지 고전 방식을 사용하는 기업들도 많기 때문에 다 알아둘 필요가 있다. 게시판 포트폴리오를 만드는 동안에는 고전 방식인 container / presentational 패턴을 사용할 예정이다.

container / presentational 패턴

소스코드를 Container(JS) / Presenter(HTML: JSX)로 나누는 방식이다. BoardWrite라는 파일을 만든다고 할 때, 아래와 같이 파일을 나눈다.

BoardWrite.container.js
BoardWrite.presenter.js

위와 같이 파일을 나눴어도 실행될 때는 하나로 합쳐져서 실행되어야 한다. 하나로 합치기 위해서는 부모 컴포넌트에 자식 컴포넌트를 불러오면 된다!

import되어 불려가는 컴포넌트를 자식 컴포넌트, import하여 불러오는 컴포넌트를 부모 컴포넌트라 한다.

아래에 BoardWrite.container.js와 BoardWrite.presenter.js 파일을 예시로 알아보자.

//BoardWrite.container.js

import BoardWrite from "./BoardWrite.presenter"
//BoardWrite.presenter를 불러옴.

export default function BoardWrite() {
    const [writer, setWriter] = useState()

    const handleChanceWriter = (event) => {
        const writer = event.target.value
        setWriter(writer)
    }

    return(
        <BoardWriteUI />
      //BoardWrite.presenter.js의 BoardWriteUI 함수 불러옴.
    )
} 

// BoardWrite.presenter.js

export default function BoardWriteUI() {
    return(
        <Wrapper>
            <Title></Title>
            <Writer type="text" placeholder="이름" onChange={handleChangeWriter}/>
        </Wrapper>
    )
}

자식 컴포넌트가 부모 컴포넌트로 들어가서 우리 눈에는 부모 컴포넌트가 보여지게 된다. 또한 파일은 2개로 나눠져 있지만 실행할 때에는 pages에서 하나로 합쳐져서 실행된다는 것을 잊지 말자!

우리가 브라우저로 볼 수 있는 component는 pages에 있는 index.js뿐이기 때문에 하나로 합쳐둔 container를 pages에 갖고 와서 import해야 한다.

여기서 문제가 하나 발생한다. 컴포넌트를 2개로 나누면서 데이터와 기능의 연결이 끊어지게 되었다. 이를 해결할 수 있는 것이 props이다.

컴포넌트끼리 데이터 주고받기: props

props는 부모 컴포넌트와 자식 컴포넌트를 연결해주는 역할을 한다. 즉, 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수 혹은 함수라고 할 수 있다! props는 객체로 묶여서 자식 컴포넌트에게 넘어간다. 위에서 봤던 BoardWrite 예시를 다시 보자.

//BoardWrite.container.js

export default function BoardWrite() {
    const [writer, setWriter] = useState()

    const handleChanceWriter = (event) => {
        const writer = event.target.value
        setWriter(writer)
    }

    return(
        <BoardWriteUI handleChangeWriter={handleChangeWriter}/>
  // props = { handleChangeWriter: handleChangeWriter }

    )
} 

props는 객체의 형태로 key와 value값을 담고 있다.

// BoardWrite.presenter.js

export default function BoardWriteUI(props) {
  // 소괄호 안에 props 넣어주기
    return(
        <Wrapper>
            <Title></Title>
            <Writer type="text" placeholder="이름" onChange={props.handleChangeWriter}/>
        </Wrapper>
    )
}

container.js 파일에서 props 객체의 handleChangeWriter라는 key의 값을 가져오면 된다!

그렇다면 자식이 부모한테 데이터를 물려줄 수 없을까? 물려줄 수 없다. React에서는 부모 자식한테 줄 수만 있다. 데이터의 흐름이 단방향 구조이기 때문이다. 어떻게 보면 이러한 점이 불편해 보이지만, 에러를 캐치하기 쉽고 보기에 더 깔끔하다는 장점이 있다.

export랑 export-default 차이

우리가 import를 해올 때 중괄호를 사용해서 데리고 오는 것이 있는가 하면, 중괄호 없이 데리고 오는 것이 있다. 중괄호의 사용 여부에 따라 export와 export-default를 나눌 수 있다.

import { useMutation, gql } from "@apollo/client";
//export

import BoardWriteUI from "./BoardWrite.presenter";
//export-default

export는 한 컴포넌트 안에서 여러 개를 내보내기 때문에 중괄호 안에서 어떤 걸 선택해서 사용하고 싶은지 적어서 import하게 된다. 또한 import를 해올 때 export한 이름을 그대로 사용해야 한다. 내 마음대로 import 뒤의 이름을 지정하기 위해서는 { 원래 이름 as 바꿀 이름 }으로 작성해야 한다. 만약 한번에 묶어서 import 하고 싶다면, import * as 이름 from '경로'의 형태로 사용하면 된다.

반면 export-default는 한 컴포넌트 안에서 하나만 내보내기 때문에 import 할때 중괄호를 사용할 필요가 없다. 내 마음대로 import 뒤 이름을 지정할 수 있다.

💡 오늘의 느낀 점: 그동안 만드는 페이지의 이름만 구분해서 폴더를 만들었었는데, 오늘 폴더 구조 체계화를 배우면서 앞으로의 프로젝트에는 폴더를 잘 나누어서 사용하면 훨씬 가독성이 높은 소스코드를 만들고, 문제점을 찾고 수정하는 시간을 단축할 수 있을 것 같다는 생각이 들었다.
멘토님께서 앞으로 다른 사람들과 프로젝트를 진행할 때 각자 만들 부분을 나누어 코드를 짤 거라고 말씀하셨다. 생각해보니 내가 짠 코드를 나는 잘 알지만, 다른 사람들이 읽었을 때에는 나만큼 구조를 잘 모를 수도 있기 때문에 방대한 소스코드를 구조별로 잘 나눠서 저장하면 협업에 도움이 될 것 같다.
또한 코드를 수정할 때에도 몇 백줄짜리 긴 코드를 뒤져가며 찾는데 애를 먹는 일이 덜할 것 같아서 좋은 방법인 것 같다. 앞으로는 이렇게 폴더를 체계적으로 나누어서 관리해야겠다!

---