React에서 state는 변수와 비슷한 개념으로 사용하면서, 상태가 바뀔 때 마다 react가 화면을 자동으로 렌더링을 해준다. 이 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 변수의 값을 변경한다.
자바스크립트의 자료형에는 원시형(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???
이라는 메서드가 많은데 자주 사용하는 문법에 대해서는 좀 더 알아가 봐야겠다.