ㄱ 부터 ㅎ 까지

공부를 시작하며... 이직하면서 짧은 기간동안 빠르게 리엑트를 공부하고 프로젝트에 투입되었던 경험이 있었습니다. 리엑트 첫 프로젝트이며, 혼자서 초기 구축부터 진행을 해야하는 상황이였습니다. 그렇다보니 리엑트 친화적인 개발과 성능 최적화를 염두하며 진행하지 못하였습니다. 그때의 저의 시작이 최선이였다면, 발전을 위해서 리엑트 성능 최적화를 목적에 두고 공부를 진행하려 합니다. 이번 글에서는 React의 함수형 컴포넌트를 통한 성능 최적화에 대한 내용을 다루고 있습니다. React의 유용한 경고 리엑트는 기본적으로 개발하기 편한 유용한 경고가 많이 포함되어 있습니다. 하지만 이 경고들은 리엑트가 더 무겁고 느리게 만들기 때문에 앱을 배포할 때에는 프로덕션 버전을 사용해야합니다. 기본적으로 create-re..

const setExample1Selector = selector({ key: "Selector/SetExample", get: ({ get }) => { const getExample1State = get(example1State); return getExample1State; }, set: ({ get, set }, newValue) => { // get을 통해 다른 atom이나 selector로 부터 값을 찾을 수 있습니다. // set을 통해 값을 가져올 수 있는데, // 첫 번째 매개변수에는 Recoil 상태를, 두 번째 매개변수는 설정할 새로운 값입니다. set(example1State, newValue); }, }); Recoil 패키지 설치하기 // npm $npm install recoi..

공부 레퍼런스 우아한 테크 세미나 영상을 통해 React Query , React Query를 이용한 상태관리에 대해서 공부를 진행했습니다. 세미나에서 다룬 내용을 공부하였으며 세미나 발표 내용 그대로 정리하였습니다. 세미나 영상 바로가기 : https://youtu.be/MArE6Hy371c 공부의 목적은 React Query의 사용법 보다는 사용하는 이유에 대해서 초점이 맞춰져 있습니다. React Query 를 알아보기 앞서서 우선 상태에 대해서 언급합니다. 상태란? 주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있습니다. 즉 문자열, 배열, 객체 등의 형태로 응용 프로그램에 저장된 데이터를 말합니다. -> 쉽게말해서 관리해야하는 데이터들의 상태를 말합니다. 상태관리는? 프로덕트가..

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

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