React.js - useState, useEffect

 

 

대부분의 프로젝트는 아마 거의 React Hooks를 사용한 함수형 컴포넌트를 많이 사용한다.

클래스 형식의 컴포넌트로 계속 개발할 때는 진짜 이것도 너무 편하다고 생각했었는데 함수형 컴포넌트를 배우면서

계속 함수형 컴포넌트만 사용하게 되었다.🤣

 

클래스 컴포넌트가 나쁘다는것은 절대 아니다.😃

 

이미 리액트에서도 절대 함수형 컴포넌트의 지원을 끊지 않겠다고 공식적으로 발표했을 뿐더러 클래스 컴포넌트만의 정형화된 구조화 방식이 어느때는 진짜 깔끔하게 느껴질 때도 많다.

 

함수형 컴포넌트를 사용하면서 새로 생긴 React.js의 Hooks들의 대해 아직 익숙하지 않아 짧게 정리를 해보려고 한다.

 

🎉 State Hook

React.js 공식 홈페이지 State Hook 설명(Using the State Hook – React (reactjs.org))

 

기존 클래스 컴포넌트의 경우에는 항상 constructor 함수 안에 this.state 객체를 생성하여 state를 선언하고는 했다.

그리고 state의 값을 업데이트 하기 위해서는 this.setState 함수를 통해 값을 변경하는 방식이였다.

 

하지만 함수형 컴포넌트를 지원하면서 변수식으로 useState를 선언해주는 것만으로도 깔끔하게 정리가 되었다.

// 첫번째 배열의 인자는 state
// 두번째 배열의 인자는 setState를 할 함수 이름
// 초기값은 useState() 함수에 안에 선언할 수 있다.
const [count, setCount] = useState(0);

위 예제는 count라는 state의 초기값을 0으로 설정해 주고 버튼을 누를때 마다 setCount 함수로 count state를 변경해 준다.

 

기존 클래스 컴포넌트로 상태를 관리했던 조금은 지저분한 코드😂

더 이상 state와 setState를 나눌 필요 없이 간단한 배열 형식으로도 상태관리가 가능한 점이 아주 좋다고 생각한다.😃

 

🎉 Effect Hook

React.js 공식 홈페이지 useEffect를 사용하는 방법(Using the Effect Hook – React (reactjs.org))

클래스 컴포넌트에서 자주 사용했었던 componentDidMount나 componentDidUpdate React LifeCycle Method를 사용했었다. 사실 나는 이 메소드를 활용해서 좀 더 확실하게 코드를 표현하는 것이 더욱 구조적으로 좋다고 생각한다.

 

그러나 이것도 계속 사용하다보면 코드의 양이 너무 많아질 뿐더러 계속해서 라이프사이클 매소드를 추가해줘야되는 일이 많아 지는게 현실이다. 

 

useEffect는 그런점을 한번에 없애주고 공통적으로 사용할수 있게끔 해줌으로써 코드가 더욱더 간결하게 되었다.

 

componentDidMount는 컴포넌트를에 DOM이 Mount된 후에 발생하고, componentDidUpdate는 컴포넌트가 갱신될 때 마다 계속 호출을 해준다.

 

useEffect는 componentDidMount+componentDidUpdate를 합친 개념으로 맨 처음 componentDidMount가 최초 한번 실행되고 나머지는 컴포넌트가 변경될 때 componentDidUpdate가 계속 발생한다고 생각하면 될 것 같다.

 

아 물론 상태관리를 따로따로 하고 싶다면 useEffect를 나눠서 사용할 수도 있다. 각자 다른 기능을 하는 effect를 선언하여 하나는 componentDidMount처럼 또 하나는 componentDidUpdate처럼 사용할 수 있다.

componentDidUpdate 방식의 useEffect

useEffect에 변경될 state를 배열안에 넣어주면 해당 state가 바뀔 때 마다 사용할 수 있는 componentDidUpdate가 된다.

 

 

 

리액트의 Hook의 가장 기본적인 두 가지를 알아보았다. 사실 이 외의 Hooks들은 굉장히 많다.

(https://ko.reactjs.org/docs/hooks-reference.html)

 

위 링크는 기본적인 React Hook의 API를 모두 담아놓은 페이지다. 한번쯤 쭉 읽어보는것을 추천한다.