함수 컴포넌트와 useState

🔍함수 컴포넌트에서 useState 사용하기

리액트 16.8이전버전에서는 함수 컴포넌트에서 state를 사용할 수 없었지만

useState함수를 사용하여 함수 컴포넌트에서도 state를 사용할 수 있게 되었답니다.

또한 useState를 사용하는 과정에서 Hooks라는 것을 사용하게됩니다.

---

🔍useState 사용해보기

 

import React from "react";
import { useState } from "react";

const Say = () => {
  const [message, setMessage] = useState("");
  const onClickEnter = () => setMessage("안녕하세요");
  const onClickLeave = () => setMessage("안녕히가세요");
  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </div>
  );
};

export default Say;

 

먼저 import 구문을 통해 useState를 import해옵니다.

 

🙄useState?

인자로 받는것 : 상태의 초기값
**클래스형 컴포넌트의 state 초깃값은 객체 형태여야 하지만
useState에서는 값의 형태가 자유롭습니다.

호출하면?
배열이 반환됩니다.
배열의 첫번째 원소는 현재상태
배열의 두번째 원소는 상태를 바꾸어주는 함수입니다.

두번째 원소의 함수를 Setter함수라고 부릅니다.

배열 비구조화할당을 통해 원소의 이름을 자유롭게 지정가능합니다.
위예제에서는 message와 setMessage로 원소이름을 지정했습니다.

 

---

 

🔍한 컴포넌트에서 useState를 여러번 사용하기

 

useState는 한 컴포넌트에서 여러번 사용해도 상관이 없어요

위 예제에서 useState를 좀 더 추가해보겠습니다.

 

import React from "react";
import { useState } from "react";

const Say = () => {
  const [message, setMessage] = useState("");
  const onClickEnter = () => setMessage("안녕하세요");
  const onClickLeave = () => setMessage("안녕히가세요");

  const [color, setColor] = useState("black");
  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1 style={{ color }}>{message}</h1>
      <button style={{ color: "red" }} onClick={() => setColor("red")}>
        빨강색
      </button>
      <button style={{ color: "green" }} onClick={() => setColor("green")}>
        초록색
      </button>
      <button style={{ color: "blue" }} onClick={() => setColor("blue")}>
        파랑색
      </button>
    </div>
  );
};

export default Say;

 

색상을 담당할 useState를 만들어줬습니다.

버튼에 onclick이벤트가 발생하면 setcolor의 상태를 바꿔주는 코드입니다.

 

---

🔍useState 사용시 주의할 점

 

state 값을 바꾸어야 할 때는 setState 혹은 useState를 통해 전달받은 세터함수를 사용해야합니다.

 

잘못된 코드 예시

const [object, setobject] = useState({a:1,b:1})
object.b = 2;

이렇게 세터함수를 사용하지 않고 직접 접근해서 값을 수정해서는 안된다는 뜻

 

근데 그럼 배열이나 객체를 업데이트해야할때는 어케함?

1. 배열 혹은 객체의 사본을 만든다.
2. 사본에 값을 업데이트해준다.
3. 그 사본의 상태를 세터함수를 통해 업데이트한다.

이 과정을 통해 업데이트해주면 된다고 합니다.

 

배열 업데이트는 filter, map 같이 원본 배열을 안건드리는 함수들을 사용하면 쉽게 할 수 있을 것 같은데

객체의 사본을 만들어서 쓰는건 많이 안해본 작업이라 감이 잘 안오네용

const object = { a: 1, b: 2, c: 3 };
const nextObject = { ...object, b: 4 }; //{ a: 1, b: 4, c: 3 }

const array = [
  { id: 1, value: true },
  { id: 2, value: true },
  { id: 3, value: false },
];

let nextArray = array.concat({ id: 4 });
let a = nextArray.filter((item) => item.id !== 2);
let b = nextArray.map((item) =>
  item.id === 1 ? { ...item, value: false } : item
);

 

객체를 복사할때 스프레드연산자를 통해서 사본을 만들면 되는군요