[React] State / useState

안치영·2022년 10월 7일
0

React

목록 보기
5/15

state / useState

🔥 state?

state란 컴포넌트 내부에서 바뀔 수 있는 값을 말한다.

그리고 우리는 useState라는 Hook함수를 통해 이 state의 상태를 변경해줄 수 있다.

function GrandFather() {
  const [name, setName] = useState("김할아"); // 이것이 state!
  return <Mother grandFatherName={name} />;
}

위 코드처럼 통상 react에서는 구조분해할당 문법을 통해 useState를 선언하고 사용한다.

그럼 state의 값을 변경하는 방법이 빠질 수 없는데,

🔥 useState로 state값 변경하는 법

import React, { useState } from "react";

function Child(props) {
  return (
    <div>
      <button
        onClick={() => {
          props.setName("박할아");
        }}
      >
        할아버지 이름 바꾸기
      </button>
      <div>{props.grandFatherName}</div>
    </div>
  );
}

function Mother(props) {
  return (
    <Child grandFatherName={props.grandFatherName} setName={props.setName} />
  );
}

function GrandFather() {
//   state의 값/바꾸고싶은값          초기값
  const [name, setName] = useState("김할아");
  return <Mother grandFatherName={name} setName={setName} />;
}

function App() {
  return <GrandFather />;
}

export default App;

useState 선언부를 보게되면 값이 바뀌어야 하는데 const를 쓴다.
let을 사용해야 하지 않나? 라는 생각이 들어서 찾아보니

state변수는 컴포넌트 함수가 실행되면서 매번 새로운 const변수가 실행이 되고, const를 선언함으로써 state변수를 직접수정하는 것을 방지하고, setState를 사용하게 하기 위함이 const로 선언되는 이유이다.

라고 설명이 되어있다.


🔥 useState + onClickEvent 구현

import React, { useState } from "react";

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

  function onClickHandler() { // 클릭됐을때 setName으로 기존 state값 변경
    setName("누렁이");
  }

  return (
    <div>
      {name}
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

🔥 useState + onChangeEvent 구현

import React, { useState } from "react";

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

  const onChangeHandler = (event) => {
    const inputValue = event.target.value; // 사용자가 입력한 input값
    setValue(inputValue);
  };

console.log(value) // value가 어떻게 변하는지 찍어보기

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

export default App;

우리가 state를 사용하다보면 불변성이라는 개념을 빼놓을 수 없다.

🔥 불변성

  • 메모리에 있는 값을 변경할 수 없는것
  • 원시데이터는 불변성이 있고, 객체/배열/함수는 불변성이 없다

원시데이터에 변수 저장의 예

let number = 1 // 메모리에 1이라는 값 저장 -> number는 메모리에있는 1을 참조
let secondNumber = 1 // number의 메모리를 참조함
number === secondNumber // true  (불변성이 있다)
// 데이터 수정시
number = 2 // 메모리에 2가 생기고 number는 메모리에있는 2를 참조
console.log(secondNumber) // 1  -> 현재 number와 secondNumber는 다른 메모리를 참조함

객채,배열,함수 저장의 예

let obj_1 = {name : "kim"}  // 메모리에 obj_1 이 저장
let obj_2 = {name : "kim"} // 메모리에 obj_2 가 저장
obj_1 === obj2 // false (불변성이 없다)
// 데이터 수정시
obj_1.name = "park" // 메모리에 obj_1의 name:'kim' 이라는 값이 name:'park'으로 바뀌어버린다.

왜 리액트에서는 객체,배열,함수의 불변성을 지켜주는게 중요할까?

리액트에서는 화면을 리렌더링 할지말지 결정할때 state의 변화를 확인한다.
state의 변화를 확인하는 방법은 state 변화 전,후의 메모리주소를 비교한다.
그래서 불변성을 지켜주지않으면 state의 변화를 인지하지 못하기 때문에 불변성을 지켜줘야한다.

불변성을 지키면서 사용한 useState 예시

import React, { useState } from "react";

function App() {
  const [dogs, setDogs] = useState(["말티즈"]);

  function onClickHandler() {
		// spread operator(전개 연산자)를 이용해서 dogs를 복사
	  // 그리고 나서 항목 추가
    setDogs([...dogs, "시고르자브르종"]); // 버튼을 누를때마다 말티즈뒤에 시고르자브르종이 계속 찍히는걸 확인할 수 있다.
  }

  console.log(dogs);
  return (
    <div>
{dogs}
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

0개의 댓글