230831(목)

🚤 성장일지 7.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

⚛ (7.0)<완전 개편> 파인만 학습법을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다.

⚛️ 키워드: 직관적이고 쉽고 간단하게 작성

무한 스크롤

이제는 많이 익숙해진 UX로, 유저가 스크롤을 내릴 때마다 특정 위치에서 data를 불러오는 방식이다. 이를 통해 유저는 더 많은 데이터를 볼 수 있고, 서버는 불필요한 데이터를 보내지 않아도 된다.

예전에는 유저의 viewpoint의 위치를 계산하여 특정 위치에 도달하면 데이터를 불러오는 방식이었다면, 이제는 Intersection Observer API를 사용하여 특정 요소가 viewport에 들어오면 데이터를 불러오는 방식으로 구현한다.

Intersection Observer API는 브라우저가 요소의 위치를 계산하는 것이 아니라, 브라우저의 viewport와 요소의 위치를 비교하여 요소가 viewport에 들어오면 콜백 함수를 실행하는 방식으로 어떤 함수를 실행할 수 있게 한다. 무한 스크롤을 구현할 때는, 콜백 함수에서 데이터를 불러오는 함수를 실행하면 된다.

Error Boundary

React에서 제공하는 기능으로, 컴포넌트 트리의 어디에서든 에러가 발생할 수 있고, 에러가 발생하면 컴포넌트 트리 전체가 사라지게 된다. 이를 방지하기 위해 에러가 발생한 컴포넌트의 부모 컴포넌트에서 에러를 잡아내는 방법이다.

말 그대로 컴포넌트 계층 구조에서 특정 경계를 두어 에러가 발생하면 그 바깥으로 에러를 전달하지 않고 내부에서 처리하는 방법이다.

흔히 우리가 어떤 웹 사이트의 일부분만 에러 페이지로 이동하는 것을 본 적이 있을 것이다. 이런 경우가 바로 Error Boundary를 사용한 경우이다.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  // 에러가 발생하면 호출되는 메서드
  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 폴백 UI가 보이도록 상태를 업데이트
    return { hasError: true };
  }
  componentDidCatch(error, errorInfo) {
    // 에러 리포팅 서비스에 에러를 기록할 수도 있다.
    logErrorToMyService(error, errorInfo);
  }
  render() {
    if (this.state.hasError) {
      // 폴백 UI를 커스텀하여 렌더링할 수 있다.
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

React Router의 errorElement

React Router에서 제공하는 기능으로, 에러가 발생하면 특정 컴포넌트를 렌더링하는 방법이다. React의 Error Boundary와 비슷해보이지만 Error Boundary는 특정 컴포넌트 트리 구간에서의 에러를 핸들링하여 UI로 보여줄 수 있다면 React Router의 errorElement는 특정 경로(route path)에서 에러가 발생할 때만 특정 컴포넌트를 렌더링하는 방법이다.

📝 회고

구현해두었던 무한 스크롤 구현 부분을 수정하고 에러 바운더리에 대해서 공부했다. 오늘 일지에는 없는 내용이지만, useQuery와 비슷하게 구현한 커스텀 훅에서 isLoading을 통해 Loading 컴포넌트를 렌더링하게 하려는데 잘 되지 않아서… 내일도 이 부분에 대해서 수정해볼 예정이다.

참고

• KAKAO: Boundary를 이용하여 효과적으로 에러 처리하기
• React: Error Boundary
• React Router: errorElement