2 분 소요

useState

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었습니다. Hook은 React 16.8에 새로 추가된 기능입니다. useState도 리액트의 hook중 하나입니다. 이를 통해 함수형 컴포넌트에서도 상태를 관리할 수 있습니다.

문법

useState 함수를 호출하면 배열을 반환합니다. 1번째 원소는 현재 상태 값 변수이고, 2번째 원소는 상태 값을 갱신해주는 setter 함수입니다. useState 괄호 안의 값은 상태의 초기 값입니다.

const [<상태 값 저장 변수>, <상태 값 갱신 함수>] = useState(<상태 초기 값>);

import "./App.css";
import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(count);
  }, [count]);

  const increment = () => {
    setCount(count + 1);
  };
  return (
    <div className="App">
      <button onClick={increment}> click</button>
    </div>
  );
}

export default App;

useState는 인자로 초기 state 값을 하나 받습니다. 카운터는 0부터 시작하기 때문에 위 예시 useState(0) 초기값으로 0을 넣어준 것입니다. 위의 예제는 버튼을 누를때마다 +1씩 증가하는 간단한 코드입니다. 초기값 0에서 클릭할시 increment 함수가 실행되어 count + 1 이 됩니다. +1 된 값은 setCount에 저장이 됩니다.

useEffect

useEffect는 어떤 Effect를 발생시키고 싶을 때 사용합니다. 여기서 말하는 effect는 명령형함수 또는 타이머, 로깅, 변형, sideEffect등 을 발생시키는 함수등을 말합니다. 컴포넌트가 렌더링될 때마다 어떠한 작업을 수행하도록 해야 한다면, 그것을 설정하는 Hook으로 useEffect를 사용합니다.

문법

첫 번째 인자는 컴포넌트에서 실행할 콜백을 입력합니다. 그리고 선택사항인 두 번째 인자의 경우 언제 해당 콜백을 실행해야 할 지 선택할 수 있는 값을 입력 가능합니다. 다시 말해 전체가 아닌 특정 변수의 값이 바뀌는 경우에만 해당 콜백을 실행할 수 있도록 원하는 변수 값을 선언할 수 있습니다. 예를들어 컴포넌트가 새롭게 업데이트 된다고 모든 상황에 콜백을 업데이트 할 필요는 없을 것입니다.

이 두 번째 인자의 경우 나가 아닌 여러 개 선언이 가능합니다. 그런 이유로 배열로 값을 전달하도록 합니다.

useEffect(콜백함수, [변수]);

예제

아래 코드는 예를 들기위한 간단한 예제입니다.

const myButton = () => {
  const [countClick, setCount] = useState(0);

  useEffect(() => {
    alert(countClick);
  });

  const showClickNo = () => {
    setCount(countClick + 1);
  };

  return <button onClick={showClickNo}>Click Me</button>;
};

export default myButton;
  • 특정 변수에 작동하는 방법입니다.

특정 값이 업데이트 된 경우에만 useEffect()를 실행하도록 할 수 있습니다. 만약 아래와 같이 두 개의 useEffect()가 선언된 경우를 생각해보겠습니다. 위 코드는 하나의 컴포넌트에 두 개의 useEffect()를 사용한 코드입니다. 첫 번째 코드는 컴포넌트가 변경, 업데이트 될 경우 동작하겠지만 아래 useEffect()의 경우 항상 동작하는 것이 아니라 countClick를 두 번째 인자로 사용하였기 때문에 countClick 값이 업데이트 된 경우에만 해당 콜백을 실행하게 될 것입니다.

useEffect(() => {
  alert("Updated !!");
});

useEffect(() => {
  alert(countClick);
}, [countClick]);
  • useEffect()를 props에도 사용가능합니다.

참고로 useEffect의 두 번째 인자 값은 [] 내부에 state 뿐만 아니라 부모로부터 전달받은 props 값 역시 사용이 가능합니다. 그렇기 때문에 부모로부터 전달받은 props의 값이 변경된 경우 컴포넌트를 업데이트 하는 코드 역시 작성이 가능합니다.

만약 부모로부터 전달받은 props.siteName 값이 변하는 경우라면 아래와 같이 작성할 수 있습니다.

useEffect(() => {
  alert("Props Updated!");
}, [props.siteName]);

댓글남기기

참고

최대 1 분 소요