[리액트를 다루는 기술] Hooks_useState, useEffect

Hooks는 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해주는, 리액트 v16.8에 새로 도입된 기능이다.

 

useState

• 가장 기본적인 Hook
• 함수 컴포넌트에서 상태 관리를 할 때 사용
• 하나의 useState 함수는 하나의 상태 값만 관리할 수 있으므로,
  컴포넌트에서 여러 개의 상태를 관리해야 한다면 여러 개의 useState를 사용

 

useEffect

• 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook
• 렌더링되고 난 직후마다 실행되며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라짐
• 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태라고 볼 수 있음

useEffect의 활용

• useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고 싶다면,
  함수의 두 번째 파라미터로 비어있는 배열을 넣어주면 된다.

useEffect(() => {
  console.log('마운트될 때만 실행!');
}, []);

• 특정 값이 업데이트될 때만 실행하고 싶다면, 두 번째 파라미터로 전달되는 배열 안에 해당 값을 넣어주면 된다.
• 대부분의 경우, useEffect를 사용할 때는 두 번째 파라미터로 전달되는 배열에 의존하는 값을 넣어서 사용한다.
  의존 값 없이 빈 배열을 넣어주는 경우도 있지만, 배열을 아예 생략하여 사용하는 상황은 거의 없다고 생각해도 된다.

useEffect(() => {
  console.log('두 번째 파라미터로 넣어준 배열 안의 값이 변할 때마다 작동!')
}, [특정 값의 변수명])

• 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 특정 작업을 수행하고 싶다면 useEffect에서 cleanup(뒷정리) 함수를 반환해주어야 한다.
• 컴포넌트가 언마운트될 때만 뒷정리 함수를 호출하고 싶다면, useEffect 함수의 두 번째 파라미터에 비어있는 배열을 넣으면 된다.

useEffect(() => {
  console.log('effect');
  
  return () => console.log('cleanup');
}, [something])


// 컴포넌트가 '언마운트'될 때만 작동!
useEffect(() => {
  console.log('effect');
  
  return () => console.log('cleanup');
}, [])

 

** useEffect 참고 사항

React.StrictMode가 적용된 개발 환경에서는 컴포넌트 렌더링될 때 useEffect가 두 번 실행된다!

• useEffect를 사용한 코드에 문제가 있는지 여부를 감지하기 위함
• 미래의 리액트 작동 방식에 대비하기 위함
  • 미래의 리액트 버전에서는 컴포넌트가 사라졌다가 다시 나타나도 컴포넌트의 상태를 유지하는 기능이 도입될 예정이라고 한다.
  • 그렇기 때문에, 컴포넌트가 나타날 때 useEffect가 두 번 실행 되어도 컴포넌트 작동 방식에 문제가 없어야 추후 호환이 정상적으로 이루어질 수 있다고 한다.

 

---

참고자료

• 리액트를 다루는 기술 [김민준 저]