React

React.lazy React.lazy 함수를 사용하면 동적 import를 사용해서 컴포넌트를 렌더링 할 수 있습니다. Before import OtherComponent from './OtherComponent'; After const OtherComponent

에러 바운더리는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 풀백 UI를 보여주는 React 컴포넌트로 에러 경계는 렌더링 도중 생명주기 메서드 및 그 아래에 있는 전체트리에서 에러를 잡아낸다. 과거에는 컴포넌트 내부의 자바스크

사용 - NEXTJS, TSX챗봇을 구현 도중 채팅을 보낼시 스크롤이 고정되어 있기에 스크롤 손수 스크롤을 내려야 하는 불편한 점을 발견 했다.!\[](https://velog.velcdn.com!\[](https://velog.velcdn.com/i

코드 스플리팅을 하게 되면, 지금 당장 필요한 코드가 아니라면 따로 분리시켜, 나중에 필요할 때 불러와 사용할 수 있습니다. 이를 통하여, 페이지 로딩 속도를 개선 할 수 있습니다.npm i @loadable/component npm i --save-dev @types

포커스, 선택, 애니메이션을 관리하기 위해서는 이런 DOM 노드에 접근하는 것이 불가피할 수 있습니다.Ref 전달하기는 일부 컴포넌트가 수신한 ref를 받아 조금 더 아래로 전달 할 수 있는 옵트인 기능입니다. 다음은 React.forwardRef를 사용하여 전달

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.일반적인 React 애플리케이션에서 데이터는 위에서 아래로 props를 통해 전달 되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야하는 props

StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다. 예시 위의 예시에서 ComponentOne과 ComponentTwo는 각각의 자

react-calendar 라이브러리를 통해 Next 앱에 달력을 적용하는 방법을 기록합니다.npm i react-calendar본 게시물에서는 styled-components 를 활용하고 있습니다.본 게시물에서는 dayjs 를 사용하고 있습니다.nowDate를 통해

본 게시물은 Recoil Hooks에 대한 내용을 담고 있습니다.atom이나 selector의 값을 사용할 때 사용recoil 상태를 인자로 받는다.selector의 경우 set을 설정해주지 않으면 사용하지 못한다.EX)atom이나 selector의 값을 초기화할 때