늘 겸손하게

목차 useCallback 사용법 useCallback useCallback은 리액트 최적화에 사용되는 기능 중 하나입니다. useCallback이 필요한 이유는 컴포넌트가 렌더링 될 때 그 안에 있는 함수도 다시 만들게 됩니다. 하지만 똑같은 함수가 컴포넌트가 리렌더링 될 때마다 다시 생성되는 것은 낭비입니다. 그리고 만약 함수를 자식 컴포넌트에 props로 내려준다면 함수를 포함하고 있는 컴포넌트가 리렌더링 될 때마다 자식 컴포넌트도 함수가 새로 만들어지니 리렌더링을 하게 됩니다. 이러한 무분별한 리렌더링을 최소화하기 위해 함수를 최적화하는 기능이 바로 useCallback입니다. 사용법 useCallback 적용은 useCallback 안에 콜백함수와 의존성 배열을 순서대로 넣어주면 됩니다. 함수 ..

목차 최적화 방법 React.memo와 메모이제이션 실제 사용 React.memo를 지양해야 하는 상황 결론 최적화 방법 React 앱을 최적화하는 데 사용하는 방법은 크게 네 가지가 있다. 첫 번째가 React.memo 두 번째로, useCallback 세 번째로, useMemo 네 번째로, 얕은 비교 (shallow compare) React.memo, useMemo는 메모이제이션을 활용한 최적화 방법이다. React.memo와 메모이제이션 메모이제이션이란 계산 결과를 메모리에 저장해 두고, 같은 연산에 대한 계산 결과를 요구할 때 재계산하지 않고 메모리에 저장된 값을 불러와 사용하는 방식을 말한다. React.memo로 감싸진 컴포넌트는 같은 props가 전달되면 리렌더링 없이 메모리에 저장된 컴포..

성능 최적화 필요한 이유 당연하게도 사용자 입장에서 가볍고 빠른 앱을 사용하기가 더 편리하다. React 앱 또한 성능 최적화를 위한 기능들이 존재한다. 개발한 프로젝트를 최적화하여 더 빠르고 가벼운 앱으로 업그레이드 해보자. 프로젝트 최적화를 위해선 성능 테스트를 바로바로 가능한 확장 프로그램이 필요하다. 무료 확장 프로그램인 React Developer Tools를 브라우저에 설치하자. 확장 프로그램 설치 구글에 'React Developer Tools'를 입력하면 chrome 웹 스트어에서 다운로드 받을 수 있다.

목차 상황 해결책 상황 api key를 숨기기 위해 api key를 담은 .env 파일을 최상위 디렉토리에 추가, .gitignore에 .env를 추가하여 원격 저장소에 푸시하고 빌드하는 상황. 이상하게도 process.env 로 api key를 호출하려 하였으나 계속 undefined만 출력되는 문제가 발생. const fetch_data = async () => { const api_key = process.env.APIKEY; console.log(api_key); // 데이터 가져오기 const url = `api 주소` const result = await fetch(url); const json = await result.json(); console.log(json); } 해결책 결론부터 말하..