[React Hooks] useState 사용방법(함수형 컴포넌트에서 상태관리)

클래스형 컴포넌트에서 상태관리를 위해 state를 사용했다면 

리액트 16.8 버전에서 새로 도입된 함수형 컴포넌트에서 상태를 관리하는 useState 에 대해 알아보자. 

 

1) import 

 

react 에서 useState  불러오기 

 

import React, { useState } from 'react';

 

2) State 지정, 초기값 

 

State 변수를 지정하는 방법은 아래와 같다. 

 

배열 첫번째 인자 : state 변수

배열 두번째 인자 : state 변수를 변경하는 함수 (class 형 component 에서 setState와 같은 역할) 

이때 useState() 함수를 사용하며 함수에 들어가는 값은  state  변수의 초기값이다. 

//    [state 변수명, state를 변화시킬 함수] = useState(초기화값); 
const [state,SetState] = useState("");

 

 

아래처럼 객체나 배열로도 다양하게 초기화를 할 수 있다. 

const MyApp = ({filter}) => {

	const [value, setValue] = useState("");    // ""문자열 초기화
    const [number, setNumber] = useState(0);  // 숫자로 초기화 
    const [filter, setFilter] = useState(filter?filter:{  
    				startIndex: "0",
                    pageSize: "10"
              });
              //prop에 filter가 있으면 그걸로 초기화, 없으면 초기화 지정 
    
}

부모 컴포넌트로 부터 객체를 prop으로 받고, 해당 prop 이 있으면 그걸로 초기화 하거나 

없으면 초기화할 값을 지정해줄 수도 있다. 

 

3) state 값 사용과 변경

setNumber 함수를 통해 state인 number값을 변경해준다. 

return (

  <div> 
     <p> number 값 : {number} </p>
     <button onClick=(()=> setNumber(number + 1)}> 1추가 </button>
  </div> 

);

 

 

4) 전체 코드

//    [state 변수명, state를 변화시킬 함수] = useState(초기화값); 
const [state,SetState] = useState("");

const MyApp = ({filter}) => {

	const [value, setValue] = useState("");    // ""문자열 초기화
    const [number, setNumber] = useState(0);  // 숫자로 초기화 
    const [filter, setFilter] = useState(filter?filter:{  
    				startIndex: "0",
                    pageSize: "10"
              });
              //prop에 filter가 있으면 그걸로 초기화, 없으면 초기화 지정 
              
     return (

      <div> 
         <p> number 값 : {number} </p>
         <button onClick=(()=> setNumber(number + 1)}> 1추가 </button>
      </div> 

	);   
}