[React] State란? State 사용법

State란?

• 컴포넌트 안에서 사용되는 자바스크립트 객체
• 일반적인 객체는 값이 변경된다고 렌더링이 발생하지 않지만, State의 값이 변경되면 렌더링이 발생한다.
• 즉, 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다.

 

---

 

State 사용법 - useState

 

• const로 선언한다
  • 변수의 재할당을 막음
  • 반드시 setState로만 state값을 변경할 수 있도록 함. 또한 setState로 값을 변경해야만 렌더링이 발생한다.

 

• setState는 카멜케이스로 쓴다

 

• 하나의 컴포넌트 내에 state는 여러개 있을 수 있다.
  • 단, state변수명과 setState함수명은 또 다른 state와 선언명이 겹쳐선 안 된다.

 

💡 setState 사용하기

1. 변경할 값을 직접 넣기

const App = () => {
	const [count, setCount] = React.useState(0);
    
    	const onClickFnc = () => {
            setCount(count+1);
        }
    
	return (
            <div>
                <h3> Total Clicks : {count}</h3>
                <button onClick={onClickFnc}>Click!</button>
            </div>
    	)
}

 

2. 현재 값을 기반으로 setState 사용하기

const App = () => {
	const [count, setCount] = React.useState(0);
    
    	const onClickFnc = () => {
            setCount((cur) => cur+1);
        }
    
	return (
            <div>
                <h3> Total Clicks : {count}</h3>
                <button onClick={onClickFnc}>Click!</button>
            </div>
    	)
}

 

• setState는 비동기 function이다.
• setState에 연산과정이 길 경우 현재값을 기반으로 세팅해야 할 때, 이전의 연산과정이 종료되지 않은 상태로 state가 계산을 시작할 수 있다.
• 따라서 현재 값을 기반으로 setState를 사용할 땐 반드시 parameter를 사용하자.