본문 바로가기

전체 글92

useReducer useReducer 상태 관리 hook중 하나(useState처럼) 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리 가능 → 상태 업데이트 로직을 컴포넌트 바깥에 작성 가능, 심지어 다른 파일에 작성 후 불러와서 사용 가능 reducer: 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextState; } 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 됨 action은 업데이트를 위한 정보를 지니고 있음(객체의 형태는 자유) → type 값을 지닌 객체 형태로 사용 //카운터에 1을 더하는 액션 { type: 'INCRE.. 2022. 11. 24.

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.

이전 1 ··· 15 16 17 18 19 20 21 ··· 23 다음

티스토리툴바