[React] atom 컴포넌트 만들기

Atomic Design은 최근 React를 이용하여 컴포넌트 개발할 때 떠오르고 있는 디자인 기법 중 하나로 효율적인 인터페이스 디자인 시스템을 만들어내기 위해 사용된다.

Atomic Design은 다음과 같이 크게 5가지로 구성된다.

1. Atom (원자)
2. Molecule (분자)
3. Organism (유기체)
4. Template (템플릿)
5. Page (페이지)

---

Atom은 디자인 할 수 있는 요소 중 가장 작은 구성단위를 의미한다.

대표적으로 기본 마크업 구성 요소들인 input, button 등이 여기에 해당되고 마크업 요소들뿐만 아니라 color, font style 등도 Atom으로써 분류된다.

간단한 예시로 아래의 값들이 모두 Atom으로써 분류될 수 있다.

---

Molecule은 여러 Atom 요소들을 조합하여 만들어내는 구성단위를 의미한다.

상황에 따라 다르겠지만 일반적으로 Card, SearchField 등이 Molecule로써 분류될 수 있다.

간단한 예시로 아래의 값들이 모두 Molecule로써 분류될 수 있다.

---

Organism은 여러 Molecule과 Atom 요소들을 조합하여 만들어내는 구성단위를 의미한다.

일반적으로 CardList, Navigation 등이 Organism으로써 분류될 수 있다.

간단한 예시로 아래의 값이 Organism으로 분류될 수 있다.

---

Template은 여러 Organism, Molecule, Atom 요소들을 조합하여 만들어내는 구성단위를 의미한다.

경험상 아무래도 Page를 구성하기 바로 직전 단계의 컴포넌트이기 때문에 이전 구성 단위들에 비해 컴포넌트의 비중이 전반적으로 적은 구간이었다.

간단한 예시로 아래의 값이 Template으로 분류될 수 있다.

---

Page는 지금까지 나온 모든 구성 요소들을 조합하여 만들어내는 구성 단위를 의미한다.

또한 이름만 들으면 모두 아시는것처럼 URL을 입력했을 때 나오는 하나의 페이지로써도 생각할 수 있다.

---

적용

이제는 React에서 atom컴포넌트를 적용시키는 간단한 예를 보려고 한다.

// 이 방법은 현재 내가 적용하는 방법이지, 정답은 아니다. 다른 더 좋은 예시가 있을 수도 있으니
// 나도 마저 공부해볼 것이다!!

폴더구조 내에서 컴포넌트들을 모아두는 components폴더에 atoms폴더를 만들어, atom들을 넣을 자리를 만든다.

현재 여기에는 Buttons만 있지만, 다른 요소들이 더 들어갈 수 있다. 그 예시로는

• Typography: 여기에는 텍스트 관련 Atom 컴포넌트가 들어간다. 예를 들어, 제목(heading), 본문 텍스트(body text), 버튼 텍스트(button text) 등이 여기에 속한다.

• Input: 이 폴더에는 입력 요소 관련 Atom 컴포넌트가 들어간다. 예를 들어, 텍스트 입력란(text input), 체크박스(checkbox), 라디오 버튼(radio button) 등이 여기에 속한다.

• Button: 여기에는 버튼 관련 Atom 컴포넌트가 들어간다. 다양한 스타일의 버튼(button), 아이콘 버튼(icon button), 링크 버튼(link button) 등이 여기에 속한다.

• Icon: 아이콘 관련 Atom 컴포넌트를 여기에 넣어둔다. 다양한 아이콘들을 사용할 수 있다.

• Image: 이미지 관련 Atom 컴포넌트를 여기에 넣어둔다. 예를 들어, 이미지(image), 아바타(avatar) 등이 여기에 속한다.

• UI Elements: 다른 UI 요소들을 포함할 수 있는 폴더이다. 예를 들어, 선(line), 배지(badge), 프로그레스 바(progress bar) 등이 여기에 속한다.

---

Button.tsx

import React from "react";
import * as S from "./style";

interface ButtonProps {
  text: string;
  color: string;
}

const Button: React.FC<ButtonProps> = ({ text, color }) => {
  return <S.Button color={color}>{text}</S.Button>;
};

export default Button;

이 버튼 컴포넌트는 props로 텍스트와 색에 대한 정보를 받는다. props로 전달을 함으로써 어디서든 전달 인자만 바꾸면 버튼을 원하는 대로 사용할 수 있으니 재사용성이 증가한다.

여기서 props로 받은 color은 <S.Button/> 내부로 들어가게 되는데, 이 색깔에 대한 정보는 style.ts파일에서 사용된다.

---

style.ts

import styled from "styled-components";

interface ButtonProps {
  color: string;
}

export const Button = styled.button<ButtonProps>`
  width: 154px;
  height: 67px;
  border-radius: 20px;
  color: ${(props) => props.color};
`;

Button이라는 스타일 변수에서 받아온 Buttonprops에 담겨있는 color로 원하는대로 색깔을 지정한다. 여기서는 색깔만 지정하였지만, 다른 필요성이 있다면 width, height, border 등을 변경할 수도 있다.

---

사용 예시

다음은 위에서 만든 Button.tsx를 직접 가져와서 사용하는 예시이다. 여기서는 원하는 색의 버튼을 만들기 위해 text와 color을 다르게 지정해주었다.

import React from "react";
import * as S from "./style";
import Button from "../../atoms/Buttons/Button";

function PostForm() {
  return (
    <S.PostFormContainer>
      <Button text="1번 버튼" color="black" />
      <Button text="2번 버튼" color="red" />
      <Button text="3번 버튼" color="blue" />
      <Button text="3번 버튼" color="white" />
    </S.PostFormContainer>
  );
}

export default PostForm;

(현재 PostFormContainer의 배경색을 skyblue로 해두었음)