Hook

참고사이트 • 리액트 공식 문서 - useContext 🌐 useContext useContext는 컴포넌트의 Context를 읽고 구독하게 해주는 리액트 Hook이다. 리액트에서 데이터값을 하위 컴포넌트로 전달하기 위해 컴포넌트 호출 시, 데이터 prop을 담고, 해당 props를 이용하여 데이터를 사용한다. useContext는 해당 과정에 상관없이 useContext로 감싼 컴포넌트들을 해당 데이터를 접근할 수 있도록 도와준다. 비슷한 기능의 외부 라이브러리로는 recoil이 있다. 📦 Parameter useContext 컨텍스트를 읽고 구독하려면 컴포넌트 최상위에서 호출해야한다. const value = useContext(SomeContext); • SomeContext: 해당 컨텍스트는 cr..

참고 사이트 • 리액트 공식 문서 - useCallback • 별코딩님의 youtube - useCallback 강의 🪣 useCallback useCallback은 재렌더링 사이에 함수 정의를 캐시할 수 있는 React Hook이다. 📢 참조 useCallback 재렌더링 사이에 함수 정의를 캐시하려면 구성 요소의 최상위 수준에서 호출하면 된다. const cachedFn = useCallback(fn, [dependencies]); 📦 Parameters • fn: 캐시하려는 함수이다. 모든 인수를 취하고 모든 값을 반환할 수 있다. React는 초기 렌더링 중에 함수를 다시 반환한다(호출X). 다음 렌더링에서 dependencies가 변경되지 않은 경우 동일한 기능을 다시 제공하며, 그렇지 않다면 ..

참고사이트 • React 공식 문서 - useRef 🪣 useRef 렌더링이 필요하지 않은 값을 참조할 수 있는 React Hook이다. useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다. 📦 Parameter • initialValue: 초기에 저장되는 값을 넣으며, 모든 유형의 값이(lite, DOM...)이 될 수 있다. 이 인수는 초기 렌더링 후에 무시된다. 🎁 Return useRef는 단일 속성을 가진 객체를 반환한다. {current: value} • current: initialValue값이 들어가 있으며 null을 사용해도 된다. 향후 다른 것으로 설정할 수 ..