React - state

리액트에서는 데이터를 저장하는 방법으로 변수 외에 또 다른 방법이 하나 더 있습니다. state 라는 것인데요 이에 대해 공부해보겠습니다.

 

1️⃣  state 사용하는 방법

 

import React, { useState } from 'react';

 

App.js 파일 최상단에 있는 코드에 { useState } 라는 것을 추가해줍니다. 리액트 내장함수인 useState를 사용하겠다는 뜻입니다. 그러면 이제 useState함수를 사용할 수 있습니다. 

 

사용방법: useState('넣고 싶은 데이터')

 

이렇게 useState 함수를 사용하면 그 자리에 두 개가 남습니다. Array 형식으로 남게 됩니다. 그래서 state를 변수에 할당할 때 보통 구조분해 할당 문법을 이용하여 저장합니다.

 

let [a, b] = useState('저장할 데이터')

 

a에는 저장할 데이터가 들어가게 되고 b에는 저장할 데이터를 변경시킬 수 있는 함수가 들어가게 됩니다. 그러면 이제 변수를 활용해서 데이터바인딩을 바로 할 수 있게 됩니다.

 

<h3> { a } </h3>

 

저장할 데이터가 a에 담긴다 했으니 중괄호를 이용하여 이렇게 써주면 저장한 데이터가 정상적으로 들어가는 것을 확인할 수 있습니다. 

 

 

2️⃣  state를 사용하는 이유

 

state를 사용하는 이유는 웹을 app처럼 작동하게 하기 위해서입니다. state를 사용하게 되면 HTML이 수정될 때마다 새로고침 없이 재렌더링을 해줍니다. 그래서 사용자에게 더 좋은 사용환경을 주게 됩니다. 그런데 변수를 사용하게 되면 내용이 수정될 때마다 새로고침이 일어나기 때문에 불편함을 초래하게 됩니다. 

 

따라서 코드를 짤 때 자주 변하긴 하지만 중요한 데이터라면 state에 담는 것이 더 좋은 방법이라고 할 수 있겠습니다.