React hook 정리 / 리액트 훅이란? / useState 정리

 

 

리액트 훅이란 ?

 

리액트 훅은 함수형 컴포넌트에서 React state와 생명주기기능을 연동할 수 있게해주는 함수이다.

 

 

원래 리액트 컴포넌트 함수 안에서 지역변수를 선언했을 시

함수 안의 변수의 값을 변동시켜도 변동되지 않는다.

 

랜더링은 1번만 일어나기 때문이다.

 

이러한 점들때문에 변수 관리를 해주어 재랜더링 하는 기능이 바로 훅이다.

 

---

useState  함수 사용 방법

 

1. 컴포넌트 위에 임폴트 먼저 해준다.

import { useState } from 'react';

useState는 리액트 내장함수중에 useState 훅 중의 하나의 함수이다.

 

 

2. useState 의 결과값은 배열 0 인덱스에는 값이

배열 1 인덱스에는 함수가 있다.

useState[0] : 값
지역변수X , 랜더링할때 재선언X , 랜더링할때 상태[데이터] 유지

useState[1] : 그 값을 수정할 수 있는 함수
해당 컴포넌트만 재실행 [ 재랜더링 ] 

let [ 변수명 , set함수명 ] = useState( 초기값 )

 

---

*예제코드

 

// ------------------------- JS 형식 ------------------------ //
import { useState } from 'react'; // 리액트 내장함수중에 useState 훅 중의 하나의 함수
export default function 상태관리컴포넌트(){

    let value1 = 10;
    function value1증가( e ){ value1++; }
    //useState함수에 매개변수 전달하고 2개를 가지는 배열 리턴
    let 상태함수 = useState('훅이란무엇인가?');
    console.log( 상태함수 );
    console.log( 상태함수[0] );
    console.log( 상태함수[1] );

    let [ value2 , setValue2 ] = useState( 10 );
    function value2증가( e ){
        value2++
        setValue2( value2 );
    }

    alert('컴포넌트 랜더링중 / 함수 (재)실행 ');

    let value3 = '텍스트입력';
    let [ value4 , setValue4 ] = useState('텍스트입력');
    // - 입력값이 체인지 될때마다 실행되는 함수.
    const value4변경 = (e )=>{  setValue4( e.target.value );  }
    // e.target.value
    // 해당 이벤트를 실행한 마크업/컴포넌트
    // document.querySelector('input').value ;

    // ------------------- JSX 형식 START --------------- //
    return(<>
        {/* */}
        <div> { value1  } <button onClick={ value1증가 } > value1증가 </button> </div>
        <div> { value2  } <button onClick={ value2증가 } > value2증가 </button> </div>
        <div> <input type="text" /> </div>
        <div> <input type="text" value = { value3 } /> </div>
        <div> <input type="text" value = { value4 } onChange = {  value4변경   } /> </div>

    </>);
    // ------------------- JSX 형식 END  --------------- //
}

// ------------------------- JS 형식 ------------------------ //