[React] Component를 정의하는 2가지 방법

하드웨어를 사랑하는 개발자·2023년 3월 4일

리액트의 컴포넌트를 구성하는 방식에는 함수형 컴포넌트, 클래스 기반 컴포넌트가 있다.

자바 개발을 주로 해온 나는 클래스가 친숙해서 관심이 갔었다.

리액트 16.8 이전 버전에서는 React Hook 이라는 개념이 도입되기 전이라
클래스 컴포넌트에서 상태관리를 해야 했었다고 한다.

현재는 리액트 공식문서에서 지원은 하지만 사용하지 말라고 권고하고 있다.

Component is the base class for the React components defined as JavaScript classes. Class components are still supported by React, but we don’t recommend using them in new code.

함수형 컴포넌트와 클래스 컴포넌트 구문을 비교해보자

함수형 컴포넌트

const Users = () => {
  const [showUsers, setShowUsers] = useState(true);

  const toggleUsersHandler = () => {
    setShowUsers((curState) => !curState);
  };

  const usersList = (
    <ul>
      {DUMMY_USERS.map((user) => (
        <User key={user.id} name={user.name} />
      ))}
    </ul>
  );

  return (
    <div className={classes.users}>
      <button onClick={toggleUsersHandler}>
        {showUsers ? 'Hide' : 'Show'} Users
      </button>
      {showUsers && usersList}
    </div>
  );
};

export default Users;

장점

코드가 간결해지고 읽기 쉽다.
클래스 컴포넌트보다 코드량이 현저히 줄어 코드를 작성하는 데 드는 비용이 적다.

단점

코드의 일관성이 떨어질 수 있다.
클래스를 사용하여 공통 기능을 추상화하는 것보다 복잡하다.

클래스형 컴포넌트

class Users extends Component {
  state = {};
  constructor() {
    super();
    this.state = {
      showUsers: true,
    };
  }
  toggleUsersHandler() {
    this.setState((curState) => {
      return { showUsers: !curState.showUsers };
    });
  }
  render() {
    const usersList = (
      <ul>
        {DUMMY_USERS.map((user) => (
          <User key={user.id} name={user.name} />
        ))}
      </ul>
    );
    
    return (
      <div className={classes.users}>
        <button onClick={this.toggleUsersHandler.bind(this)}>
          {this.state.showUsers ? "Hide" : "Show"} Users
        </button>
        {this.state.showUsers && usersList}
      </div>
    );
  }
}

render() 라는 예약어를 통해 jsx를 반환
this 예약어를 통해 이벤트 바인딩

장점

상태(State)와 생명주기(Lifecycle) 메서드를 사용하여 컴포넌트의 동작을 제어할 수 있다.
메서드를 다루는 방식이 일관성 있고 명확하다.
클래스를 사용하여 상속이 가능합니다. 따라서 다른 클래스에서 공통으로 사용할 수 있는 기능을추상화하여 만들 수 있다.
TypeScript와 같은 타입 검사(Type Checking)을 클래스에 타입정보를 포함 시킬 수 있어서, 코드의 안정성과 가독성을 높힐 수 있다.