useState 는 React를 공부하면서 자주 봐왔고 사용했습니다. 하지만 정작 누군가에게 useState가 어떤 것인지 설명을 해 달라는 요청을 들었을 때 제대로 설명하지 못하는 저를 보며 useState 에 대해 다시 한번 자세하게 공부하고 싶고 잘 알려주고 싶어 React 공식 문서를 참고하여 작성하게 되었습니다.
📌 useState 란?
React 공식 문서를 참고하면
useState훅은 다음과 같은 두 가지를 제공한다고 합니다.
1. 렌더링 간에 데이터를 유지하기 위한 state 변수.
2. 변수를 업데이트하고 React가 컴포넌트를 다시 렌더링하도록 유발하는 state setter 함수
*여기서 state는 컴포넌트의 상태를 말합니다.
📌 useState 해부하기
useState를 호출하는 것은, React에 이 컴포넌트가 무언가를 기억하기 원한다고 말하는 것입니다.
const [index, setIndex] = useState(0);이 경우 React가 index 를 기억하기를 원한다는 뜻입니다.
useState 의 유일한 인수는 state 변수의 초깃값입니다. 이 예시에서 index 의 초깃값은 useState(0) 에 의해 0 으로 설정됩니다. 컴포넌트가 렌더링 될 때마다, useState 는 다음 두 개의 값을 포함하는 배열을 제공합니다.
- 저장한 값을 가진 state 변수(
index). - state 변수를 업데이트하고 React에 컴포넌트를 다시 렌더링하도록 유발하는 state setter 함수(
setIndex).
실제 작동 방식은 다음과 같습니다.
const [index, setIndex] = useState(0);- 컴포넌트가 처음 렌더링 된다.
index의 초깃값으로useState를 사용해서0을 전달했으므로[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는 격리되고 비공개로 유지된다.
setState에 대해 깊이 알기 위해서는 당연하게도 State에 대해 깊이 알아야 합니다. State는 동일한 컴포넌트를 두 번 렌더링한다면 각 복사본은 완전히 격리된 state를 가집니다. 즉, 복제된 두 개의 state가 있을 때 하나를 변경해도 다른 하나에는 영향을 미치지 않습니다.
State는 특정 함수 호출이나 코드 내의 특정 위치와 관련이 없습니다. 대신, 화면의 특정 위치에 지역적 입니다. Props와 달리 state는 선언한 컴포넌트에 완전히 비공개입니다. 부모 컴포넌트는 이를 변경할 수 없습니다. 이로써 다른 컴포넌트에 영향을 미치지 않고 어떤 컴포넌트에든 state를 추가하거나 제거할 수 있습니다.
만약 두 개의 갤러리가 state를 동기화하기를 원한다면, React에서 올바른 방법은 자식 컴포넌트에서 state를 제거하고 가장 가까운 공통의 부모 컴포넌트에 추가하는 것이다.
요약
state는 컴포넌트에서 비공개이다. 두 곳에서 렌더링하더라도 각각의 복사본은고유한 state를 가진다.
