React

오늘은 React에 내장되어있는 lazy를 사용해 볼 것이다. React.lazy는 코드분할을 하게 해준다. 코드 분할은 앱을 "지연 로딩"하게 도와주고 사용자들에게 획기적인 성능 향상을 하게 해줍니다. 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러

React는 이전 리스트와 현재 리스트를 순회하고 차이점이 있으면 변경을 생성한다.예를 들어 맨 끝에 엘리먼트를 추가한다면, 변경은 잘 작동할 것이다.React는 첫번째, 두번째 요소가 같은 것을 확인하고, 마지막에 third를 추가할 것이다.하지만 위와 같이 구현할

Context API와 useReducer를 통해 상태관리를 할 수 있다. 이번 프로젝트는 Redux를 사용하지 않고 둘을 사용해서 적용하면서 해보고 사용을 하고 있었는데 처음에는 모든 state들을 하나의 store에 저장 해놓고 사용했다. 그리고 state Con

Clipboard API를 사용하면 간단하게 blob 형태의 이미지 파일을 복사할 수 있다. https://developer.mozilla.org/ko/docs/Web/API/Clipboard여기서 write라는 메소드를 사용할 필요가 있었다. 그런데 일반 j

프로젝트 진행을 하다가 에러가 났다.React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node나 같은 경우에는 fontAwe

https://dmitripavlutin.com/dont-overuse-react-usecallback/이 글을 읽고 제 나름대로 번역한 글입니다.useCallback은 함수를 메모이제이션 하는 것이다.어떤 사람이 물었다고 한다. '우리 팀 어떤분은 모든 함수

https://dmitripavlutin.com/use-react-memo-wisely/이글을 읽고 제 나름대로 번역한 글입니다.user interface 성능의 향상을 위해 React는 higher-order compoenent인 React.memo를 제공한

key 속성은 보통 list를 map으로 반복문으로 렌더링할 때 각 element를 구분하고 바뀌었는지 구분하기 쉽게 도와주는 역할을 한다. key는 props로 넘어가지 않고 단순히 리액트를 도와주는 역할을 하는 것이다.기본적으로 props가 바뀌면 리렌더링이 되는데

React의 V-DOM은 이전 V-DOM과 현재 V-DOM을 비교해서 바뀐 부분만 변경함으로써 최적화가 이루어진다. 그렇다면 React는 어떠한 방식으로 V-DOM 이 바뀌었는지 아는걸까? React는 Reconciliation 과정을 거친다. 일반적인 트리 비교 알고

useId hook은 React 18에 새로 추가된 hook으로 유니크한 id를 만들어준다.하지만 이 hook의 반환값을 key 를 위해 사용하지마라고 한다.하긴 key를 위해 사용하려면 useId 를 몇개나 사용해야할지 측정하기도 어렵고, 최상단에서 사용해야하는 ho