reacthook 2

Next js (넥스트 js)- Hook 5편 - useContext

1편 useRef2편 use Effect3편 useDropZone4편 useCallback 5번째 react Hook 인 useContext 에 대해 포스팅 하려 한다.​주 내용은"context"의 데이터 활용 이다.  ​Context (컨텍스트) 란 ? 일반적으로 전역적인 상태를 관리여러 컴포넌트 간에 데이터를 공유할 때 사용​​​useContext 란 ? 해당 선언을 통해, 타 컴포넌트에서 쉽게 context의 데이터를 가져올 수 있는 방법 (컴포넌트 간에 props drilling을 피할 수 있음 )Ex. A-> D로 넘겨줘야 하는 데이터가 있는데, A->B->C-> D 의 계층 구조 일 때, A부터 D까지 props로 데이터를 넘기는 것이 아닌 , useContext를 통해 A에서 선언 후 ,바로..

개발 - Next.js 2024.10.17

Next js (넥스트 js)- Hook 4편 - useCallback

1편 useRef2편 use Effect3편 useDropZone  4편 useCallback에 대해서 포스팅 시작합니다.   ​useCallback 이란 ?​성능 최적화가 목표.주로 함수가 불필요하게 다시 생성되는 것을 방지.함수를 기억해서, 컴포넌트가 리렌더링 될 때, 함수 재생성을 막음 , useEffect와 마찬가지로, 의존성 배열에 의해, 필요시에만 재 생성.​​useCallback 형태 const memoizedCallback = useCallback(() => { // 실행될 함수 내용}, [dependencies]);  useCallback 사용 시기자식 컴포넌트가 자주 리 렌더링 될 떄특히 자식 컴포넌트에 props로 넘길 때, 자식 컴포넌트가 변할 떄 마다 리렌더링이 발생하는데, 불필..

개발 - Next.js 2024.10.17