/ REACT

useState에 대해

React은 다음과 같이 구성되어 있습니다.

useState?

useState로 데이터를 저장해보자.

우리는 보통 데이터를 저장할 때 다음과 같이 변수에 데이터를 저장합니다.

let data = 'test data';

이것은 기본적인 방법입니다. 리액트에서는 이것 말고 state라는 것을 만들어서 데이터를 저장할 수 있습니다.

import { useState } from "react";

function App() {
    const [data, setData] = useState('test data');
    return (
        <div>
            <h3>{data}</h3>
        </div>
    )
}

위 코드는 useState라는 훅을 사용하는 한 예제입니다.
먼저 useState를 import를 합니다. 그리고 []안에 data와 setData, 이 두가지의 값이 올 수 있는데 첫번째 값은 data는 초기값에 해당하고, 두번째 값인 setData는 data라는 값을 변경할 때 사용하는 함수입니다. data의 초기값으로는 현재 ‘test data’라는 문자열이 인자로 들어와 있는 상태입니다.
이렇게 정의하고 data라는 값을 사용하면 끝입니다. 사실 별거 없습니다. 실제로 확인해보면 ‘test data’라는 문자열이 화면에 보여질 것입니다.

setState

위에서 사용했던 예제 코드에 버튼을 하나 추가해보겠습니다.

import { useState } from "react";

function App() {
    const [data, setData] = useState('test data');
    return (
        <div>
            <h3>{data}</h3>
            <button onClick={() => setData('change data')}>change</button>
        </div>
    )
}

이 버튼은 onClick 이벤트를 발생합니다. 클릭 시에는 setData()가 실행될 것입니다. setData함수는 위에서 설명했듯이 data라는 state의 값을 변경하는데 사용되는 함수 입니다. 함수의 파라미터로 문자가 변경되었다는 것을 나타내보기위해 ‘change data’라는 문자열을 집어넣었습니다. 이렇게 하면 버튼을 클릭했을 때 ‘change data’로 data의 값이 변경될 것입니다. 실제로 확인해보면 값이 변경될 것입니다.

state를 사용하는 이유?

state를 사용하는 이유가 무엇일까요? 사실 일반적인 변수로 저장해서 사용하는 것이 더 간단해 보이기도 합니다. 그러나 state는 변경이 생길 경우 그 state를 사용하는 html을 자동으로 재렌더링 해줍니다.

일반적인 변수를 사용하고 그 변수를 데이터바인딩했다고 가정할 경우 변수를 변경 후 html에도 변경사항을 반영하려면 직접 반영할 수 있도록 코드를 추가해줘야합니다.

하지만 state를 사용하면 추가적인 코드없이 자동으로 html을 재렌더링 해주기 때문에 UI를 개발할 때 편리하고 부드럽게 동작할 수 있습니다. 물론 모든 데이터를 state로 저장할 필요는 없습니다. 상황에 따라서 사용하면 되는데 데이터가 자주 변경될 것 같은 데이터는 state를 사용하면되고, 별로 안바뀔거같은 데이터는 변수로 저장해도 무방합니다.

End.