내가 리액트를 사용하기 시작한건 Hook 기능이 도입된 후라서, 거의 함수 방식 컴포넌트를 사용하긴 했지만 기존에 사용했던 클래스 방식을 보면서 둘의 차이점을 공부해보고자 한다.
리액트는 두가지 방법으로 컴포넌트를 생성한다. -> 클래스 방식과 함수 방식
이전에는 함수 방식이 기능적으로 제한적(state 사용 불가 등)이었으나 최근 리액트의 업데이트를 통해 클래스 방식과 거의 동등하게 사용할 수 있게 되었다.
생활코딩의 강의를 들으며 클래스 방식과 함수 방식의 차이점에 대해 공부해보고자 한다.
함수 방식을 사용할 때는 그 자체가 render 함수가 되어 UI에 표시되고, 클래스 방식은 render 함수를 통해 return 값을 UI에 표시하도록 한다.
함수 컴포넌트, 클래스 컴포넌트에 initNumber을 넘겨준다.
여기서 함수 방식은
이렇게 받으며 props의 값은 작성자가 원하는 대로 아무 값이나 사용할 수 있다.
클래스 방식은 this.state를 사용한다.
함수에서 state 사용하기
리액트 공식문서 사이트를 참고하면 위와 같이 16.8 버전부터 Hook 기능을 제공함으로써 클래스 대신 함수를 통해 state를 사용할 수 있다고 한다.
위와 같은 방법으로 useState를 사용해서 함수 안에서도 state를 사용할 수 있다.
클래스 방식으로 현재 시각을 가져오는 버튼을 만들었다. 이제 같은 것을 함수 방식으로도 만들어 볼 것이다.
함수 방식이 클래스 방식에 버금가는 가능성을 갖게 된 특징
1. state를 사용할 수 있게 되었다.
2. life cycle을 다룰 수 있게 되었다.
클래스에서 라이프 사이클 구현하기
위와 같이 콘솔에 3번 출력되도록 코드를 실행해보면,
componentWillMount는 render 전에 실행되고, componentDidMount는 render 후에 실행됨을 알 수 있다.
클래스 방식에서는 라이프 사이클에 따라서 원하는 타이밍에 원하는 코드를 호출할 수 있다면, 설정할 수 있다.
함수에서 라이프 사이클 구현하기
함수 방식에서는 useEffect를 사용해서 라이프 사이클을 구현할 수 있다. useEffect는 componentDidMount & componentDidUpdate와 같이 동작한다. (처음 render 될 때와 업데이트 될 때 마다 동작)
후기: 리액트 hook 기능은 정말 잘 만든 것 같다.
