컴포넌트(3) 리액트 훅(react hook)사용 - useState

리액트 훅 (react hook) 이란?

- 리액트의 훅은 16.8 버전부터 새로 추가된 기능이다.
Hook은 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 [연동(hook into)]할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않으며, 대신 class 없이 React를 사용할 수 있게 해준다.

state란?
- 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용하고 동적인 값을 상태(state)라고 부른다.

useState란?
- 리액트의 훅중 하나이며 현재의 state 값과 state 값을 업데이트하는 함수를 반환하는 함수다.
일반적으로 함수 내의 변수는 함수가 종료되면 사라지지만, useState 를 사용해 변수의 상태를 초기화하면 리액트에 의해 해당 변수는 사라지지 않고 계속 된다.

useState 함수는 배열을 반환하며, 첫번째 요소는 useState 함수의 인자로 넘겼던 초기 state 값이 반환되며 
두번째 요소는 해당 state 값을 변경하는 함수가 반환된다.

 

//const [ 데이터, 데이터변경함수 ] = useState(초기값※생략가능);
const [ myName, setMyName ] = useState("Dev.MK")

 

예제 1 > 텍스트 변경하기

 

componet/Main.js

import React, { useState } from 'react';

const Main = () => {

    const [ myName, setMyName ] = useState("Dev.MK") 
    
    function changeName() {
        setMyName(myName === "Dev.MK" ? "개발자" : "Dev.MK")
    }
    
    return (
        <div>
            <h1>안녕하세요. {myName} 입니다.</h1>            
            <button onClick={changeName}>Change</button>
        </div>
    );

};

export default Main;

App.js

import Main from './component/Main';
import './App.css';

function App() {
  return (
    <div className="App">
        <Main/>
    </div>
  );
}

export default App;

 

#결과

체인지 버튼을 누르면 텍스트가 바뀐다.

 

예제 2 > 숫자 증가시키기

import React, { useState } from 'react';
const Counter = () => {
    //const [ 데이터, 데이터변경함수 ] = useState(초기값※생략가능);
    const [ cnt, setCnt ] = useState(0) 
    const updateCnt = () => setCnt(cnt + 1);    
    const clearCnt = () => setCnt(0);
    return (
        <div>
            클릭한 횟수는 {cnt}번 입니다.
            <div>
                <button onClick={updateCnt}>숫자 증가</button>
                <button onClick={clearCnt}>숫자 초기화</button>
            </div>
        </div>
    );
};
export default Counter;

# 결과

숫자 증가와 초기화를 할 수 있다.

 

예제 2를 다른방법으로 작성하기

import React, { useState } from 'react';    //useState  훅을 사용정의

const Counter3 = () => {
    const [ cnt, setCnt ] = useState(0)
    return (
        <div>
            클릭한 횟수는 {cnt}번 입니다.
            <div>
            <button onClick={() => setCnt(prevCnt => prevCnt + 1)}>숫자 증가</button>
            <button onClick={() => setCnt(0)}>숫자 초기화</button>
            </div>
        </div>
    );
};
//bind() 함수를 사용하면 함수를 특정 값에 바인딩할 수 있다.
export default Counter3;

# 결과

결과는 동일하다.

 

예제 3 > 객체를 상태변수로 활용할 수 있다.

import React, { useState } from 'react';    //useState  훅을 사용정의

const Counter2 = () => {
    const [ state, setState ] = useState({cnt : 0}) //cnt라는 상태 변수를 선언하고 0으로 초기화함,
    //setState 함수는 상태를 업데이트하는 데 사용
    const updateCnt = val => setState({ ...state, [val] : state[val] + 1})  //...state 구문은 현재 상태를 새 상태 개체로 확장하는 데 사용
    const { cnt } = state
    return (
        <div>
            클릭한 횟수는 {cnt}번 입니다.
            <div>
                <button onClick={updateCnt.bind(null, 'cnt')}> 클릭해 보세요! </button>
            </div>
        </div>
    );
};
//bind() 함수를 사용하면 함수를 특정 값에 바인딩할 수 있다.
export default Counter2;

# 결과

 

 

 

출처
https://funveloper.tistory.com/34
https://goddaehee.tistory.com/301