React `useState` 및 `useEffect` 후크 이해

React 후크는 구성 요소에 기능을 추가하기 위해 React 패키지에서 가져올 수 있는 JavaScript 함수입니다. 후크는 함수 기반 구성 요소에만 사용할 수 있으므로 클래스 구성 요소 내에서 사용할 수 없습니다.

React는 10개의 후크 함수를 제공하지만 이 후크 중 2개만 함수 구성 요소를 작성할 때 매우 자주 사용됩니다. 그들은 useState 및 useEffect 갈고리입니다. 먼저 useState에 대해 알아봅시다.
useState 후크는 초기 상태인 하나의 인수를 취하는 함수이며 현재 상태와 상태를 업데이트하는 데 사용할 수 있는 함수의 두 값을 반환합니다. 작동 중인 후크는 다음과 같습니다.

import React, { useState } from 'react'

function UserComponent() {
  const [name, setName] = useState('John')
}

상태 변수를 선언할 때 대괄호 사용에 주의하십시오. 이것은 ES6 array destructuring syntax 이며 useState 에 의해 반환된 배열의 첫 번째 요소를 name 에 할당하고 두 번째 요소를 setName 변수에 할당한다는 의미입니다.

따라서 이것은 name라는 이름의 상태가 있고 setName() 함수를 호출하여 업데이트할 수 있음을 의미합니다. return 문에서 사용합시다.

import React, { useState } from 'react'

function UserComponent() {
  const [name, setName] = useState('John')

  return <h1> Hello World! My name is {name} </h1>
}

함수 구성 요소에는 setState() 함수가 없으므로 업데이트하려면 setName() 함수를 사용해야 합니다. 이름을 "John"에서 "Luke"로 변경하는 방법은 다음과 같습니다.

import React, { useState } from 'react'

function UserComponent() {
  const [name, setName] = useState('John')

  if(name === "John"){
    setName("Luke")
  }

  return <h1> Hello World! My name is {name} </h1>
}

상태가 여러 개인 경우 필요한 만큼 useState 후크를 호출할 수 있습니다. 후크는 문자열, 숫자, 부울, 배열 및 객체와 같은 모든 유효한 JavaScript 데이터 유형을 수신합니다.

import React, { useState } from 'react'

function UserComponent() {
  const [name, setName] = useState('Jack')
  const [age, setAge] = useState(10)
  const [isLegal, setLegal] = useState(false)
  const [friends, setFriends] = useState(["John", "Luke"])

  return <h1> Hello World! My name is {name} </h1>
}

그게 전부입니다. useState 후크는 기본적으로 함수 구성 요소가 자체 내부 상태를 가질 수 있도록 합니다.

useEffect 후크

useEffect 후크는 componentDidMount , componentDidUpdate 및 componentWillUnmount 클래스 수명 주기 메서드의 조합입니다. 이 후크는 구성 요소가 DOM에서 제거되기 전에 수신기를 설정하고, API에서 데이터를 가져오고, 수신기를 제거하기에 이상적인 위치입니다.

클래스 수명 주기 메서드와 비교하여 useEffect의 예를 살펴보겠습니다. 일반적으로 클래스 구성 요소에서 다음과 같은 코드를 작성합니다.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Nathan',
    };
  }

  componentDidMount() {
    console.log(
      `didMount triggered: Hello I'm ${this.state.name}`
    );
  }

  componentDidUpdate() {
    console.log(
      `didUpdate triggered: Hello I'm ${this.state.name}`
    );
  }

  render() {
    return (
      <div>
        <p>{`Hello I'm ${this.state.name}`}</p>
        <button
          onClick={() =>
            this.setState({ name: 'Gary'})
          }
        >
          Change me
        </button>
      </div>
    );
  }
}

componentDidMount는 구성 요소가 DOM 트리 구조에 삽입될 때 한 번만 실행되므로 후속 렌더링에서 더 이상 메서드를 트리거하지 않습니다. 각 렌더링에서 무언가를 실행하려면 componentDidUpdate 메서드를 사용해야 합니다.
useEffect 후크를 사용하는 것은 componentDidMount와 componentDidUpdate를 하나의 메서드에 모두 포함하는 것과 같습니다. useEffect는 모든 렌더링에서 실행되기 때문입니다. 두 가지 인수를 허용합니다.

(필수) 모든 렌더링에서 실행되는 기능

(선택 사항) 변경 사항을 감시할 상태 변수의 배열입니다. useEffect 변수가 업데이트되지 않으면 건너뜁니다.

위의 클래스를 함수 구성 요소로 다시 작성하면 다음과 같습니다.

const Example = props => {
  const [name, setName] = useState('Nathan');

  useEffect(() => {
    console.log(`Hello I'm ${name}`);
  });

  return (
    <div>
      <p>{`Hello I'm ${name}`}</p>
      <button
        onClick={() => {
          setName('Gary')
          }}>
        Change me
      </button>
    </div>
  )
}

위의 함수 구성 요소는 각 렌더링에서 useEffect 함수 내부의 함수를 실행합니다. 이제 이것은 첫 번째 클릭 후에 상태가 업데이트되지 않기 때문에 최적이 아닙니다. 여기서 useEffect 두 번째 인수가 작용합니다.

useEffect(() => {
    console.log(`Hello I'm ${name} and I'm a ${role}`);
  }, 
  [name]);

useEffect 함수의 두 번째 인수를 "종속성 배열"이라고 합니다. 배열 내부에 포함된 변수가 변경되지 않은 경우 첫 번째 인수로 전달된 함수는 실행되지 않습니다.

componentWillUnmount 효과

구성 요소가 DOM 트리에서 제거될 때 실행해야 하는 코드가 있는 경우 첫 번째 인수 함수에 componentWillUnmount 문을 작성하여 return 효과를 지정해야 합니다. 다음은 예입니다.

useEffect(() => {
    console.log(`useEffect function`);

    return () => { console.log("componentWillUnmount effect"); }
  }, [name] );

useEfffect를 한 번만 실행

useEffect hook like componentDidMount 함수를 한 번만 실행하려면 두 번째 인수에 빈 배열을 전달할 수 있습니다.

useEffect(
  () => {
    console.log(`useEffect function`);
  }, 
  [] );

빈 배열은 효과에 변경 사항을 감시할 종속성이 없으며 트리거가 없으면 구성 요소가 마운트된 후 실행되지 않음을 나타냅니다.

지금 React 기술을 레벨업하세요!

내 최신 책을 받고 React를 사용하여 4개의 프로젝트를 구축하세요. 내 블랙 프라이데이 딜로 40% 할인을 받으세요! Grap a copy today!