컴포넌트 재사용 Children vs Props

1. children

// in InfoContainer
<div css={InfoContainerStyle}>
    <InfoImageContainer image={Image} />
    <InputContainer>{children} </InputContainer>
</div>

의 방식을 사용하여 해당하는 children이 어떤것이 들어오든지 InputContainer로 감싸준 후 children을 넣어주어 재사용이 쉽고 props로 넘겨주지 않아도 사용할 수 있다. 하지만 template의 코드가 너무 길어질 수 있고 계속해서 직접 다 넣어줘야 한다는 단점이 있다고 생각했다. 그렇게 해서 이를 활용한 방법이 각각 다른 파일을 두고 사용하는 것이다. TeamInfoContainer와 UserInfoContainer를 각각 만들어 주고 이들을 사용하는 방법이다. 이렇게 사용하게 되면 children을 사용하면서도 template에서 사용할 때 코드가 길어지는 것을 방지할 수 있다.

// in EveryComponent...
<TeamInfoContainer />
<UserInfoContainer />

// in TeamInfoContainer

<InfoContainer>
    <InputLabel label="팀명" />
    <InputLabel label="소개" />
    <InputLabel label="가능시간" />
    <InputLabel label="지역" />
</InfoContainer>

// in UserInfoContainer

<InfoContainer>
    <InputLabel label="ID" />
    <InputLabel label="소개" />
    <InputLabel label="가능시간" />
    <InputLabel label="지역" />
</InfoContainer>

2. props

props에 type을 넣어주고 해당하는 organism에서는 다음과 같이 props의 타입을 받아와서 해당하는 것을 렌더링 해준다.

// in EveryComponent...
<InfoContainer type='team' />

// 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을 사용하는 경우는 이미 다 정해져있는 데이터를 사용할 때 사용하면 좋다고 말씀해 주셨다. props를 사용하는 경우에는 atomic디자인의 경우 page에서 데이터를 주면 해당하는 데이터로 렌더링을 template에서 아래로 진행하는 것이라고 말씀하셨고 이런 경우에는 해당하는 데이터를 렌더링 하는 props로 사용하는 것이 좋다고 말씀해 주셨다. 각각 상황에 맞게 잘 활용하면 둘다 좋은 코드라고 생각했고 토론또한 매우 의미있는 토론이었다고 생각한다.