state 란
- state 는 간단히 말해 변수이다
- 하지만 const, let 등으로 선언한 변수와 다르게 값이 변하면 관련 있는 컴포넌트들이 재렌더링 되어 화면이 바뀐다.
- state 는 컴포넌트의 내부에서 변경 가능한 데이터를 다루기 위해 사용하는 객체이다.
- 일반적으로 리액트에서는 유동적인 데이터는 변수에 담아서 사용하지 않고 useState() 라는 리액트 함수를 사용하여 state 라는 저장공간에 담아 사용한다.
state 사용 방법
- 파일 위쪽에 useState 를 import 한다.
import { useState } from 'react';
2. useState() 를 선언한다.
const [state, setState] = useState(초기값(생략 가능));
- 여기서 state 는 현재 상태값, setState 는 state 를 업데이트하는 함수를 의미
- 보통 업데이트하는 함수는 앞에 set 을 붙여 카멜케이스로 쓴다.
- 예를 들면 const [title, setTitle] = useState(’’); 와 같이 선언한다.
- let 이 아니라 const 로 선언하는 이유는?
⇒ let 을 사용하면 state = 100 과 같은 변수 형식의 할당이 가능해지기 때문에 이를 방지하고 setState 를 사용한 변수 변경만을 허락하기 위해서 const 로 선언한다.
⇒ 변수의 재할당을 막기 위해서 - useState 는 함수 안에서 직접적으로 선언되어야 한다.
const ExpenseItem = (props) => {
// 이곳에 있어야 한다.
constexpenseData = {
// 이곳에 있으면 안 된다.
}
}
state 를 사용하는 이유
변수는 변경되어도 자동으로 화면이 바뀌지 않는다.
하지만 state 는 변경되면 자동으로 화면이 바뀌기 때문에 state 를 사용한다.
즉, 유동적인 변수를 사용할 때 화면에 그려지는 변스도 정상적으로 변경되길 원한다면 사용한다.
1) 일반 변수를 사용했을 때
일반 변수 count 를 선언하고 h2 태그 안에 count 변수를 썼다.
그리고 + 버튼을 누르면 plus 라는 함수가 실행되고, - 버튼을 누르면 minus 함수가 실행되게 했다.
plus 함수는 count 변수를 count 보다 1 큰 수로 변경한다.
그리고 minus 함수는 count 변수를 count 보다 1 작은 수로 변경한다.
const Counter = () => {
let count = 0;
const plus = () => {
count = count + 1
console.log(count); // 제대로 증가함
}
const minus = () => {
count = count - 1
console.log(count); // 제대로 감소함
}
return (
<div className='container'>
<h2 className='int'>{ count }</h2>
<button className='plus' onClick={plus}>+</button>
<button className='minus' onClick={minus}>-</button>
</div>
)
}
export default Counter;
그래서 함수가 실행됐을 때,
count 변수가 1씩 커지거나 작아지므로 당연히 count 변수가 있는 자리의 화면도 변경되는 것을 기대했지만,,,
화면은 변경되지 않았다.
count의 값이 변경되었다. plus 함수와 minus 함수를 실행한 후, 콘솔로 count 값을 출력해보면 count 값은 정상적으로 변경됨을 알 수 있다.
화면이 변경되지 않은 이유는?
답은 일반 변수를 사용했기 때문이다.
일반 변수는 변경되어도 자동으로 화면이 재렌더링되지 않는다.
하지만 state 는 다르다.
리액티브한 프론트엔드에서 상태는 단순한 변수가 아니라 이 값이 변했을 때 화면에 반영되도록 연결된 것을 상태라고 한다.
그래서 상태가 아닌 일반 변수는 바뀌어도 화면이 변하지 않는다.
2) state 를 사용했을 때
일반 변수 대신 state 를 사용해서 함수가 실행될 때 마다 setCount 로 기존의 count 값을 count +1 혹은 count -1 로 변경해보자.
import { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
console.log(count);
const plus = () => {
setCount(count + 1);
}
const minus = () => {
setCount(count - 1);
}
return (
<div className='container'>
<h2 className='int'>{ count }</h2>
<button className='plus' onClick={plus}>+</button>
<button className='minus' onClick={minus}>-</button>
</div>
)
}
export default Counter;
count 변수가 변할 때 마다 화면도 정상적으로 값이 변하는 것을 확인할 수 있다.
따라서 일반 변수가 아닌 state 를 사용하면 변수 값이 변경되었을 때 화면이 의도대로 재렌더링 됨을 알 수 있었다
[참고 블로그]
[리액트] state를 사용하는 이유
리액트에서 state를 사용하는 이유가 뭘까?
velog.io
이해가 잘되었던 블로그 내용을 다시 적어보았다.