[React] Props & State

State

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

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

 

state는 변수 대신 쓸 수 있는 데이터 저장공간이다. useState()를 이용해 사용해야한다 useState[a,b]에서

a는 state 데이터, b는 state 데이터 변경 함수이다

state에 데이터를 저장해놓는 이유

• 웹이 앱처럼 동작하게 만들고 싶어서
• state는 변경되면 HTML이 자동으로 재렌더링 된다
• HTML이 새로고침 없이도 스무스하게 변경된다

자주 바뀌는 중요한 데이터는 변수 말고 state로 저장해서 사용!

아래의 예시는 버튼을 눌렀을 때, 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"));

**const [isClicked, setIsClicked] = useState(false)**

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

설명:

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

**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

React 컴포넌트에서는 input을 props라고 말한다는 걸 뜻한다. 이번에는 props도 넣어보는 예시를 들겠다. <Button />에 type을 추가했고, Button 컴포넌트에서 props로 받을 수 있다

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-btn" : ""}`}
      onClick={() => setIsClicked(!isClicked)}>
      {isClicked ? "좋아요" : "싫어요"}
    </button>
  );
}

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

• props.type이 ‘like’ 이면 like-btn이라는 class 속성이 추가된다