[React Hook] useState

 

import 후 사용

import { useState } from "react";

 

 

'useState()' 는 '[상태값, 상태값 업데이트 함수]' 를 반환.

자바스크립트의 비구조화 할당 (destructuring assignment) 문법이 적용되어 있다.

 

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

위의 예시에서 'value' 에는 "초기값" 이, 'setValue' 함수에는 상태를 업데이트 하는 함수가 할당된다.

따라서 setValue 로 상태를 업데이트 하는 함수를 호출해서 상태값을 변경할 수 있다.

setValue("새로운값")

 

비구조화 할당 이해를 위해 간단하게 표현하자면 아래와 같은 방식.

const useState = ("새로운값") => {
  
  // state저장 및 변경로직(setState함수)
  
  return [state, setState];
};

---

* 실제 동작 코드는 다름 *

https://seokzin.tistory.com/entry/React-useState%EC%9D%98-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC%EC%99%80-%ED%81%B4%EB%A1%9C%EC%A0%80

[React] useState의 동작 원리와 클로저

 

---

 

* 변수 대신 state를 사용하는 이유?

변수와 다르게 state가 변경되면 html이 자동으로 재렌더링 (자동으로 html에 반영) 된다.

자주 변경될것 같은 html 부분은 state로 만들기.

 

---

 

* state함수는 같은 값에 대해서는 다시 렌더링을 하지 않음 *

 

 

 

  const [value, setValue] = useState(["first", "second", "third"]);

// ....(생략)

      <List>
        <p>{value[0]}</p>
      </List>
      <List>
        <p>{value[1]}</p>
      </List>
      <List>
        <p>{value[2]}</p>
      </List>
      <Button>버튼</Button>

=> 버튼을 눌렀을 때 첫번째 값만 'first' --> 'change' 로 변경하려고 할 때,

 

  const [value, setValue] = useState(["first", "second", "third"]);

// ....(생략)

      <List>
        <p>{value[0]}</p>
      </List>
      <List>
        <p>{value[1]}</p>
      </List>
      <List>
        <p>{value[2]}</p>
      </List>
      <Button
        onClick={() => {
          value[0] = "change";
          setValue(value);
        }}
      >
        버튼
      </Button>

위처럼 원래의 데이터를 직접 변경하게 되면 작동하지 않는다.

value가 배열이고 자바스크립트에서 배열/객체는 참조형 데이터이기 때문! (데이터가 저장된 메모리의 주소를 참조)

배열의 값은 변경되었지만 value가 참조하는 주소는 변경되지 않았기 때문에, 상태변경을 감지하지 못한다. 

( React는 상태객체(ex_ value)의 참조변경을 감지. )

다시 말해 setValue(value) 함수는 value의 참조값이 변하지 않았기 때문에 렌더링을 하지 않는다.

 

  const [value, setValue] = useState(["first", "second", "third"]);

// ....(생략)

      <List>
        <p>{value[0]}</p>
      </List>
      <List>
        <p>{value[1]}</p>
      </List>
      <List>
        <p>{value[2]}</p>
      </List>
      <Button
        onClick={() => {
          const copy = [...value];
          copy[0] = "change";
          setValue(copy);
        }}
      >
        버튼
      </Button>

따라서 위처럼 새로운 배열/객체를 생성하여 state함수에 넣어주면 상태변경을 감지한다.

(위에서 spread 문법으로 복사한 copy는 원래의 객체(value가 참조하는 객체)가 아닌 새로운 객체를 참조하게 된다.

즉, copy와 value는 각각 별도의 객체를 참조하여 각 배열요소가 변경되어도 서로 영향을 주지 않는다.)

 

버튼을 눌렀을 때 첫번째 값이 잘 변경된다.