[항해99 리액트 입문] 16. 컴포넌트 분리하기

posinity·2022년 11월 28일

[항해99] 리액트 입문

목록 보기

9/11

1. 컴포넌트 분리해서 구현하기

우리는 지난 챕터에, <User /> 컴포넌트, <Button /> 컴포넌트의 관심사를 <App /> 컴포넌트에서 분리하고, 컴포넌트의 역할을 명확히 해주었기 때문에 <User /> 컴포넌트의 재사용성과 전체적인 가독성을 올릴 수 있었습니다.

그렇지만 현재 <App /> 컴포넌트와 <User /> 컴포넌트, <Button /> 컴포넌트가 모두 App.js라는 파일 한 곳에 작성되어 있기 때문에 발생하는 몇 가지 문제들이 있습니다.

App.js 파일의 역할이 명확하지 않습니다.
컴포넌트 분리를 통해 가독성을 높였지만, 두 컴포넌트의 사이즈가 커지거나 혹은 또 다른 컴포넌트를 작성하게 된다면 가독성은 금방 떨어지게 될 것을 보입니다.
현재 프로젝트 구조에서, User 컴포넌트, Button 컴포넌트가 어디에 작성되어 있는지 찾기가 힘듭니다. 특히 작성자가 아닌 다른 개발자가 App.js 파일을 보고 User 컴포넌트, Button 컴포넌트가 해당 파일에 작성되어 있다고 유추하기 쉽지 않아 보입니다.

우리는 일반적으로, 계속 여러번 렌더링하여, 기능을 재사용하는 컴포넌트들은 따로 분리해서 사용합니다. User 라는 이름의 컴포넌트로 분리해보겠습니다.

컴포넌트 폴더 만들기

src에 오른쪽 마우스를 눌러서 new folder로 components라는 폴더를 만들어 줍니다.
components 폴더에 Button.js 파일을 만들어 줍니다.
- 이후 새로운 컴포넌트 파일을 만들 때도 e.g) <컴포넌트>.js 형식으로 만들어주시면 됩니다.
App.js에서 작성한 Button 컴포넌트를 Button.js로 옮겨줍니다.

Button.js 파일 만들기

버튼 부분만 잘라서 붙혀넣고, 밑에 export default Button;을 넣어준다.

// 버튼 컴포넌트 생성
function Button(props) {
  //구조분해할당한다. 추가하기와 삭제하기의 onClick 함수가 다름
  const { color, onClick, children } = props;

  //만약 color값이 있다면
  if (color)
    return (
      <button style={{ background: color, color: "white" }} onClick={onClick}>
        {children}
      </button>
    );
  return <button onClick={onClick}>{children}</button>;
}

export default Button; // export 해준다

App.js에 Button.js 파일 Import 하기

App.js 맨 위 상단에 다음과 같은 코드를 넣어준다

import Button from "./components/Button";

Button 컴포넌트를 임포트해오겠다는 뜻이다.

2. User 컴포넌트 나누기

user컴포넌트는 button 컴포넌트를 사용하고 있다.
따라서 버튼 컴포넌트를 임포트해야 한다.

import Button from "./Button";

function User(props) {
  return (
    <div className="app-style">
      <div>{props.user.age}살 - </div>
      <div>{props.user.name}</div>
      <Button color="red" onClick={() => props.handleDelete(props.user.id)}>
        삭제하기
      </Button>
    </div>
  );
}

export default User;