[React] Component의 State

🚶🏻‍♀️ State

State란 말 그대로 컴포넌트의 상태 값이다.

state와 props는 둘 다 object이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 한다. props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고(함수의 파라미터처럼) 읽기 전용이다.

import { useState } from "react";
import ReactDOM from "react-dom";

function Button(props) {
  const [isClicked, setIsClicked] = useState(false);

  return (
    <button className="btn" onClick={() => setIsClicked(!isClicked)}>
      {isClicked ? "좋아요" : "싫어요"}
    </button>
  );
}

ReactDOM.render(<Button />, document.getElementById("root"));

1. <const [isClicked, setIsClicked] = useState(false);>

-isClicked라는 하나의 state만 있지만, 여러 개의 state를 추가할 수 있다.
state의 이름은 원하는대로 지을 수 있다.

• useState를 통해서 isClicked라는 state와, setIsClicked라는 state를 업데이트 할 수 있는 함수를 선언했다.
• useState의 인자로 false를 전달해서 isClicked의 초기값이 false가 되도록 설정했다.

::설명

• isClicked라는 state를 선언하는 코드이다.
• 함수형 컴포넌트에서 state를 만들때는 useState라는 함수를 이용한다.
• useState의 인자로 전달된 값은 선언된 state의 초기값으로 할당된다.
• useState의 실행 결과는 좌측에 [state, state를 갱신할수 있는 함수]배열 형태로 리턴된다.
• useState의 리턴값을 배열 구조 분해 할당문법을 이용해서 각각 isClicked와 setIsClicked라는 이름으로 선언했다.

2. onClick={() => setIsClicked(!isClicked)}

• onClick이 있는 을 클릭할 때마다, isClicked 상태가 true나, false로 업데이트 된다.

::설명

• click하면 isClicked이라는 state를 수정한다. setIsClicked함수로 state를 업데이트할 수 있다.
• setIsClicked함수의 인자로 전달된 값으로 isClicked값이 업데이트 된다.
• !isClicked으로 인자로 전달해 업데이트 한다는 말은, 현재 isClicked의 반대로(true면 false로, false면 true로) 저장한다는 말이다.
• 위의 코드로 인해 button에 click event가 발생할 때마다 isClicked state가 업데이트 된다.

🚶🏻‍♂️ props와 state

import { useState } from "react";
import ReactDOM from "react-dom";
import "./index.css";

function Button(props) {
  const [isClicked, setIsClicked] = useState(false);

  return (
    <button
      className={`btn ${props.type === "like" ? "like" : ""}`}
      onClick={() => setIsClicked(!isClicked)}>
      {isClicked ? "좋아요" : "싫어요"}
    </button>
  );
}

ReactDOM.render(<Button type="like" />, document.getElementById("root"));

<button "/">에 type을 추가했고, button컴포넌트에서 props로 받을 수 있다.

props.type이 'like'이면 like-btn이라는 class속성이 추가된다. 미리.like-btn에 배경색이 나오도록 css는 추가해 두었다.