React Hooks는 무엇인가?

첫번째 프로젝트에서는 함수형 컴포넌트를 사용하지 않고 class형 컴포넌트를 사용했다. 간단한 기능이라서 문제가 없을거라 생각했는데 뒤로 갈수록 state가 많아져 상태관리가 복잡해졌다. 그래서 두번째 프로젝트에서는 함수형 컴포넌트를 사용해 기존의 setState 방식 대신 hooks(useState)를 사용해 상태관리를 했다. class형 컴포넌트를 사용했을 때보다 가독성이 좋고 코드 수정하기도 편한것 같다. 다음은 hooks에 대해 정리해본 내용이다.

React Hooks란?

hooks는 React 버전 16.8부터 새로 추가된 React의 요소로, 기존의 class바탕의 컴포넌트가 아닌 함수형 컴포넌트에서도 쉽게 상태관리를 할 수 있게 해주는 도구이다.

사용한 Hooks의 요소들

1. useState

가장 기본적인 hook으로, 현재의 state값과 state를 업데이트 하는 함수를 쌍으로 제공해 함수형 컴포넌트에서도 상태관리를 할 수 있게 해준다.

const [count, setCount] = useState(false);

배열의 첫번째 요소에는 state 이름, 두번째 요소에 state 설정함수를 쓰고 useState의 인자에 state 초기값을 설정해준다.
상태를 변경하고 싶을때는 state 설정함수(여기서 setCount)를 호출해 인자에 변경하고자 하는 state를 적는다.

2. useEffect

기존 class 방식의 componentDidMount, componentDidUpdate, componentWillUnmount 기능이 하나로 통합된 것이다. 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할 수 있게 해준다.

useEffect의 두 번째 인자를 비워두면 렌더링 될때마다 useEffect가 실행된다.

useEffect(() => {
  console.log('렌더링 완료')
})

두 번째 인자로 빈 배열을 입력하면 컴포넌트가 처음 렌더링 될 때만 한 번 실행된다.

useEffect(() => {
  console.log('렌더링 완료')
}, [])

특정 상태가 바뀔 때만 실행시키고 싶으면 배열 안에 특정 상태를 넣어준다.

useEffect(() => {
  console.log('렌더링 완료')
}, [count])