React - useState 사용법 및 응용

1. useState?

useState는 리액트에서 컴포넌트의 상태값을 관리할 수 있도록 도와주는 React Hook중의 하나이다.

import React, { useState } from 'react';
// useState를 사용하고자 할 경우, useState를 import 해야 한다.

const [ 현재 상태값 변수, 상태값을 바꿔주는 setter 함수 ] = useState( 기본값 );
// useState 사용법

const [ option, setOption ] = useState(false);
// useState 사용 예시

보통 상태값을 바꿔주는 setter함수명을 정할 때는, 상태값 변수 앞에 set를 붙인 함수명으로 지정한다.

useState() 안에는 해당 변수의 기본값이 들어가게 된다. 0, false, "이름" 등 각종 변수타입의 값들을 기본값으로 지정할 수 있다. 만약, 해당 부분에 기본값을 설정하지 않은 경우에는 undefined가 들어가게된다.

 

2. import 추가

import React, { useState } from 'react';

useState를 사용하기 위해서는 react 라이브러리에서 useState를 import 해야 한다.

 

3. useState 예시

import React, { useState } from 'react';

const useStateComponent = () => {
	const [ option, setOption ] = useState(0);
}

option이라는 변수를 useState Hook으로 상태값 관리하기 위해 하나 만들었고, 기본값을 false로 설정하였다.

 

4. 상태값의 변화

import React, { useState } from 'react';

const useStateComponent = () => {
	const [ test, setTest ] = useState(false);
    
    function setTestValue() {
    	setTest(!test);
        // useState test 값이 변경
        
        console.log(test);
    }
    
    return (
    	<div>
          <button onClick={ setTestValue }>클릭<button>
          {/* 버튼 클릭시, setTestValue 함수 실행 */}
        </div>
    )
}

버튼을 클릭하면, setTestValue라는 함수가 실행된다.

setTest라는 setter함수를 통해서 test의 상태값이 바뀌게 된다. setTest에 현재 test값에 반대되는 값이 들어가도록 구성하였기 때문에, 버튼을 클릭할 때 마다 test값에는 true와 false값이 순서대로 바뀌어가며 들어가게 된다.

 

5. useState 응용

import React, { useState } from 'react';

const useStateComponent = () => {
	const [ test, setTest ] = useState(false);
    
    function setTestValue() {
    	setTest(!test);
        // useState test 값이 변경
        
        console.log(test);
    }
    
    return (
    	<div>
    	  <div>
            <button onClick={ setTestValue }>클릭<button>
            {/* 버튼 클릭시, setTestValue 함수 실행 */}
          </div>
          <div>
            { test == true ? 
              <span>useState test값은 true입니다</span>
              :
              <span>useState test값은 false입니다</span>
            }
          </div>
        </div>
    )
}

다음과 같이 조건부 렌더링을 활용하여 test의 상태값에 따라 보여지는 모습을 다르게 변경할 수 있다.

클릭을 할 때 마다, 컴포넌트가 다시 그려지면서 나타나는 문구가 달라지는 것을 확인할 수 있다.