[React] state

리액트에서 자주 변경되고, 변경된 값이 화면에 출력돼야하는 값이 필요할 때 state를 활용할 수 있다.

 

useState

react hook 이라고 한다. 이 개념은 추후 자세히 알아볼 예정!

 

const test = useState("초기값");

// test: 
[
  변수: "변수값",
  변수를 변경할 수 있는 함수: function() {},
]

// 따라서 아래와같이 사용할 수 있음 (Destructuring)
const [name, setName] = useState('Kim');

 

 

제어 컴포넌트

import { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  const onChangeHandler = (event) => {
    const inputValue = event.target.value;
    setValue(inputValue);
  };

  return (
    <div>
      <input type="text" onChange={onChangeHandler} value={value} />
    </div>
  );
};

export default App;

input 태그에서 input 필드의 값을 받아 setValue 해주는 onChange 이벤트를 등록했고, 보여지는 값(value)를 state value로 연결시켜줬다. 이러한 패턴을 제어 컴포넌트(Controlled Component)라고 한다. (리액트에 의해 값이 제어됨)

 

source of truth

: 어떤 정보의 정확하고 최신화된 상태를 유지하는 주된 위치/저장소

 

리액트의 state가 input의 value가 변경된 상태를 관리하고 있으므로 위의 예시에서 리액트가 소스 오브 트루스 역할을 한다고 할 수 있다.

데이터의 일관성/정확성을 유지하기위해 필수적인 개념이다.

 

비제어 컴포넌트

input의 value에 state를 연결시키지 않는 경우 이를 비제어 컴포넌트라고 하는데, 아래 관점을 주의하는 것이 좋다.

 

상태 업데이트 지연

- setValue와 같은 state를 업데이트 시키는 함수는 비동기함수이다.

- 만약 onChanged로 setValue를 호출하고, 변경된 value를 이용해 다른 동작을 수행할 경우 변경 전 값이 사용될 수 있다.

import React, { useState } from "react";

const App = () => {
  const [inputValue, setInputValue] = useState("");

  const onChangeHandler = (event) => {
    setInputValue(event.target.value);
    console.log(inputValue);  // 변경 전 값 출력
  };

  return (
    <div>
      <input type="text" onChange={onChangeHandler} />
      <p>입력값: {inputValue}</p> {/* 입력값을 화면에 표시 */}
    </div>
  );
};

export default App;

 

때에 따라 비제어 컴포넌트가 성능상의 이점이 있을 수 있지만, 입력 필드의 값을 예측 가능한 값으로 관리하기 위해 제어 컴포넌트 방식을 사용하는 것이 좋다!

 

 

 

불변성

: 메모리에 있는 값을 변경할 수 없는 것

 

 

불변성을 깨는 것이 문제가 되는 이유

1) 예측 불가능한 코드

- 데이터를 직접 변경할 수 있게 하는 경우, 프로그램의 다른 부분에서 해당 데이터 구조를 참고하고 있을 때 그 부분들도 예상치 못한 방식으로 변경될 수 있다.

- 이는 알 수 없는 버그, 동작 예측의 어려움으로 이어질 수 있다.

 

2) 버그 추적의 어려움

- 원본이 여러 곳에서 변경될 수 있다면 큰 코드베이스나 여러 개발자가 협업하는 환경에서 특히 문제가 될 수 있다.

 

불변성을 유지하는 방법 (Immutable way)

// 불변성을 깨트리는 경우
const arr = [1, 2, 3];
arr.push(4);

// 불변성을 유지하는 경우
const arr = [1, 2, 3];
const newArr = [...numbers, 4];