<aside> 📌 Goal: 컴포넌트를 각각 다른 파일로 분리해보겠습니다.
</aside>
[목차]
우리는 지난 챕터에, <User />
컴포넌트, <Button />
컴포넌트의 관심사를 <App />
컴포넌트에서 분리하고, 컴포넌트의 역할을 명확히 해주었기 때문에 <User />
컴포넌트의 재사용성과 전체적인 가독성을 올릴 수 있었습니다.
그렇지만 현재 <App />
컴포넌트와 <User />
컴포넌트, <Button />
컴포넌트가 모두 App.js라는 파일 한 곳에 작성되어 있기 때문에 발생하는 몇 가지 문제들이 있습니다.
우리는 일반적으로, 계속 여러번 렌더링하여, 기능을 재사용하는 컴포넌트들은 따로 분리해서 사용합니다. User
라는 이름의 컴포넌트로 분리해보겠습니다.
<aside> 💡 하나의 폴더 안에 모든 컴포넌트를 만들어서 관리하면 시간이 흐를수록 컴포넌트가 많아져서 원하는 컴포넌트를 찾기가 힘들어질 것입니다. 그래서 연관된 컴포넌트끼리 폴더를 만들어서 관리하는 것이 컴포넌트를 찾기에 수월합니다.
</aside>
<Button />
컴포넌트를 예시로 파일을 나누는 실습을 해보겠습니다.
Button.js
로 옮겨줍니다.// 경로: src/components/Button.js
function Button(props) {
switch (props.color) {
case 'green': {
return (
<button
style={{ background: 'green', color: 'white' }}
onClick={props.onClick}
>
{props.children}
</button>
);
}
case 'red': {
return (
<button
style={{ background: 'red', color: 'white' }}
onClick={props.onClick}
>
{props.children}
</button>
);
}
default: {
return <button onClick={props.onClick}>{props.children}</button>;
}
}
}
export default Button;
// 💡💡 외부 모듈(파일)에서 Sqaure 컴포넌트를 사용할 수 있게 export(내보내기)해줘야 한다.