State

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

state와 props는 둘 다 object 이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 한다.

props 는 컴포넌트를 사용하는 부모 쪽에서 전달해야만 사용할 수 있고(함수의 parameter 치럼) 읽기 전용이다.

state 는 컴포넌트 내에서 정의하고 사용하며 업데이트 할 수 있다. 이름은 원하는대로 지을 수 있고 한 개가 아닌 여러 개의 state를 추가할 수 있다.

// 버튼을 눌렀을 때 state 를 변화시켜서 보여줘야할 텍스트를 바꾸는 코드

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)

• 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이 달려있는 <button />를 클릭할 때마다, 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 속성이 추가된다.