본문 바로가기

분류 전체보기55

useCallback, React.memo useCallback 함수를 memoization하기 위해 사용되는 hook함수 → useMemo와 비슷한 Hook 💡 useMemo는 특정 결과값을 재사용 할 때 사용 useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용 컴포넌트에서 props가 바뀌지 않으면 Virtual DOM에 새로 렌더링하는 것도 하지 않고, 컴포넌트의 결과물을 재사용하는 최적화 작업 → 함수 재사용 기본 구조 const memoizedCallback = useCallback(함수, 배열); 첫 번째 파라미터: 인자로 넘어온 함수 두 번째 파라미터: 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해줌 해당 컴포넌트가 렌더링되어도 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수 계.. 2022. 11. 24.
useEffect와 useMemo useEffect 함수 리액트 컴포넌트가 렌더링 될 때 마다 특정 작업을 실행할 수 있도록 하는 Hook component가 mount 되었을 때[처음 나타났을 때], component가 unmount되었을 때[사라질 때], component가 update되었을 때[특정 props가 바뀔 때] 기본 형태 useEffect(function, deps) function: 수행하고자 하는 작업[함수] deps: 배열 형태, 배열 안에는 검사하고자 하는 특정 값 혹은 빈 배열[의존되는 값들] cleanup 함수: 함수 반환, deps가 비어 있는 경우에 컴포넌트가 사라질 때 호출됨 의존되는 값의 배열이 비어 있으면, 컴포넌트가 처음 생성될 때에만 작업이 실행되고, 컴포넌트가 화면에서 사라질 때는 return해서.. 2022. 11. 23.
컴포넌트 렌더링 렌더링이란? 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미 DOM 업데이트 과정 1. render 단계: React.createElement로 생성 2. reconciliation 단계: 이전 elements와 새로 생성된 elements 비교 3. commit 단계: DOM 업데이트 re-render되는 상황 1. props가 변경되었을 때 2. state가 변경되었을 때 3. Context value가 변경되었을 때 4. 부모 컴포넌트가 re-render되었을 때 → 최적화 방법: render단계에 들어가는(re-rendering) 횟수 줄이기 [참고사이트] https://yujonglee.com/reactrendering.html .. 2022. 11. 23.
변수와 상수 변수와 상수 특정 이름에 특정 값을 담을 때 사용 let value=1; //선언: 하나는 변수, 하나는 상수 console.log(value); 변수 바뀔 수 있는 값, 한번 값을 선언하고 나서 바꿀 수 있음 let value=1; console.log(value); value=2; console.log(value) //1 //2 변수 선언할 때, let이라는 키워드 사용 한번 선언한 변수명과 똑같은 이름으로 선언 못함(다른 블록 범위 내에서는 가능) 상수 한번 선언하고 값이 바뀌지 않는 값, 값이 고정적임 const a=1; a=2; //error발생 ❗️변수 선언 방식 var: 변수를 선언 하고, 똑같은 변수명으로 선언하여도 에러가 나오지 않고 각기 다른 값이 출력(단점!!!! 사용 안함) let:.. 2022. 11. 18.

티스토리툴바