프로젝트를 진행하면서 아토믹 구조로 프론트엔드를 구현하고있었다.

아토믹구조

내가 생각한 아토믹 구조의 장점으로는

• 각 컴포넌트에 역할에 집중할 수 있다는 점
• 재사용성이 훌륭하다는 점
  위 두가지라고 생각한다.

재사용성에 대하여 팀원들과 의논을 하였고 정리를 해보려한다.

정리하기에 앞서, 나는 컴포넌트를 재사용하기 위해서
기본적으로 children 사용과 props 사용 두가지로 구분을 한다.

뿐만아니라, 재사용을 해야하는 컴포넌트의 style은 기본적인 css만을 구현하고, 컴포넌트를 호출하는 외부에서 style을 조절하여 layout을 구현한다고 생각한다.

1. children

// in InfoContainer

function InfoContainer({children}){
  return(
    <div css={InfoContainerStyle}>
      <InfoImageContainer image={Image} />
      <InputContainer>{children} </InputContainer>
    </div>
  )
}

위와 같은 방식으로 인자에 Children을 넣어주고,
컴포넌트를 호출하는 외부 컴포넌트에 children에 들어갈 컴포넌트들을 넣어준다.

function OtherComponent(){
  return(
    <InfoContainer>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </InfoContainer>
  )
}

와 같이 다른 컴포넌트에서 InfoContainer를 불러와서 Children에 넣어줄 Component들을 계속 넣어주어서 사용한다.

위와 같은 방식의 장점으로는

InputContainer내부에 어떤 컴포넌트가 들어올지 정해져있지 않았을 경우 children을 통하여 개발자 입맛에 맞게 골라 넣어서 사용하면 된다. 따라서, 재사용이 매우 쉬워지며 props가 많아져 복잡해지는 경우가 없어진다.

하지만, OtherComponent의 코드가 매우 길어질수 있다는 단점이 존재한다.

2. props

props에 type을 넣어주고 해당하는 컴포넌트에서 type에 따라 데이터를 렌더링해주는 방식이다.

// in TeamInfoContainer

const info = {
    team : ["팀명","소개","가능시간","지역"],
    user :  ["이름","소개","나이","지역"],
}

function InfoContainer({type}:{type:string}){
  return (
    <div css={InfoContainerStyle} >
      <InfoImageContainer image={teamImage} />
      <InputContainer>
        {info[type].map((label)=>
        	<InfoLabel label={label} />
         )}
      </InputContainer>
    </div>
  )
}

해결책

어떤 방법을 사용하더라도 틀린 방법은 아니다.
다만 쓰임이 다르다고 생각한다.

children

children의 경우 어떠한 데이터가 들어오지 못할 경우 재사용에 용이하고 확장성에 매우 좋다는 장점이 있다.

하지만, 위에서 언급한것과 같이 코드가 길어지고 복잡해진다는 단점이 존재한다.

props

컴포넌트에 전달하는 Props가 많아지면 분명 컴포넌트는 뚱뚱해진다.
가독성에도 좋지 않고 심지어 나처럼 기억력이 좋지 않은 경우 어떤 props인지 기억이 나질 않아서 계속 확인해야하는 경우가 있다.

하지만, Props에 type으로 데이터를 분류하여 특정 데이터를 렌더링해줘야하는 경우 코드가 매우 간결해질 수 있다는 장점이 존재한다.

결론

children 과 props 나눠서 생각하지말자!

// InfoContainer
function InfoContainer({children}){
  return(
    <div css={InfoContainerStyle}>
      <InfoImageContainer image={Image} />
      <InputContainer>{children} </InputContainer>
    </div>
  )
}

// TeamContainer

function TeamContainer(){
  return(
  	<InfoContainer>
      <InputLabel>팀명</InputLabel>
      <InputLabel>소개</InputLabel>
      <InputLabel>가능시간</InputLabel>
      <InputLabel>지역</InputLabel>
    </InfoContainer>
  )
}

// UserContainer

function UserContainer(){
  return(
  	<InfoContainer>
      <InputLabel>이름</InputLabel>
      <InputLabel>소개</InputLabel>
      <InputLabel>가능시간</InputLabel>
      <InputLabel>지역</InputLabel>
    </InfoContainer>
  )
}

위 코드처럼, InfoContainer를 사용하여 Children을 넣어주어서 TeamContainer , UserContainer 를 생성하여 필요한 곳에서 재사용을 해주는 방법을 사용하는게 좋다고 생각한다.

디자인 패턴을 생각해보자!

나는 처음 말한것과 같이 Atomic 디자인 패턴을 사용한다.

Atomic 디자인 패턴은 Atom => Molecules => Organism => Template => Page 방법이다.

이렇게 계층이 나뉘어져있는데, 모든 컴포넌트를 Children으로 사용하게 되면, 계층의 구분이 사라지는 것과 같은 생각이 들게된다.

그래서 나는 바로 위 코드 처럼 children을 사용하여 새로운 컴포넌트를 만들어서 재사용할 것 같다. 물론, 필요에따라 Type을 Props로 넘겨줄 것이다.