슬슬 추워지는 10월의 둘째 주는 리덕스와 창문말 열면 들어오는 찬바람 때문에 잠옷 고르느라 꽤나 고생했던 것 같다..! 세상에 또 이놈의 스토어랑 모듈 구조는 왜 이렇게 복잡한건지... 결국 리덕스 구조와 활용을 최대한 연습해보고 리덕스 툴킷으로 넘어갔다. 이번 주는 클래스형 컴포넌트를 사용하는것에서 벗어나서 함수형 컴포넌트로 건너가면서 자연스럽게 리액트 훅들을 많이 연습했고, Axios를 통해 json-server와 통신해보는 연습도 하고있다.

그러면 클래스형, 함수형 컴포넌트 많이 다른가?

그렇다. 직접 써봤는데 차이점이 꽤 많았다.

함수형 컴포넌트는 클래스형 컴포넌트와는 다르게 JSX를 return을 통해 반환해주고 state가 없으며, 라이프 사이클 함수를 작성할 수 없다. 하지만 클래스형 컴포넌트는 render를 통해 JSX를 반환해주며 react의 component를 일일히 상속 받아줘야 하고, 클래스 내부 변수나 prop에 접근할 때는 this를 사용해줘야한다. 또 클래스형 컴포넌트는 state로 상태를 관리해주고, 라이프 사이클 함수를 사용할 수 있다.

JS 클래스 문법에서도 배웠던 constructor나 JSX를 반환해주는 render, 그리고 componentDidMount가 마운트 단계에서의 대표적인 라이프 사이클 함수다. 업데이트 단계에서는 componentDidMount와 비슷한 componentDidUpdate로 가능하고, 마지막으로 컴포넌트가 소멸하기 직전에는 componentWillUnmount를 사용할 수 있다.

그렇다면 함수형 컴포넌트에서는 아무것도 못하는걸까? 바로 그것때문에 리액트 훅이 존재하더라.

리액트 훅이 어떤걸 해주나요?

위에 나왔던 대표적인 차이점 중 state를 통한 상태관리의 경우 state가 없는 함수형 컴포넌트에서는 State Hooks인 useState 훅을 사용해서 상태를 관리할 수 있다. useState 훅으로 부터 관리할 상태와 상태를 관리할 수 있는 setter를 받게되며 setter에 값을 넣으면 현재 상태를 그 값으로 불변성을 지켜주면서 변경시켜준다.

또 가장 중요한 차이점 중 하나인 라이프 사이클 함수의 경우에는 Effect Hooks인 useEffect를 통해 맛볼 수 있다. useEffect 훅에 특정 경우마다 실행될 함수와 의존성 배열을 넘겨주면 준비는 끝난다. 의존성 배열에 어떤 변수가 들어있냐에 따라 컴포넌트의 생성과 그 변수에 변화가 있을 때 마다 넘겨준 함수를 실행 해준다.

그 밖에도 useMemo, useCallback과 같은 최적화를 위한 훅들도 있다는데 리액트 내장 훅들의 종류부터 더 면밀히 살펴보면 좋을 것 같다.