ㄱ 부터 ㅎ 까지

에러 경계의 도입과정 이전에는 컴포넌트 내부( UI의 일부분 )의 자바스크립트 에러가 React의 내부 상태를 훼손하고 전체 어플리케이션을 중단 시켜버리는 치명적인 오류가 있었습니다. 이를 해결하기 위해 React 16에서는 에러 경계(Error Boundary)라는 새로운 개념이 도입되었다고 합니다. 에러 경계 ErrorBooundary란 에러 경계로 감싸면 하위 컴포넌트들에서 발생하는 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 fallback UI를 보여주는 React 컴포넌트입니다. 에러 경계 에러 잡아내기 다음과 같은 에러를 잡아냅니다. - 렌더링 도중 생명 주기 메서드 - 자식의 전체 트리의 자바스크립트 에러 다음과 같은 에러는 포착하지 않습니다. - 이벤트 핸들러 - 비동기적 코드 ..

공부를 진행하기 앞서 css module 에서 작성한 스타일링 코드는 모두 지워줍니다. 정리한 코드는 다음과 같습니다. import Link from "next/link"; import { useRouter } from "next/router"; export default function NavBar(){ const router = useRouter(); return ( Home About ) } Styled JSX styled JSX는 기존 리엑트에서 볼 수 없었던 방식인데, 그 이유는 Next JS의 고유 방법이라고 합니다. style 태그와 jsx 프로퍼티 스타일링 할 컴포넌트 내에 style 태그를 넣어주고 안에 jsx 프로퍼티를 넣어주어 스타일링 구조를 잡습니다. style 태그 안에 {} 와 ..

Suspense란? React 문서에 따르면 Suspense를 사용하면 컴포넌트가 렌더링되기 전까지 기다렸다가 해당 컴포넌트에서 데이터를 불러오게 되면 로딩상태였던 컴포넌트를 렌더링합니다. 쉽게말해 로딩상태 처리를 쉽게해주는 리엑트 컴포넌트입니다. 기존 접근 방식 vs Suspense 기존의 데이터 불러오는 방식과 Suspense를 사용하여 처리하는 방식을 비교해보겠습니다. 접근방식 1. 렌더링 직후 불러오기 리엑트에서 흔히들 사용하는 데이터를 불러오는 방식으로는 useEffect, useState, fetch를 활용해 처리하게 됩니다. 코드로 보면 다음과 같습니다. ( 스타일링은 styled-components 를 사용하였습니다. ) function ProfileRenderingThenGetData()..

이번에 업무를 보면서 퍼블리셔분을 도와줄 일이 있었습니다. 문제는 input으로 연 파일 창(file dialog)을 열면 배경이 dimmed 처리 되고 아래 사진과 같이 파일을 선택할 때 말고 취소 버튼을 눌렀을때를 감지해 dimmed처리를 해제해야하는 상황이였습니다. 리액트로 프로젝트를 진행하고 있어서 취소 이벤트를 감지해 상태변화로 dimmed처리를 관리하면 될것 같아 쉬워 보였고, 열기를 통해 파일을 넣었을 때엔 파일 상태를 관리하는 state의 변화를 감지하거나 input의 onChange를 통해서 처리하면 되겠다고 판단했습니다. 파일 열기는 쉬웠지만 취소상태를 감지하기에는 어려움이 있었습니다. 인터넷에 검색을 통해 알게된 것은 window의 포커스를 감지해 취소인지를 판별하는 방법이 보편적이라..