[React] UseState 알아보기

useState란?

React에서 useState는 상태를 추가하고 관리할 수 있게 해주는 hook이다. 상태란 시간이 지남에 따라 변경될 수 있는 이 값을 저장하고 관리하는 데 useState를 사용한다.

 

useState 사용법

state 생성과 동시에 useState함수에 초기 상태 값을 매개변수로 호출하면 배열이 반환된다. 이 배열에는 현재 값을 나타내는 상태이다.

const [state, setState] = useState(초기값);

 

컴포넌트의 현재 상태 값은 state라는 변수에 들어있고, state를 변경하고 싶다면 setState 함수를 이용해서 변경할 수 있다. 여기서 state와 setState의 이름은 마음대로 지정이 가능하다. setState를 이용해서 state를 변경하면 해당 컴포넌트는 화면에 다시 렌더링이 된다.

 

useState 활용한 예시

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>
  );
}

 

useState 사용 시 주의할 점

다른 모두 React Hook 들에도 적용되는 주의점이기도 하다. React hook은 반드시 다음 조건들을 지켜야 한다.

 

1. 반드시 컴포넌트 최상단층위에서만 불러야 한다.

즉, 다음과 같은 useState()는 허용되지 않는다.

function App() {
  if (foo) {
   const [bar, setBar] = useState(0); 
  }
}

 

 

2. React '함수형' 컴포넌트 내부에서만 불러야 한다.

class형 컴포넌트의 경우 hook없이도 원래 잘 작동해왔고, 해당 로직을 지금도 계속 이용한다. 따라서 class 형 컴포넌트 안에서 다음과 같은 hook을 사용해서는 안된다.

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  const [bar, setBar] = useState(0); 
  render() {
    return (
      <div>Hello, World!</div>
    );
  }
}

 

 

 

Refrences

https://velog.io/@hjthgus777/%EB%8B%A4%EC%8B%9C-%ED%95%9C%EB%B2%88-useState-%EB%A5%BC-%ED%8C%8C%ED%97%A4%EC%B3%90%EB%B3%B4%EC%9E%90

[React] 다시 한번 useState를 파헤쳐보자.