1. React state🔔
01. state란?
컴포넌트는 상호 작용의 결과를 화면에 반영해야 하는 경우가 빈번히 발생한다. 예를 들면 폼에서 입력 필드에 사용자가 값을 입력하거나, 버튼을 클릭하여 이미지가 변화하는 등 이벤트가 발생하는 경우 등이다.
컴포넌트는 로직을 처리하기 위해 특정한 값 (입력값, 이벤트) 등을 기억해야하는데, React는 이를 state라고 정의한다. state 값에 변화가 생겼을 때, React는 리렌더링을 한다. 즉, state 변화는 컴포넌트의 리렌더링을 야기한다.
02. 변수가 있잖아?
우리는 '변수가 있지않나? state 변경과 변수 변경은 뭐가 다른거야?'라는 생각을 할 수 있다. 하지만 React에서는 지역 변수를 변경해도 렌더링에 영향을 주지 않는다. 즉, React는 컴포넌트를 리렌더링할 때, 지역 변수에 대한 사항은 고려하지 않는다.
또한, React는 지역 변수가 변경되어도 새로운 데이터로 다시 렌더링 해야한다는 것을 인식하지 못한다. 즉, 변수의 변경은 리렌더링을 일으키지 않는다. 그렇기 때문에 값이 변경되었을 때 리렌더링을 진행하면서, 렌더링 사이에 데이터를 유지하기 위해선 state를 사용해야한다.
React state를 설명할 때, 가장 많이 사용하는 예시인 "카운터 앱" 예시코드로 변수와 state의 차이점을 정리해보고자 한다.
function Counter() {
let count = 0;
function increaseCount() {
count += 1;
console.log(count);
}
function decreaseCount() {
count -= 1;
console.log(count);
}
return (
<div>
<button onClick={increaseCount}>+1</button>
<button onClick={decreaseCount}>-1</button>
<p>Count : {count}</p>
</div>
);
}
export default Counter;위 코드처럼 변수를 사용하면 당연히 작동이 되지 않는다. console.log에서는 변화가 기록되지만, 화면 상에는 구현되지 않는다. 일반 변수의 변경은 리렌더링을 일으키지 않기 때문이다.
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
function increaseCount() {
setCount(count + 1);
console.log(count);
}
function decreaseCount() {
setCount(count + 1);
console.log(count);
}
return (
<div>
<button onClick={increaseCount}>+1</button>
<button onClick={decreaseCount}>-1</button>
<p>Count : {count}</p>
</div>
);
}
export default Counter;위 코드처럼 state가 변경되도록 코드를 수정하면 정상적으로 구현이 된다. state 변경에 대한 방법은 아래 useState를 참고하자.
[요약]
- 변수는 컴포넌트 렌더링에 영향을 주지 않는다.
- 또한, 변수의 변화는 리렌더링을 일으키지 않는다.
- 렌더링 사이에 데이터 유지, 리렌더링 진행을 위해 state를 사용해야한다.
03. state vs props
| state | props |
|---|---|
| 렌더링 돼야하는 컴포넌트의 데이터를 저장 | 자식 컴포넌트에게 전달되는 데이터 |
| 데이터를 보유하고, 변경 가능성이 있다 | props는 변경될 수 없다 |
| 일반적으로 이벤트 핸들러로 업데이트 | 부모 컴포넌트에서 설정/업데이트 |
04. state 특징
- state 는 자신이 속한 컴포넌트에 종속적이다. 즉, 다른 컴포넌트(같은 컴포넌트가 두번 작성된 경우도 포함)에 속한 state는 서로 독립적으로 작동한다. ▶️ 관련된 트러블 슈팅 보러가기
- 상위 컴포넌트에서도 하위 컴포넌트의 state가 어떻게 작동하는지 알 수 없다.
- 부모 컴포넌트의 state가 변경되었을 때, 자식 컴포넌트에서 적용시키려면 props drilling, Context API와 같은 방법을 사용해야한다.
2. state 업데이트하기🔊
01. useState란?
useState는 state 를 컴포넌트에 추가할 수 있도록 해주는 React Hook으로, 현재의 state 값과 state 값을 업데이트하는 함수를 반환하는 함수이다.
useState는 배열을 반환하며, 첫번째 요소는 state 값 / 두번째 요소는 해당 state를 변경하는 함수(setter 함수 )가 반환된다. 상태값 변수명과 변경 함수명을 쉽게 지정하기 위해 구조 분해 할당 문법을 활용한다.
useState의 인자값으로 초기 값을 넘겨줄 수 있으며 원시 값, 객체 뿐만 아니라 콜백 함수도 초기 값으로 넣어줄 수 있다.
*Hook이란? : Hook은 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수
02. useState 사용법
const [변수명, set함수명] = useState(초기값)
//sample
const [name, setName] = useState('')03. state 업데이트 특징
- state 값이 변경되었을 경우 React 에서는 해당 컴포넌트를 리렌더링하게 된다. 이 때, 불필요한 리렌더링을 방지하기 위해 state를 변경하는 작업을 "일괄적"으로 처리한다. 이를 Batch Update 이라고 한다.
- React 에서 컴포넌트를 렌더링은 함수형 컴포넌트를 호출하는 것과 동일하다. 렌더링이 될 때, state를 활용하여 props, 이벤트 핸들러, 지역변수를 계산하고 최종값을 반환한다. 그리고 그걸 바탕으로 JSX가 최종적으로 반환되는 것이다. 이 때, React 는 컴포넌트 함수가 호출된 "순간"의 state 값 (aka 스냅샷) 을 제공하며, state는 다음 렌더링 이전까지 변하지 않는다.
- 만약 setter 함수의 인자에 값이 아닌 함수를 넣게 된다면, React 에서는 이를
updater function으로 인식한다. React 는 Batch Update를 통해 state 업데이트를 일괄 수행하는데, 만약updater function이 인자로 들어왔다면 해당 함수의 return 값을 다음 update 작업에 인계한다.
