프로젝트를 만들 때, 한 페이지에 모든 코드를 다 입력하면 코드의 줄 수 가 길어지고, 어떠한 코드가 어떤 기능을 수행하는지, 가독성이 떨어지고 유지보수의 어려움을 줄 수 있습니다. 때문에 프로젝트를 만들 때, 폴더 구조는 굉장히 중요합니다.
- Container / Presentational 패턴
container / presentational 패턴이란, 소스코드를 자바스크립트(기능)와 JSX (UI)로 나누는 방법을 의미합니다.
여기서 container는 자바스크립트(기능) 부분을 의미하고, presentational은 JSX(UI) 부분을 의미합니다.
위 코드를 그림과 같이 Container, Presenter 부분으로 나누어 파일을 작성합니다.
이후 Presenter을 Container파일에서 import 해와서, 기능 부분을 작성해 줍니다.
💡 부모 컴포넌트와 자식 컴포넌트
→ import되어 불려가는 컴포넌트를 자식 컴포넌트라고 합니다.
반면 import하여 불러오는 컴포넌트를 부모 컴포넌트라고 합니다. 자식컴포넌트는 부모 컴포넌트 안에 포함되는 구조 입니다.
- Atomic 패턴
atomic 패턴이란, 소스코드를 아주 작은 컴포넌트 단위로 먼저 쪼개는 방법을 의미합니다.
이렇게 하는 이유는 컴포넌트의 중복을 최소화하기 위함입니다.
총 5개의 폴더 구조로 이루어지며, 각각의 의미는 화학의 원리를 이용하여 만듭니다.
atoms, molecules, organisms, templates, pages 이렇게 5개의 폴더로 나누어서 컴포넌트들을 관리하게 됩니다.
atomic 패턴은 디자이너분들의 세계에서도 널리 알려진 패턴입니다.
따라서, atomic 패턴을 사용하면 디자이너분들과 협업에 유리해질 수 있고, 프로젝트 시작부터 체계적인 UI적 설계가 가능해집니다.
하지만, 프로젝트 시작부터 UI를 디자이너분과 함께 전체적으로 설계해야하므로 실제 개발준비까지 걸리는 시간이 오래 걸릴 수 있습니다.
따라서, 시간, 비용, 팀의 상황 등에 따라서 적용하는 것이 일반적입니다.
interface IButtonProps {
isActive: boolean;
title : string;
}
export default function Button01(props: IButtonProps): JSX.Element {
return (
<button style={{ backgroundColor: props.isActive ? "yellow" : ""}}>
{props.title}
</button>
)
}위 코드 처럼 props로 인자를 전달받아 특정한 상황에서의 css를 변경하는 식으로 쓰기도 하면서, input, button 처럼 중복되는 컴포넌트를 하나하나 원자 단위까지 쪼개어 코드를 분리할 수도 있습니다.
