[React] 클래스형 컴포넌트와 함수형 컴포넌트 차이

리액트의 장점이라고 하면 단연 코드의 가독성과 재사용성 일 것이다.

리액트는 컴포넌트 단위로 화면을 구성하는데 이번 포스팅에서는 컴포넌트가 무엇인지 또는 리액트의 장단점을 논하지는 않겠다.

 

우선 컴포넌트는 크게 클래스형 컴포넌트와 함수형 컴포넌트로 나뉜다.

어떻게 선언하느냐에 따라서 내부 동작이나 기능에 약간의 차이가 발생한다.

 

예를 들어 하나씩 살펴보자.

 

리액트 프로젝트를 생성하면 볼 수 있는 App 코드를 예로 들겠다.

 

함수형 컴포넌트

 

function App() {
  return (
    <div className="App">
     
    </div>
  );
}

 

클래스형 컴포넌트

 

class App extends Component {
  render() {
    return (
      <div className="App">
       
      </div>
    );
  }
}

 

보다시피 선언할 때부터 차이가 발생한다.

 

하지만 진짜 차이는 자식 컴포넌트를 불러와 상속할 때 발생한다.

 

자식 컴포넌트인 Child를 생성하여 부모 컴포넌트인 App에 import 하고, 필요한 값을 상속해보자.

 

 

부모 컴포넌트

 

// 클래스형 부모 컴포넌트
class App extends Component {
  state = {
    test: "1",
  };

  func = () => {};

  render() {
    return (
      <div className="App">
        <Child state={this.state} func={this.func}></Child>
      </div>
    );
  }
}

// 함수형 부모 컴포넌트
function App() {
  const state = {
    test: "1",
  };

  const func = () => {};

  return {
    render() {
      return (
        <div className="App">
          <Child state={state} func={func}></Child>
        </div>
      );
    }
  }
}

 

클래스형 자식 컴포넌트

1. 클래스형 자식 컴포넌트에서 부모의 props(상속받는 데이터)를 받기 위해서는 각 key를 가진 interface를 만들어야 한다.

2. 자신의 state 초기 값은 constructor 내부에서 선언한다.

3. state는 this.setState 메서드를 사용하여 값을 세팅한다.

4. this.props로 부모에서 상속받은 데이터에 접근할 수 있다.

 

interface IProps {
  state: any;
  func: any;
}

class Child extends Component<IProps> {
  constructor(props: any) {
    super(props);

    this.state = {
      childState: "",
    };
  }

  handleClick = () => {
    this.setState({
      childState: "abc",
    });
  };

  render() {
    return (
      <button type="button" onClick={this.handleClick}>
        테스트
      </button>
    );
  }
}

 

 

함수형 컴포넌트

1. 함수형 자식 컴포넌트에서 부모의 props(상속받는 데이터)는 선언부의 매개변수로 넘어온다.

2. state는 useState를 사용하여 관리한다. 초기값 세팅, 값 세팅

3. props로 부모에서 상속받은 데이터에 접근할 수 있다.

 

function Child(props: any) {
  const [childState, setChildState] = useState("");

  const handleClick = () => {
    setChildState("abc");
    // props.func();
  };

  return (
    <button type="button" onClick={handleClick}>
      테스트
    </button>
  );
}

 

더 디테일하게 보면 차이가 더 있지만, 우선은 이정도만 정리해본다.

 

정리한 내용만 보더라도 함수형 컴포넌트를 사용하는 것이 훨씬 가독성도 좋고, 개발하기도 쉬울 것 같다는 게 느껴진다.

 

함수형 컴포넌트에서 사용하는 useState는 다음 포스팅에서 정리해봐야겠다.