늘 겸손하게

useEffect와 useLayoutEffect의 차이점에 대해 알아봅시다 우선 useEffect가 무엇인지, useLayoutEffect가 무엇인지 서술하고 차이점을 서술하겠습니다. useEffect 함수 컴포넌트에서 side effect를 수행할 수 있게 해주는 hook입니다. side effect? 함수가 실행되면서 함수 외부에 존재하는 값이나 상태 등을 변경시키는 행위. 예로, 함수 외부의 배열 데이터를 바꾸거나 전역변수값 변경, 네트워크를 통한 데이터 송수신, 파일 입출력, 구독 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는것 등이 side effect입니다. side-effect가 무조건 나쁘다고는 할 수 없지만 함수는 매개변수로 입력받은 인자값에 대해 항상 일관된 출력값을 반환해..

출처 https://github.com/facebook/react/blob/main/CHANGELOG.md#1800-march-29-2022 2022년 3월에 React 18이 출시되었습니다. 추가된 기능, 없어진 기능 등등 내용이 많아 제가 사용하게 될 가능성이 높은 내용만 우선 추가했습니다. React DOM Client 아래의 새로운 API는 react-dom/client에서 export(내보내기)됩니다. createRoot : render 혹은 unmount 가능한 root를 생성하기 위한 새로운 메서드. ReactDOM.render 대신 사용하세요. React 18의 새로운 기능은 createRoot 없이는 동작하지 않습니다 hydrateRoot: 서버에서 렌더링된 앱을 hydrate하기 위한 ..

발췌 : https://react-query-v3.tanstack.com/overview 서론 React Query는 React에 빠진 기능 중 하나인 data-fetching을 위한 라이브러리로 자주 설명됩니다. 더 기술적으로 설명하자면, React 앱 내부의 fetching, cashing, synchronizing, updating server state를 수월하게 해줍니다 개발동기 React 앱은 컴포넌트로부터 데이터를 업데이트하거나 fetch하는데 권장되는 방법이 없습니다. 그래서 개발자들은 알아서 데이터를 fetch하는 방법을 만들어내 사용해왔습니다. 이 말은 주로 React hook을 이용해 컴포넌트 기반 state와 effect를 합쳐 사용해왔거나 앱을 위해 비동기적인 데이터를 저장하고 제..

리액트 렌더링 성능을 향상 시키기 위해서는 Component가 렌더링 되는 것을 최소한으로 해야한다. CPU 자원을 가장 많이 사용하는 것이 렌더링이기 때문에 가능한 렌더링 횟수를 줄이는것이 렌더링 성능 향상에 핵심 요소. 렌더링 횟수를 줄이는 방법을 알아보자. 1. 메모이제이션 메모이제이션이란, 반복적인 계산을 피하기 위해 계산 결과를 메모리에 저장해두고 같은 계산을 하려고하면 저장해둔 계산 결과를 재활용하는 최적화 기술입니다. 이 기술을 이용해 변경사항이 없는 컴포넌트가 반복적으로 렌더링되는것을 막을 수 있습니다. 리액트로 메모이제이션을 사용할 수 있는 키워드 입니다. useMemo useCallback React.memo https://besforyou.tistory.com/249 React - R..