[React] useState

1. Hook 이란 ?

React Hooks은 React 16.8버전에 추가된 새로운 기능 ! ->  함수형 컴포넌트에서도 상태 관리 가능 !

 

Hook은 대표적으로 상태관리를 위한 useState, 렌더링 전후의 작업을 담당하는 useEffect 등이 존재한다.

 

Q 상태를 관리한다는 것이 무엇을 의미할까 ?

 

리액트는 컴포넌트를 기반으로 UI를 생성하는 라이브러리 !

 

리액트의 컴포넌트는 여러 가지 데이터를 받아야하는데 이 데이터는 내부에서 선언 가능 , 다른 컴포넌트로부터 넘겨 받을 수도 있다.

https://s3.ap-northeast-2.amazonaws.com/images.codemate.kr/images/COMU/post/1640069146130/1.png

여기에서,

State는 내부에서 선언하고 관리되는 데이터 (함수에서 선언된 변수 값이라 이해 정확히는 x )를 뜻하고, 

Props는 컴포넌트로부터 받은 데이터 (함수에 전달되는 매개변수라 이해 정확히는 x )를 말한다.

 

 

2. useState

useState를 사용하면, 돔 업데이트를 해주는 자바스크립트 코드 없이 UI를 업데이트 해줄 수 있다 ! 

 

 

useState를 사용하기 위해선 다음과 같은 과정을 거친다.

 

첫 번째, import 구문을 사용해 react에서 useState Hook을 불러온다.

import { useState } from 'react';

 

 

두 번째, 값과 변경함수를 선언한다.

 

초기 값은 상태 변수의 초기 값으로 사용된다.

const [상태 변수, 상태 값 변경함수] = useState(초기값);

 

@누르면 값이 증가하는 버튼 예제

import React, { useState } from 'react';

function App() {
    const [number, setNumber] = useState(0);

    function onClick() {
        setNumber(number + 1);
    }

    return (
        <div>
            <div>값 : {number}</div>
            <button onClick={onClick}>+1</button>
        </div>
    );
}

export default App;

 

 

 

 

 

 

 

 

 

 

 

---

 

 

reference

 

코드메이트의 React 편

코딩앙마의 React 기초 강좌