📌 리액트 공식문서와 리액트를 다루는 기술을 참고하여 작성한 글입니다.
컴포넌트를 작성하는 방법은 함수 컴포넌트와 클래스 컴포넌트가 있다.
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
나 라이프사이클 메서드를 호출할 때 변화된 값들을 불러오기 때문에 생각하지 못한 버그가 발생할 수도 있다.
또한
함수형 컴포넌트는 클래스 컴포넌트에 비해 성능과 가독성이 좋고 테스트 하기 쉽다.
함수형 컴포넌트이기에 함수형 프로그래밍의 장점을 활용하기에 좋다.