프롤로그
리액트에서 state를 사용하여 상태를 관리하는 이유에 대해
리액트 공식문서를 기준으로 정리해보았다.
더 나아가 그래서 왜 useState 를 쓰는지 알아보고자 한다.
state란 무엇인가
컴포넌트는 상호 작용의 결과로 화면의 내용을 변경해야 하는 경우가 많습니다. 폼에 입력하면 입력 필드가 업데이트되어야 하고, 이미지 캐러셀에서 ‘다음’을 클릭하면 표시되는 이미지가 변경되어야 하며, ‘구매’를 클릭하면 제품이 장바구니에 담겨야 합니다. 컴포넌트는 현재 입력값, 현재 이미지, 장바구니와 같은 것들을 “기억”해야 합니다. React에서는 이런 종류의 컴포넌트별 메모리를 state라고 부른다.
일반 변수가 아닌 state를 사용해야 하는 경우
react는 이 컴포넌트를 두 번째로 렌더링할 때, 지역 변수에 대한 변경 사항을 고려하지 않고 처음부터 렌더링한다.
또한 새로운 데이터로 컴포너트를 다시 렌더링해야 한다는 것을 인식하지 못한다.
따라서, 이벤트 발생 시, 화면에 바로 변경시키고 싶은 데이터는 일반 변수가 아닌 state 를 사용하여, 화면이 렌더링되어 새 데이터로 업데이트 시켜야 한다.
컴포넌트를 새 데이터로 업데이트를 하려면 두 가지 작업이 필요하다.
- 렌더링 사이에 데이터를 유지해야 한다.
- 새로운 데이터로 컴포넌트를 렌더링 하도록 react를 촉발시켜야 한다.
이걸 useState가 가능케 한다.
useState 해석하기
useState 훅은 아래 2 가지를 제공한다.
- 렌더링 사이에 데이터를 유지하기 위한 state변수
- 변수를 업데이트하고 react가 컴포넌트를 다시 렌더링하도록 촉발하는 state 설정자 함수
useState를 호출하는 것은, react에게 이 컴포넌트가 무언가를 기억하기를 원한다고 말하는 것이다.
const [ index, setIndex ] = useState(0);따라서 위의 경우, react가 index를 기억하기를 원하는 것이다.
useState의 유일한 인수는 state 변수의 초기값이다. 이 예제에서는 useState(0)에 의해 index의 초기값이 0으로 설정되어 있다.
useState는 컴포넌트가 렌더링될 때마다 useState는 두 개의 값을 포함하는 배열을 제공한다.
[ 저장한 값을 가진 state 변수(index), state 변수를 업데이트하고 React가 컴포넌트를 다시 렌더링하도록 촉발할 수 있는 state 설정자 함수 (setIndex)]
useState 작동 방식
const [ index, setIndex ] = useState(0);위를 예시로 들어보면
- 컴포넌트가 처음 렌더링된다.
index의 초기값으로 0을 useState에 전달했으므로 [0, setIndex]가 반환된다. React는 0을 최신 state 값으로 기억한다. - state를 업데이트한다.
사용자가 버튼을 클릭하면 setIndex(index + 1)를 호출한다. index는 0이므로 setIndex(1)이다. 이렇게 하면 React는 이제 index가 1임을 기억하고 다음 렌더링을 촉발한다. - 컴포넌트가 두 번째로 렌더링된다.
React는 여전히 useState(0)을 보지만, index를 1로 설정한 것을 기억하고 있기 때문에, 이번에는 [1, setIndex]를 반환한다.
state의 특성
state는 동일한 컴포넌트를 두 군데에서 렌더링하면 각 사본은 완전히 격리된 state를 갖게 된다!
이 중 하나를 변경해도 다른 컴포넌트에는 영향을 미치지 않는다.
예를 들면 Gallery 컴포넌트가 로직을 변경하지 않고 두 군데에서 렌더링되어있다. 각 갤러리 내부의 버튼을 클릭해 보면, 각각의 state가 독립적인 것을 확인할 수 있다.
App.js
import Gallery from './Gallery.js';
export default function Page() {
return (
<div className="Page">
<Gallery />
<Gallery />
</div>
);
}
import { useState } from 'react';
export default function Gallery() {
const [index, setIndex] = useState(0);
const [showMore, setShowMore] = useState(false);
function handleNextClick() {
setIndex(index + 1);
}
function handleMoreClick() {
setShowMore(!showMore);
}
let sculpture = sculptureList[index];
return (
<section>
<button onClick={handleNextClick}>
Next
</button>
<h2>
<i>{sculpture.name} </i>
by {sculpture.artist}
</h2>
<h3>
({index + 1} of {sculptureList.length})
</h3>
<button onClick={handleMoreClick}>
{showMore ? 'Hide' : 'Show'} details
</button>
{showMore && <p>{sculpture.description}</p>}
<img
src={sculpture.url}
alt={sculpture.alt}
/>
</section>
);
}
위의 예시를 보면, 일반 변수와 다르게 , state는 특정 함수 호출에 묶이지 않고, 코드의 특정 위치에 묶이지 않지만, 화면상의 특정 위치에 지역적이다. Page컴포넌트에서 두 개의 컴포넌트를 렌더링했으나, 해당 state들은 별도로 저장되어, 서로 영향을 끼치지 않고 작동한다.
Page 컴포넌트는 Gallery의 state뿐 아니라 심지어 state가 있는지 여부조차 전혀 알지 못한다는 점이 주목할만 하다. props와 달리 state는 이를 선언하는 컴포넌트 외에는 완전히 비공개이며, 부모 컴포넌트는 이를 변경할 수 없다. 따라서 다른 컴포넌트에 영향을 주지 않고 state를 추가하거나 제거할 수 있다는 것이 장점이다.
왜 사용할까?
-
useState을 사용하면 상태 관리를 간결하게 할 수 있으며, 복잡한 로직을 캡슐화하여 훅으로 분리할 수 있다.
-
useState 훅은 컴포넌트의 개별적인 상태 조각을 관리한다. 이는 여러 상태 값들이 한 컴포넌트 내에서 독립적으로 관리될 수 있음을 의미한다.
-
useState를 사용하면 컴포넌트의 특정 부분만을 리렌더링할 수 있어, 애플리케이션의 성능을 최적화할 수 있다.
참고 자료 :
https://react-ko.dev/learn/state-a-components-memory
