본문 바로가기

전체 글

 (40)
[React] memo, useMemo memo 컴포넌트가 업데이트 될 떄, 재실행 되지 않아도 되는 자식 컴포넌트들이 모두 업데이트 되는 경우가 있다. memo로 함수를 코드를 감싸주면 memo가 이전 prop 값과 새로 받을 prop값을 비교한 후 , 값이 같으면 memo가 막아준다 이는 부모컴포넌트에 의해 실행되었을 떄만 관련이 있고 내부의 상태값과는 관련이 없다. const Child = memo(function Child({text}){ return {text} }); export default Child 즉 자식 컴포넌트에서 관리하는 상태값이 바뀐 경우 > 컴포넌트 재실행 부모 컴포넌트가 재실행됐는데, 보내주는 속성값이 바뀐 경우 > 컴포넌트 재실행 부모 컴포넌트가 재실행됐는데, 보내주는 속성값이 같은경우 > 컴포넌트 재실행 X (..
[React] useContext 1. prop drilling의 단점 - 여러 컴포넌트를 통해 공유하고자 하는 데이터를 자식에게 계속 넘겨주어야 함 - 거쳐가는 컴포넌트 중에는 직접적인 사용을 하지 않더라도, 전달하는 역할 때문에 값을 받아야 함 => 컴포넌트의 재사용이 힘들 수 있음 2. 해결책 : - 컨텍스트 값을 생성하고 해당 값을 제공하여 다수의 컴포넌트 또는 앱의 모든 컴포넌트를 묶어줌 - prop drilling 없이도 상태값과의 연결이 용이함 3. 사용방법 import {createContext, useState, useReducer} from 'react'; // 아래와 같은 기본 값 설정이유 : 자동완성 기능 얻을 수 있음 // 다른 컴포넌트에서 context값 사용시 자동 완성으로 값 추천 해줌 export const..
[React] useEffect, useCallback useEffect - 사이드 이펙트를 잘 다루기 위한, Hook - API 싱크를 위해 사용 가능 사이드 이펙트 - 앱이 제대로 동작하기 위해 실행되어야 하지만 컴포넌트 렌더링 중 직접적인 영향을 미치지 않는 작업 주의 할 점 - 모든 부수 효과에 대한 과한 사용은 좋지 않음 ex) localStorage에 있는 item을 가져와서 상태값을 추가 하는 경우에 useEffect를 쓰는 등.. localStorage의 item은 위의 코드의 위치를 가져오는 함수와 달리 콜백 함수 없이 즉각적으로 데이터를 불러오기 때문에 굳이 useEffect를 쓰지 않고 직접 useState초기 값으로 설정 해도 됨. - 컴포넌트 렌더링이 끝난 후 추가적으로 실행되는 방식이라서 남용하면 성능 낭비가 될 수 있음 설명 및 실..

티스토리툴바