[React 강의 노트(5)] class형 component

react강의 노트 | Byte Degree [4주차]

 

 

1. class형 컴포넌트

 

//class형 컴포넌트
class Hello extends Component {
  //default props 설정하기
  static defaultProps = {
    name: "이름없음",
  };

  render() {
    const { color, isSpecial, name } = this.props;
    return (
      <div style={{ color }}>
        {isSpecial && <b>*</b>}안녕{name}
      </div>
    );
  }
}

//함수형 컴포넌트
function Hello({ color, name, isSpecial }) {
  return (
    <div
      style={{
        color,
      }}
    >
      {isSpecial ? <b>*</b> : null}
      안녕하세요{name}
    </div>
  );
}

Hello.defaultProps = {
  name: "이름없음",
};

 

 

- 각 메서드와 컴포넌트 인스턴스 관계 연결하기 3가지

 

1. 생성자 함수 constructor에서 함수를 미리 bind해주기

constructor(props) {
    super(props);
    this.handleIncrease = this.handleIncrease.bind(this);
    this.handleDecrease = this.handleDecrease.bind(this);
  }

 

2. 화살표 함수 사용하기

 

  handleIncrease = () => {
    console.log('increase');
    console.log(this);
  };

  handleDecrease = () => {
    console.log('decrease');
  };

 

3. onclick에서 바로 새로운 함수를 만들어 사용하기

- 렌더링시 함수가 새로만들어지기 떄문에 최적화시 까다로워서 잘 사용하지 않음 

 

<button onClick={() => this.handleIncrease()}>+1</button>

 

- 클래스 컴포넌트의 state는 무조건 객체형태여야 한다.

 

 

 

2.LifeCycle 메서드

 

- 컴포넌트가 브라우저상에 나타나고 업데이트되고 사라지게 될때 호출되는 메서드

- 작동방식은 다르지만 'useEffect' 와 비슷함

 

https://github.com/wojtekmaj/react-lifecycle-methods-diagram

 

3. LifeCycle 메서드

 

 

- null checking

 

import React from 'react';

function User({ user }) {
  if (!user) {
    return null;
  }

  return (
    <div>
      <div>
        <b>ID</b>: {user.id}
      </div>
      <div>
        <b>Username:</b> {user.username}
      </div>
    </div>
  );
}

export default User;

 

- 전달받은 props가 존재하지 않는다면 null을 렌더링하여 아무것도 나타나지 않게된다. (아무것도 보이지는 않지만, 적어도 에러는 나타나지 않는다.)

 

 

 

+ componentDidCatch 로 에러 잡아내기

 

- 함수형 컴포넌트에서 할 수 없는 error 처리하기

-  에러 발생시, 에러의 정보를 알고 수정해야하기 때문에 LifeCycle 메서드 사용이 유용하다.

 

- 예외처리하지 않은 에러가 발생시 componentDidCatch로 에러를 잡아낸다.

- componentDidCatch 메서드는 첫번째 파라미터로 에러의 내용, 두번째 파라미터로 에러가 발생한 위치를 알려준다 

 

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  state = {
    error: false
  };

  componentDidCatch(error, info) {
    console.log('에러가 발생했습니다.');
    console.log({
      error,
      info
    });
    this.setState({
      error: true
    });
  }

  render() {
    if (this.state.error) {
      return <h1>에러 발생!</h1>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

 

 

+) componentDidCatch 에서 error 와 info 값을 네트워크를 통하여 다른 곳으로 전달하는 서버를 만드는건 번거로운 작업이다 ->  프로젝트 진행 시 `sentry`를 연동하면 버그 관리시 유용함

 

Application Monitoring and Error Tracking Software

 

---

 

prettier

- 코드 스타일 커스텀하기

- extention에서 prettier 다운받고 파일 만들어서 사용하기

 

ESLint

- 자바스크립트 문법 체크해주는 도구

- extention에서 ESLint다운받고 파일 만들어서 사용하기

 

Snippet

- 에디터에 대부분 내장되어 있는 기능

- 자주 사용되는 코드에 대하여 단축어를 만들어 코드를 빨리 작성할 수 있게 해줌