State 사용하기

MoonEn·2023년 3월 5일
0

React

목록 보기
1/3

React에서 state는 변수와 비슷한 개념으로 사용하면서, 상태가 바뀔 때 마다 react가 화면을 자동으로 렌더링을 해준다. 이 state에 대한 사용 방법에 대해 설명하려고 한다.

state 사용하기

state를 사용하기 위해서는 useState를 import 해야 한다. 그리고 변수명과 setter 메서드 명을 붙여서 선언한다. 이렇게 선언하기 위해서는 배열의 구조 분해 할당을 이용한다.

import {useState} from 'react'
function App() {
	const [num, setNum] = useState(0)
}

위 코드에서는 state(변수)명은 num이 되고, setter 메서드는 setNum이 된다. 그리고 useState(0)에서 0은 num의 초기값이 된다.

state를 간단하게 변경하는 코드를 만들면 다음과 같다.

import {useState} from 'react'
function App() {
	const [num, setNum] = useState(0)
    return (
    	<div>
        	<span>{num}</span>
            <button onClick = {() => setNum(num+1)}>+</button>
    	</div>
    )
}

state 변수에 값을 할당하기 위해서는 setter 메서드를 활용하애 하며, setter 메서드를 호출할 때 전달하는 파라메터로 state 변수의 값을 변경한다.

참조형 state

자바스크립트의 자료형에는 원시형(Primitive type)와 참조형(Reference type)가 있다. 그 중 참조형은 선언한 후 데이터를 변경해도 동일한 주소를 바라보게 된다. 그래서 useState로 state를 변경해도, 변경되었다고 판단하지 않기 때문에 렌더링되지 않는다.

export default function App() {
  const [num, setNum] = useState([1])
    return (
    	<div>
        	<span>{num}</span>
            <button onClick = {() => {
              num.push(num[num.length-1]+1)
              setNum(num)}}>+</button>
    	</div>
    )

위의 코드에서 setter로 num을 state값을 변경해도 동일한 주소를 보고 있기 때문에 새로 화면이 새로 렌더링되지 않는다.

이러한 문제를 해결하기 위해서 JavaScript의 Spread 문법을 사용하여 새롭게 배열을 만들면 된다.(Spread 문법 사용 시 새로운 객체 생성)

변경한 코드

export default function App() {
  const [num, setNum] = useState([1])
    return (
    	<div>
        	<span>{num}</span>
            <button onClick = {() => {
              num.push(num[num.length-1]+1)
              setNum([...num])}}>+</button>
    	</div>
    )
}

이렇게 하면 간단히 해결할 수 있다.

마무리

react를 공부하기 시작하고 프로젝트를 만들면서 많이 사용하게 될 useState에 대해 알아보았다. react에 use???이라는 메서드가 많은데 자주 사용하는 문법에 대해서는 좀 더 알아가 봐야겠다.

profile
개발자를 꿈꾸는 직장인

0개의 댓글