🍊 2022-08-16

🔥 오늘 어디에 도전해보셨고, 무엇을 배우셨나요?

• react의 에러 경계

🌊 학습하시면서 궁금하신 부분이나, 어려웠던 점은 뭘까요?

• componentDidCatch에서 setState로 상태를 업데이트하고 에러 발생 시 대체 UI 렌더링을 제어할 수 있지만 이런 방식은 이후의 릴리즈에서는 사용할 수 없게 될 것이므로 static getDerivedStateFromError()를 대신 사용하여야 한다

  🐝 참고 에러 경계(Error Boundaries))

---

클래스 컴포넌트 에러 경계(Error Boundaries)

• 🔖 자바스크립트에서 에러 처리는 try-catch를 사용하면 되는데 리액트의 JSX 문법에서는 사용할 수 없다.
• 🔖 에러 경계는 하위 컴포넌트 중 하나가 오류를 만들거나 전달할 때 발동한다.
• 🔖 에러는 렌더링 도중 생명주기 메서드 및 그 아래에 있는 전체 트리에서 잡아낸다.
• 🔖 에러 경계를 사용하는 이유는 에러가 발생하더라도 애플리케이션 전체의 작동이 중단되지 않고 오류를 처리하기 위해서다.
• 🔖 함수형 컴포넌트에서는 아직 사용이 불가하여 클래스 컴포넌트를 사용해야 한다.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
    };
  }
  componentDidCatch(error) {
    this.setState({ hasError: true });
  }
  render() {
    return this.state.hasError ? (
      <p>Something went wrong.</p>
    ) : (
      this.props.children
    );
  }
}

export default ErrorBoundary;

🍊 JEJU.log

⛰ 단시간에 고강도 운동을 원한다면 성산일출봉 올라가기

숙소에서 성산까지 가는 길이 너무 고되었다. 버스를 두 번이나 놓쳐서 한 시간을 날렸고 성산 도착까지 한시간 반 정도가 걸렸다. 도착해서 성산 일출봉을 보는데 감탄이 나오긴 했다. 사진으로 본 것보다 크고 예뻤다. 정상까지 올라가는 길은 생각보다 힘들거라는 조언대로 짧지만 강한 코스였다. 아쉬운건 정상에서 찍은 사진은 실물을 전혀 담지 못한다ㅠㅠ 그건 눈으로 봐야한다.

🖼 기대보다 훨씬 좋았던 빛의 벙커