175. State 및 이벤트 작업하기

기술적으로는 가능하지만 올바르게 작동하지 않을 수 있기 때문에 클래스 컴포넌트에서는 render() 메소드 안에 함수를 추가하지 않는다. 

대신에, 이건 클래스기 때문에 클래스 전체를 그룹화해서 내부의 기능을 그룹화할 수 있다.

 

이제 메소드는 만들었는데, 상태가 없군요 예전에는 클래스 컴포넌트의 상태 관리 방법이 지금과는 완전히 달랐다

지금은 상태 관리를 위해서 useState를 사용하지만 

버전이 업데이트 되면서 useState와 같은 hook이 생기기 이전에는 상태를 사용할 필요가 생기면 항상 클래스 컴포넌트를 만들어야 했죠 그리고 기본적으로 2가지 작업을 해야 했다

"초기화(initialize)" 와 "상태 정의(defining the state)" 이다

 

초기화는 useState 첫 호출시 하는 것과 같고 상태 정의는 toggleUsersHandler처럼 필요할 때 업데이트하는 것을 말한다

클래스 컴포넌트에서 상태를 정의할 때는 생성자라는 것을 사용한다

클래스 컴포넌트에서 상태를 정의할 때는 생성자라는 것을 사용한다 생성자 함수는 이 구문이 인스턴스화될 때, 즉 리액트가 컴포넌트로 사용되는 클래스를 만날 때 자동적으로 호출된다 그 뒤, 생성자에서는 상태 초기화와 같은 초기화 작업을 할 수 있다

클래스 컴포넌트에서는, 상태는 항상 중요하고 객체 형태이다

 

this.state 이름 항상 유지해야 한다

 

상태를 변경할 때 바로 this.state에 접근에서 변경하려 하면 안됀다

대신 this.setState를 사용한다

리액트가 이 갱신 내용을 기존 상태에 오버라이드하지 않고 기존의 상태와 병합한다.

함수형 컴포넌트의 setState는 오버라이드 하기 때문에 이 점에서 차이가 있다.

 

 

클래스에 생성자를 추가하고 이를 다른 클래스로 확장하게 되면 super()라는, 상위 클래스의 생성자를 호출하는 메소드를 사용해야 한다

 

에러가 있었는데 사라졌다

원인을 찾아보니 초기화할 때 this.setState가 아니라 this.state로 기본값을 설정해야 했다

 

수정 전

import { Component } 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" },
];

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

  toggleUsersHandler() {
    this.setState((curState) => {
      return { showUsers: !curState.showUsers };
    });
  }

  render() {
    const usersList = (
      <ul>
        {DUMMY_USERS.map((user) => (
          <User key={user.id} name={user.name} />
        ))}
      </ul>
    );
    return (
      <div className={classes.users}>
        <button onClick={this.toggleUsersHandler}>
          {this.state.showUsers ? "Hide" : "Show"} Users
        </button>
        {this.state.showUsers && usersList}
      </div>
    );
  }

  // 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;

수정 후

import { Component } 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" },
];

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

  toggleUsersHandler() {
    this.setState((curState) => {
      return { showUsers: !curState.showUsers };
    });
  }

  render() {
    const usersList = (
      <ul>
        {DUMMY_USERS.map((user) => (
          <User key={user.id} name={user.name} />
        ))}
      </ul>
    );
    return (
      <div className={classes.users}>
        <button onClick={this.toggleUsersHandler.bind(this)}>
          {this.state.showUsers ? "Hide" : "Show"} Users
        </button>
        {this.state.showUsers && usersList}
      </div>
    );
  }
}

export default Users;