# 174 [udemy React 완벽 가이드 노트] class기반 컴포넌트에서 state및 이벤트 작업하기

Jenner 2022. 9. 29. 18:25

함수형 컴포넌트 예시

Users 컴포넌트

import { useState } from "react";
import User from "./User";

import classes from "./Users.module.css";

const DUMMY_USERS = [
  { id: "u1", name: "Max" },
  { id: "u2", name: "Manuel" },
  { id: "u3", name: "Julie" },
];

const Users = () => {
  const [showUsers, setShowUsers] = useState(true);

  const toggleUsersHandler = () => {
    setShowUsers(curState => !curState);
  };

  const usersList = (
    <ul>
      {DUMMY_USERS.map(user => (
        <User key={user.id} name={user.name} />
      ))}
    </ul>
  );

  return (
    <div className={classes.users}>
      <button onClick={toggleUsersHandler}>
        {showUsers ? "Hide" : "Show"} Users
      </button>
      {showUsers && usersList}
    </div>
  );
};

export default Users;

1. render 메서드는 작성하는 법을 알았으니 그대로 해준다.

2. toggleUsersHandler를 사용해보자.

클래스 기반 컴포넌트로 변경할 때

render 메서드 안에 함수를 추가하는 방식을 사용하지 않는다.

(작동할 수 있겠지만 오류날 수 있다)

보통 그룹화 하여 메서드를 정의한다.

class Users extends Component {
  toggleUsersHandler() {
    
  }

  render() {
    return (
      <div className={classes.users}>
        <button onClick={toggleUsersHandler}>
          {showUsers ? "Hide" : "Show"} Users
        </button>
        {showUsers && usersList}
      </div>
    );
  }
}

state관리 방식

그런데 state가 없다.

class 기반 컴포넌트에서는

초기화, 상태정의 두가지 단계로 state를 관리한다.

클래스 컴포넌트에서 state를 정의할 때는

constructor를 사용한다.

생성자 함수는 클래스가 인스턴스화 할때,

리액트가 컴포넌트로 사용되는 클래스를 만날 때

자동적으로 호출된다.

생성자 에서는 상태 초기화 같은 초기화 작업을 할 수 있다.

클래스 컴포넌트에서는 state가 중요하다.

항상 객체형태다. (함수형에서는 숫자, 불리언 등 어느 type이 올 수 있다)

그리고 항상 한 개다.

함수형에서는 여러개를 만들 수도 있고, 한개의 state에 객체를 넣어 그룹화도 가능하지만

클래스 컴포넌트에서는 state끼리 서로 관련이 없더라도 반드시 한 개의 객체로 만들어야 한다.

class Users extends Component {
  constructor() {
    this.state = {}
  }

state를 변경할 때

이런식으로 하면 안 된다.

class Users extends Component {
  constructor() { 
    super();
    this.state = {
      showUsers: true,
    };
  }
  toggleUsersHandler() {
    this.state.showUsers = false
  }

아래와 같이 setState를 사용하는데,

기존의 상태값에 병합시키는 방식이다.

여러개의 스테이트가 있는 경우,

한가지만 써도 다른 상태값은 손실되지 않는다.

class Users extends Component {
  constructor() {
    super();
    this.state = {
      showUsers: true,
      more: "Test",
    };
  }
  toggleUsersHandler() {
    this.setState({ showUsers: false });
  }

이러면 this.state.more은 없어지지 않는다.

또한 함수형으로 이전의 상태값을 참조하여 state를 갱신할 수 있다.

class Users extends Component {
  constructor() {
    super();
    this.state = {
      showUsers: true,
      more: "Test",
    };
  }
  toggleUsersHandler() {
    this.setState(curState => {
      return { showUsers: !curState.showUsers };
    });
  }

그런데 return 하는 것은 객체이므로 객체를 꼭 넣어 주어야 한다.

마지막으로 확인

메소드 안의 this예약어가 그 주위를 둘러싼 클래스를 참조하고 있는지 확인하는 것

그런데 클릭 이벤트 등을 통해 메서드가 호출되어도

동작하지 않는다.

<button onClick={this.toggleUsersHandler.bind(this)}>

이렇게 bind(this)를 해야 한다.

메서드 내부의 this 예약어가

코드가 평가될 시점의 동일한 값이나 동일한 내용을 갖도록 설정된다.

this 예약어는 this클래스를 참조한다는 의미가 된다.