함수 컴포넌트, 클래스 컴포넌트

:D ·2021년 11월 30일
1

React 📚

목록 보기
2/8
post-thumbnail

📌 리액트 공식문서와 리액트를 다루는 기술을 참고하여 작성한 글입니다.

컴포넌트를 작성하는 방법은 함수 컴포넌트와 클래스 컴포넌트가 있다.

클래스 컴포넌트

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

함수 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

두개의 차이점은 무엇일까? 🤔

메모리자원도 클래스 컴포넌트 보다 덜 사용한다고 한다. → 그러나 성능은 실제로는 거의 비슷하다고 한다.

함수 컴포넌트의 주요 단점이었던 state와 라이프사이클 API의 사용이 불가능하다는 것이었는데, Hooks라는 기능이 도입되면서 해결되었다.

차이가 거의 없네..?🤔 그러면 왜 함수 컴포넌트를 사용할까? (왜 권장할까?)

props는 리액트에서 불변(immutable) 값이다. 하지만, this는 변경 가능하다(mutable).

→ 클래스형 컴포넌트에서는 this.props 로 함수형 컴포넌트에서는 props으로 받아오게되는데 클래스형 컴포넌트에서 this.props를 하면서 render나 라이프사이클 메서드를 호출할 때 변화된 값들을 불러오기 때문에 생각하지 못한 버그가 발생할 수도 있다.

또한

함수형 컴포넌트는 클래스 컴포넌트에 비해 성능과 가독성이 좋고 테스트 하기 쉽다.

함수형 컴포넌트이기에 함수형 프로그래밍의 장점을 활용하기에 좋다.

profile
강지영입니...🐿️

0개의 댓글