[Udemy React 완벽 가이드] Section 12

퍼스트 클래스 기반 컴포넌트 추가하기

• render() 메소드는 리액트에 필요한 특정 메소드로 리액트가 jsx 코드 안에 컴포넌트가 사용된 것을 확인하면 그때 호출하는 메소드
• 클래스 기반 컴포넌트에서 render() 메소드는 props를 받지 않는다

import { Component } from 'react';

import classes from './User.module.css';

class User extends Component{
  render(){
    return <li className={classes.user}>{this.props.name}</li>;

  }
}


// const User = (props) => {
//   return <li className={classes.user}>{props.name}</li>;
// };

export default User;

 

 

 

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.state = {
      showUsers: true,
      more: "Test",
    };
  }

  toggleUsersHandler() {
    // this.state.showUsers=false;  //NOT!
    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;

 

 

 

컴포넌트 수명 주기(클래스 컴포넌트에만 해당)

• 클래스 컴포넌트에서는 리액트 훅을 사용할 수 없기 때문에 useEffect()를 사용할 수 없지만 컴포넌트 생명 주기라는 개념이 존재한다
• componentDidMount(), componentDidUpdate(), componentWillUnmount() 메소드가 가장 보편적이고 중요한 메소드
• 모든 effect 함수는 컴포넌트가 처음 마운트 될 때 실행된다
• 의존성 배열이 비어있다면 effect 함수는 딱 한 번만 실행된다
• componentWillUnmount()는 컴포넌트가 DOM에서 삭제되기 직전에 호출되며 useEffect()에 있는 cleanup 함수와 같다

 

 

사용 중인 수명 주기 방법

• 모든 생명 주기 메소드는 모든 컴포넌트 인스턴스, 즉 useEffect와 같은 것들이다
• 이들에 대해 각각의 상태가 독립적으로 작동한다

import { Fragment, useState, useEffect, Component } from 'react';

import Users from './Users';
import classes from './UserFinder.module.css';

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

class UserFinder extends Component {
  constructor() {
    super();
    this.state = {
      filteredUsers: [],
      searchTerm: '',
    };
  }

  componentDidMount() {
    // Send http request...
    this.setState({ filteredUsers: DUMMY_USERS });
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.searchTerm !== this.state.searchTerm) {
      this.setState({
        filteredUsers: DUMMY_USERS.filter((user) =>
          user.name.includes(this.state.searchTerm)
        ),
      });
    }
  }

  searchChangeHandler(event) {
    this.setState({ searchTerm: event.target.value });
  }

  render() {
    return (
      <Fragment>
        <div className={classes.finder}>
          <input type='search' onChange={this.searchChangeHandler.bind(this)} />
        </div>
        <Users users={this.state.filteredUsers} />
      </Fragment>
    );
  }
}

export default UserFinder;

 

 

 

 

오류 경계 소개

• 개발자의 관점에서 보는 버그를 의미하는 게 아니다
• 일반적으로 try-catch 문을 사용해서 잠재적으로 발생할 수 있는 오류를 감지해 오류 처리를 할 수 있는 대체 코드 실행
• 오류 경계를 빌드하려면 클래스 컴포넌트여야 하고 동시에 생명 주기 메소드를 갖는 컴포넌트여야 한다
• 생명 주기 메소드는 하위 컴포넌트 중 하나가 오류를 만들거나 전달할 때 발동한다
• 오류 경계를 사용하는 이유는 무언가가 잘못되더라도 어플리케이션 전체가 작동 중단되지 않고 오류를 확인한 뒤에 이를 자바스크립트의 try-catch 문과같이 좀 더 세련된 방식으로 처리할 수 있기 때문이다