useState

앞에 포스팅했던 react 내용들을 보며, 쉽다고 생각했지만 이제 시작이다.

아직 리액트 기본적인 기능도 사용하지 않은 것이다. 벌써 머리가 아프지만 하나씩 천천히 알아가보자
이러한 기능들은 Hook이라는 이름으로 제공되고 대표적으로 상태관리를 위한 useState,useEffect등이 있지만, 먼저 상태관리에 사용되는 useState에 대해서 알아보자

State는 상태를 선언하고, 그 값을 변경하기 위한 함수라고 하는데 state의 용도는 그냥 변수랑 똑같다고 생각해도 될 것 같다.
자 그럼 사용해보자

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;

외부 모듈인 useState를 사용하기 위해서는 import로 불러와야 한다.

useState의 전달 인자로 0을 넘겨줘 초깃값을 0으로 세팅한 후 현재 상태 변수를 number로, 이 number의 값을 변경하는 함수를 setNumber로 설정했다.
이 경우, setNumber 함수를 값과 함께 호출하면 number 변수의 값이 변한다.

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

onClick 함수를 만들어, 클릭 시 number 변수의 값을 number + 1로 변하게 한다.

리액트에서는 중괄호{}로 모든 것을 넣을 수 있다. 함수도 마찬가지, 그냥 함수 이름을 넣으면 작동한다.

결과를 보자

누르면 올라가는 것을 볼 수 있다. 사실 사진이니 착한 사람만 볼 수 있다.

왜 useState를 쓸까?

그럼 제일 중요한 useState를 왜 쓸까에 대해서 알아보자
사실 '아 그냥 리액트에서는 이렇게 쓰는구나'라고 나처럼 생각했다면 반성을 해야한다. 뭐든지 이유가 있는 법이다.

제일 중요한 이유는 state는 변경이 일어나면 state가 포함된 html을 자동으로 재렌더링해줘서 그렇다.

렌더링이란, 사용자 화면에 내용을 보여주는 것을 의미
렌더링이 되지 않는다는 것은 데이터의 변화를 사용자가 볼 수 없다는 것

자동으로 재렌더링이 되면 무엇이 좋을까?

• UI 기능 개발도 매우 편리해지고 앱처럼 사이트가 스무스하게 작동한다고 한다. 그렇다고 한다.