10.14.22{코딩일기}벨로퍼트와 함께하는 모던리액트 1-26~27챕터리뷰

[ 새롭게 알게된 것 ]

---

1. 실재 환경에서 에러 발생시 흰화면 대신 에러발생을 안내해주는 방법을 알게됨

---

바로 componentDidCatch라는 생명주기 메서드를 사용하면 됨

---

 

2. 올바른 props 설정을 못했을때의 에러를 방지하는 방법은 null checking 설정 하면됨

---

해당 컴포넌트에 null checking 해주면됨.

설정 방법은 아래와 같음. 이렇게 해주면 화면엔 아무것도 안보이지만 에러는 발생안함

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

보통 네트워크 요청 지연으로 데이터 없는 경우 null이나 <>로딩중</>을 렌더링 하면 됨

function Users({ users }) {
  if (!users) return (<>로딩중</>)

  return (
  ...생략

---

 

3. 만약 특정 props를 파라미터 할당 못한 경우 이에 대한 방지책으로 defaultProps를 설정해주면됨

---

아래 예시는 user 컴포넌트안에 onToggle props를 디폴트로 설정해주는 방법임

Users.defaultProps = {
  onToggle: () => {
    console.warn('onToggle is missing!');
  }
};

---

 

4. 앞서 위의 방법들은 프로덕션 모드에서의 방지라면 개발 모드에서부터 애초에 에러방지도 가능함

---

이때 사용하는게 PropTypes라는 거임

단 사용법이 불편하기에 TyepScript나 Flow를 사용해서 관리하는게 몹시 편하다고 함

---

 

5. componentDidCatch의 첫번째 파라미터는 에러내용, 두번째 파라미터는 에러발생위치 알려줌

---

state를 constructor로 감싸지 않은 이유는 이전 챕터 부분에서 언급이 없길래 고민해봤음.

결론은 state 객체를 componentDidCath함수메서드와 연결시켰기 때문에 어쨌든 바인딩 2번째 방법과 관련되어보임.

반드시 꼭 화살표 문법이 아니어두 다른 함수 메서드를 활용해도 되나봄.

참고해야겠음. 코드가 간결해지넹.

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

혹시나 까먹을까봐 언급해주는데 클래스형 컴포넌트 객체 상태값은 this.setState( { a : b } )로 관리해주는 거임

여기서 this.props.children은 ErrorBoundary에 주어진 자신 컴포넌트 들임.

아래 코드를 예로들면 User 컴포넌트를 반환해주는 거임

import React from 'react';
import User from './User';
import ErrorBoundary from './ErrorBoundary';

function App() {
  const user = {
    id: 1,
    username: 'velopert'
  };
  return (
    <ErrorBoundary>
      <User />
    </ErrorBoundary>
  );
}

이런식으로 설정하면 굳이 User객체에 null Checking 설정을 해줄 필요가 없게됨.

---

 

5. 실재 앱에선 componentDidCatch가 호출되는일이 없어야되는게 맞음. 즉 제거해야됨.

---

그래서 버그를 관리할때 필요한게 바로 Sentry라는 상용서비스라고 함.

사용자가 발견하게 되는 예외처리 오류들을 error와 info값을 네트워크를 통해 다른곳으로 전달해주는 서비스임

무료 모델도 있고, 유료도 있으나 무료도 괜찮음.

장기적으로 작업하는 프로젝트에 적용하는걸 권장한다고 함. 

설정 방법은 책 참고하면됨.

componentDidCatch를 설정하면 Sentry에선 버그가 감지 안되는 경우가 있는데 이런 경우도 따로 설정 가능함. 좋네.

 

---

6. ESLint에는 정말 다양한 규칙들의 라이브러리들이 제공됨

---

벨로퍼트님은 eslint-config-airbnb를 사용하셨다가 요즘엔 기본 설정외의 다른 설정은 적용안하신다고 함.

• eslint-config-airbnb
• eslint-config-google
• eslint-config-standard

---

7.  .js확장자에 대한 단축어를 만들 수 있는 도구 Snippet을 알게됨

---

커스텀 스니펫을 만드는 방법은 책자를 참고하면됨.

자주 사용하는 코드 단축어로 만든게 넘나리 좋아보였음.

이것 마저 귀찮으면 AI가 알아서 자주 사용하는 코드 추천해주는 코파일럿 사용하면 됨. 

개발하기이 편한 세상임.

---

드디어 리액트 입문 1장이 끝나따!!!!!