React) State

1. State란?

리액트에서 State는 컴포넌트 내부에서 지속적으로 변할 수 있는 값을 의미한다.

개발자의 의도대로 변할 수 있으며 사용자의 입력에 따라 새로운 값으로 변경할 수 있다.

state가 변경되면 React가 자동으로 계산해 변경된 부분을 리렌더링 한다.

props는 부모 컴포넌트로 부터 받아 자식 컴포넌트에서 변경이 불가능하고 읽기만 가능한 값이다.

 

 

2. 함수형 컴포넌트에서 useState을 사용해 state 관리하기

함수형 컴포넌트에서 state를 관리하기 위해 useState를 사용한다.

import { useState } from "react";
 
const App = () => {
  const [value, setValue] = useState("");
  ...
}

위의 코드에서 useState를 이용해 value라는 state를 관리하는 것을 볼수 있습니다.

 

2.1 state의 변경은 직접 하지 않기

state 변경은 직접하지 말아야 한다.

value = 'hello?';

이렇게 stete 값을 변경 하면 안된다!

직접 변경하게 되면 React가 컴포넌트를 다시 리렌더링할 타이밍을 감지하지 못하게 된다.

 

2.2 state값 변경하는법은 세터함수

state 값을 변경은 세터함수(set~)를 이용해야 한다.

// 방법 1
setValue(value + 1);

// 방법2
setValue((val) => val + 1);

위와 같이 세터함수를 이용해 두 가지 방식으로 state 값을 변경할 수 있다.

세터함수가 반환하는 값으로 state가 변경된다.

현재 값을 기반으로 변경하고자 하면 IIFE를 이용하는 것이 좋다.

 

 

2.3 배열 혹은 객체 타입의 state를 관리하는 법

배열 혹은 객체 타입의 state를 변경하기 위해서는 얕은 복사를 하고 값을 변경해 줘야한다.

// 🚩 다음과 같은 state의 객체를 변형하지 마십시오:
form.firstName = 'Taylor';

이렇게 바로 변경하지 말고 아래와 같이 얕은 복사 이후 변경하도록 하자

// ✅ 상태를 새 개체로 바꿉니다
setForm({
  ...form,
  firstName: 'Taylor'
});

펼침 연산자를 이용해 객체나 배열을 얕은 복사할 수 있다.

 

 

3. 참고 링크

• https://react.dev/reference/react/useState#im-trying-to-set-state-to-a-function-but-it-gets-called-instead
• https://lakelouise.tistory.com/260
• https://github.com/uberVU/react-guide/blob/master/props-vs-state.md

 

 

이후 Hooks를 정리할 때 useState에 대해 자세하게 다뤄볼 예정이다.