React/Learn

Hooks - useState

3.dev 2023. 1. 23. 14:30
반응형

useState는 React를 사용함에 있어 매우 중요한 Hook이다.
여기서 Hook이란 아주 쉽게 React에서 사용할 수 있는 추가기능이라고 할 수 있다.

그럼 useState는 왜 쓰는것이며 기능이 무엇인지 살펴보자.

let string = "ABC";

이렇게 string이라는 변수가 있다고 가정해보자.

let string = "ABC";
string = "DEF";

우리는 JavaScript, 코딩공부를 할때 변수를 바꾸려면 이렇게 해야한다고 알 것이다.
하지만 이런 방식으로 변수를 바꾸게 되면

이미 랜더링 된 WebSite는 바뀐 변수를 인지하지 못하고 "ABC"만을 표출할 것이다.

function True() {
  let contents = true;
  if(contents = true){
    return <>
    <p>it's true!</p>
    <button onClick={()=>{
      contents = false;
      console.log('I am trying to be false');
    }}>false!</button>
    </>
  }else{
    return <>
    <p>it's false!</p>
    <button onClick={()=>{
      contents = false;
      console.log('I am trying to be true');
    }}>true!</button>
    </>
  }
}

function App() {
  return (
  <True />
  )
}

export default App;

그렇기 때문에 우린 useState를 사용해 변수를 관리하는 것이다.

useState를 사용하려면 먼저 React와 useState를 import해야한다.
사용하려는 js file 상단에 import해보자.

import React, {useState} from 'react';

그럼 이제 useState를 사용할 수 있는 상태가 되었다.
문법을 확인해보자.

const [state,setState] = useState();

이렇게 state변수를 선언할 수 있다.
물론 이 선언에서 'state'는 다른 이름을 사용할 수 있다.
예를들어 아래와 같이 선언할 수도 있다.

const [mode,setMode] = useState();

하나씩 의미를 뜯어보자면 'state'는 변수가 되는 것이다.
let state 의 state가 되는 부분이라고 생각하면 된다.

그렇다면 setState는 어떤기능일까.

const [state,setState] = useState();

setState('new state');

바로 이렇게 state를 변경할 수 있게 해주는 것이다.

뒤에 있는 useState();는 함수처럼 생겼는데
초기값을 설정해 줄 수 있다.

const [state,setState] = useState(true);
const [state,setState] = useState([]);
const [state,setState] = useState({});

이렇게 state의 초기값을 array, object 등 원하는 형식으로 설정하거나, 기본값을 지정할 수 있다.

이게 전부이다 물론 사용하는 방식에 따라 많은 기능을 보여준다.

반응형