[React] state

1. state란?

state란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. props와 다른 점은 props는 컴포넌트에 전달되는 반면 state는 컴포넌트 내부에서 관리됩니다.

 

2. useState

컴포넌트 내에 state를 만들 때 useState Hook을 사용합니다.

Hook 이란?  리액트 내에서 사용되는 메서드를 React Hook이라고 합니다.

const [value, setValue] = useState("초기값");

import React, { useState } from 'react';

function StudentName() {
  const [name, setName] = useState(""); // 이것이 state!
  return <StudentList studentName={name} />;
}

 

3. setState

state의 값을 변경해주고 싶을 때는 setState Hook을 사용합니다.

setValue('바꾸고 싶은 값')

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("길동이");

  function onClickHandler() {
    setName("누렁이"); // 2. setState 훅이 실행되면서 "누렁이"로 이름이 변경됩니다.
  }

  return (
    <div>
      {name}
      <button onClick={onClickHandler}>버튼</button> // 1.버튼을 클릭하면 onClickHandler가 실행되고 
    </div>
  );
}

export default App;

 

4. State변경 시 유의사항

state에 저장된 메모리값의 불변성을 유지해주어야 합니다.  리액트에서는 state의 값이 변경되면 화면을 리렌더링 합니다. 이때 state의 변경 사항이 발생하는것을 확인하는 방법은 state변화 전 후의 메모리 주소를 비교합니다. 그래서 만약 리액트에서 메모리의 불변성을 지켜주지 않고, 직접 수정을 가하면 값은 바뀌지만 메모리 주소는 그대로이기 때문에 state가 변경된 것을 인식하지 못하고 리렌더링이 일어나지 않습니다. 

 

리액트 불변성을 지키는 방법

배열을 setState 할 때 불변성을 지켜주기 위해, 직접 수정을 가하지 않고 전개 연산자를 사용해서 기존의 값을 복사하고, 그 이후에 값을 수정하는 식으로 구현합니다.

import React, { useState } from "react";

function App() {
  const [name, setName] = useState(["길동이"]);

  function onClickHandler() {
		// spread operator(전개 연산자)를 이용해서 name을 복사합니다. 
	  // 그리고 나서 항목을 추가합니다.
    setName([...name, "흥부"]);
  }

  console.log(name); // ['길동이','흥부']
  return (
    <div>
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;