[React] 6. useState()를 파헤쳐 보기

안녕하세요. 박기린입니다.

이번에는 React 컴포넌트의 데이터 관리와 출력을 위해 사용되는 React Hooks - useState에 대해 알아보겠습니다.

 

 

Import useState 

import { useState } from "react";

React hooks는 react 모듈에서 import 할 수 있습니다.

 

 

 

---

useState 파헤쳐 보기

const ExpenseItem = (props) => {
  const [title, setTitle] = useState(props.title);
  
  const clickHandler = () => {
    setTitle('Updated!'); 
    console.log(title) 
  }
}

const [ state이름 , set + State이름 ] = useState( 초기값 );

대괄호 안의 값 : [ currentStateValue , updateFunctionValue ]

- React Hooks는 단어가 'use'로 항상 시작됩니다.

- React Hooks는 컴포넌트 함수 내부에서 사용되어야 합니다.

- useState는 [배열]을 반환합니다. [배열]의 [첫 번째 요소에는 state 변수 그 자체, 두 번째 요소에는 state 변수를 업데이트하는 함수]가 담겨 있습니다. 이를 배열을 비구조화해서 사용합니다.

- 이름 짓기 관행으로, 두 번째 요소인 업데이트 함수에는 'set' 키워드를 state이름 앞에 꼭 붙여줍니다. 그리고 state의 이름은 camelCase에 맞춰서 첫 글자를 대문자로 적어줍니다.

 

 

 

 

---

굳이 state를 사용하는 이유가 뭔가요?

const [title, setTitle] = useState('none');
setTitle('hello');

// or

let title = 'none';
title = 'hello';

굳이 'let, var'을 이용해서 변수를 선언하는 것이 아니라, state를 선언해야 할 필요가 있을까 궁금할 수 있습니다. 그 이유에 대해 설명하겠습니다.

useState를 통해서 특별한 종류의 변수를 생성합니다. 이 변수는 값을 변경할 때 'set'으로 이름이 시작하는 setState() 함수를 사용합니다. setState() 함수를 사용하면, 해당 state가 포함된 모든 컴포넌트들이 다시 호출됩니다. 그때, 컴포넌트에 변경된 변수 값을 새롭게 넣어서 DOM을 출력하라고 신호를 보냅니다. 그래서 UI가 setState()를 통해 바로바로 state 값이 업데이트되어 출력됩니다.

 

 

 

 

---

비동기로 작동하는 setState()

const [title, setTitle] = useState('none');

const exampleFunction = () => {
  setTitle('hello');
  console.log(title); 
}

exampleFunction(); // 출력 : 'none'

 

 

React 컴포넌트 내부에서 이 코드를 실행하면, console에 'hello'가 아니라 'none'이 출력됩니다. 즉, setState()의 변경사항이 바로 작용되지 않습니다. 왜 그럴까요?

왜냐하면, setState()는 비동기로 작동하기 때문입니다. 바로 state 값을 바꾸지 않고, 일단 업데이트를 예약합니다. 그리고 이벤트 핸들러(함수)가 종료되면 예약된 업데이트가 실행됩니다.

위 코드의 경우, exampleFunction() 이라는 이벤트 핸들러가 다 종료되면, JS엔진에 의해 효율적으로 title state가 갱신됩니다. 

 

 

비동기로 처리되는 이유는,

1. 만약 한 핸들러 함수 안에 여러 개의 setState()가 있을 경우
2. 전부 schedule에 예약을 걸어둔 후
3. 한꺼번에 state를 업데이트하고
4. 그렇게 업데이트가 끝난 state를 UI에 적용하기 때문입니다.

이렇게 하면, setState()마다 여러 번 UI를 변경할 필요 없이, 최종에 딱 한 번만 UI를 업데이트하면 됩니다. 그래서 여러 번 렌더링 할 거를 한 번으로 줄일 수 있습니다.

 

 

 

 

---

const 키워드를 사용하는 이유

const [title, setTitle] = useState('none');
setTitle('hello');

title, setTitle을 비구조화 할 때 const 키워드를 사용합니다. setTitle은 함수이니 그렇다 쳐도, title 값은 변할텐데 const를 써도 될까요?

답은 '네' 입니다.

 

title은 할당 연산자(=)를 이용해서 값을 할당하지 않습니다. 오로지 setTitle()만을 이용해서 값을 변경합니다.

setTitle()은 title이 포함된 모든 컴포넌트를 바뀐 값(최신 state 값)에 기반하여 새로 실행합니다. 즉, title의 값을 변경하는 것이 아니라, title 값을 아예 초기화 한 후 새로 선언하는 구조입니다.

 

그리고 title에 할당 연산자(=)를 사용하는 오류를 범하지 않기 위해서 상수로 선언합니다.

 

 

 

 

---

공식 Docs

이미지 클릭 시 이동