분류 전체보기69 [React] useCallback - 함수 memoization 이 글은 별코딩의 React Hooks에 취한다 - useCallback 짱 쉬운 강의 | 리액트 훅스 시리즈영상을 정리한 글입니다. useMemo에 대한 개념을 익히고 useCallback을 공부하는 것을 추천합니다..!! 제가 작성한 블로그 글은 다음과 같습니다!! [핀테크 서비스 프론트엔드 개발자 취업 완성 2기/React] - [React] useMemo, memoization 공부하기! Memoization : 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술 위키백과 1. useCallback 1-1. 개.. 2022. 8. 5. [React] 프로젝트에서 계속 두 번씩 렌더링 되는 현상 해결하기 프로젝트를 만들다 보면, 강사님의 화면은 그렇지 않은데.... 나는 계속해서 두 번씩 렌더링 되는 문제가 있었다. 밑의 사진에도 보면 어려운 계산과 쉬운 계산이 각각 두 번씩 찍혀 있는 모습을 알 수 있다. 왜..?!!! 어제 김준태 강사님의 강의 자료를 보면서 해답을 찾을 수 있었다..!! 바로 index.js의 StrictMode때문이었다. 현재 프로젝트에서 index.js파일을 보면 StrictMode로 설정된 것을 알 수 있다. 이는 리액트 전체에 디버깅을 위한 절차를 추가해주는 태그로, useEffect의 이상 동작을 감지하고자 useEffect 내의 함수를 마운트 할 때 2번 실행시키기 때문이라고 한다. 지금은 간단한 프로젝트이니, 지워도 상관이 없다. 그래서 해당 태그를 삭제해도 된다! St.. 2022. 8. 4. [React] useMemo, memoization 공부하기! 이 글은 별코딩의 React Hooks에 취한다 - useMemo 제대로 사용하기 | 리액트 훅스 시리즈영상을 정리한 글입니다. 1. useMemo 1-1. 기본개념 useMemo와 useCallback은 컴포넌트 최적화를 위해서 사용한다. useMeno에서 Memo는 memoization에서 온 말이다. 동일한 값을 리턴하는 함수를 반복적으로 호출할 때 처음 값을 계산할 때 그 값을 메모리에 저장해서 다음 호출에서 다시 계산하지 않고 재사용하는 기법을 말한다. 처음 계산할 때 그 값을 캐싱해둬서 필요할 때마다 캐시에서 꺼내서 사용하는 것이다. 함수형 컴포넌트는 함수이다!! 즉 렌더링이될때 component함수가 호출되고 모든 내부 변수가 초기화된다. 만약 무거운 작업을 하는 함수가 component가 .. 2022. 8. 3. [React] useRef 1. ref 사용하기 1-1. ref의 개념 ref는 인강을 보고 이해가 잘 가지 않아서 추가로 잘 정리된 유튜브 강의를 참고했다. (1. React Hooks에 취한다 - useRef 완벽 정리 1# 변수 관리 | 리액트 훅스 시리즈, 2. ) ref는 컴포넌트에 접근할 수 있는 특수한 어트리뷰트이다. 는 2가지가 있다. const ref = useRef(value)로 사용한다. ref는 {current:value} 형태이다! 반환된 ref는 컴포넌트의 전 생애주기를 통해 유지된다! 컴포넌트가 unMount 되기 전까지는 값을 유지할 수 있다! 1-2. ref가 유용한 경우 1) 저장공간 state를 사용하는 경우 state의 변화 → 컴포넌트 다시 렌더링 → 컴포넌트 내부 변수들 초기화 원하지 않는 .. 2022. 7. 29. 이전 1 2 3 4 5 ··· 18 다음
