React - hook (useState, useEffect)

리액트에는 Hook 이라는 개념이 있다. 그 중 대표적이며 필수적인 것이 

 

useState, useEffect이다

 

먼저 useState 에 대한 이해가 전제가 되어야 리액트 진행이 가능하다.

 

리액트는 state, 즉 상태라는 개념이 있는데 이 state가 변경이 되면 페이지의 리로딩 없이 그 변경되는 부분만 렌더링 한다.

 

이번 전체 코드는 아래와 같다.

import React, { useState, useEffect } from 'react';


function Test1() {
    const [id, setId] = useState(0);
   
    function stateTest() {
        setId(id+1)
    }
     useEffect(
       () => {
          alert("ok")
       
       }, []
       );


    }    

    return (
        <div>
        test{id}
        <button  onClick={()=> stateTest()}>test</button>
        </div>
    );
  }


  export default Test1;  

state는 useState를 통해서 생성한다.

 

 const [id, setId] = useState(0);

해당 코드는 id라는 state를 초기 값 0으로 생성한다.

 

그리고 setId라는 함수를 통해서 id의 값을 변경 가능하다.

 

해당 state는 {} 로 감싸서 return  안에서 사용 가능하다.

 <div>
test{id}
<button  onClick={()=> stateTest()}>test</button>
</div>

위와 같이 코드를 주면 test1.js의 화면은 아래와 같다.

test{id} 에서 id의 값이 0으로 들어간 것을 볼 수 있다.

 

위에서 버튼에 클릭시 함수가 실행 되도록 하였다. 

  onClick={()=> stateTest()}

 

해당 함수는 아래와 같이 정의를 해두었다.

 

 function stateTest() {
        setId(id+1)
    }

즉 버튼을 클릭시 setId를 통해서 id 값에 1을 더해준다.

 

결과적으로 버튼을 클릭하면 화면의 리로딩 없이 숫자만 렌더링 되어서 증가한다.

그리고 useEffect를 사용할 차례이다. 

     useEffect(
       () => {
          alert("ok")
       
       }, []
       );

 위와 같이 작성을 해주면 페이지 렌더링시 처음으로 useEffect 내부의 함수가 실행한다.

 

만약 뒤 배열에 [id] 를 넣어 아래와 같이 작성하면 useEffect는 id값이 변경시마다 함수가 작동한다.

     useEffect(
       () => {
          alert("ok")
       
       }, [id]
       );