hooks-2 (useCallback,useMemo,useRef)

공식사이트에 있는 hooks

 

이중 useState,Effect다음으로 많이 사용하는 3개의 hooks를 알아봅시다!

-useCallblack-

-설명

특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다.

 

우리가 컴퍼넌트를 호출하면 안에있는 모든 함수,변수들이 재선언 됩니다. 이럴경우에 컴퓨터 memory나 cpu에 많은 부하가 걸릴수 있습니다. (물론 작은 프로젝트는 상관이 크게없음)

위에 말을 해석하면 호출,재선언이 있을때마다 함수를 만들지 않고 한번 만든 다음에 계속 재사용한다고 생각하시면 됩니다!

-사용법

import React,{useCallback} from "react";

const App=()=>{
	const test=useCallback(()=>{
    	alert("test");
	},[]);
    /* 만약 참조하는 값이 있다면 배열에 참조하는 값을 추가해야합니다. 
    추가하지 않을 경우 참조하는 값이 최신값이 아니거나 이상한 값들이 들어올 수 있습니다.*/
    
    return (
    	<div onClick={test}>test<div>
    );
}

export default App;

-useMemo-

-설명

특정 값을 새로 만들지 않고 재사용하고 싶을때 사용합니다. useCallback과 사용방법과 역할이 비슷합니다.

특정 값이 변경되었을때 발동합니다. return값을 필요로 합니다.

(useMemo로 useCallback을 구현은 가능합니다....)

-사용법

import React,{useMemo} from "react";

const App=()=>{
	const update=useMemo(()=>{
    	return 1;
    },[]);
    /* useCallback과 같이 반응할 값을 넣어주면됩니다*/
    
    return (
    	<div>test<div>
    );
}

export default App;

-useRef-

-설명

 우리가 Html를 개발할때 css만으로 안되고 특정상황에서 css를 변경하거나, 이밴트를 주기위해

 

document.getelementbyid나 class를 사용하여 특정 DOM을 선택할수 있습니다.

 

물론 react에서도 사용이 가능하지만 많은 속성을 변경하고 해야할때, 리로딩후에도 유지해야할때 사용합니다!

 

-사용법

import React,{useRef} from "react";

const App=()=>{
	const DivRef=userRef();
    
    const test=()=>{
    
    	DivRef.current//이렇게하면 div에 접근이 완료 되었다
        document.getElementById("test")//이것과 동일하게 동작한다
	}
    return (
    	<div ref={DivRef} id="test">test<div>
    );
}

export default App;

-추신-

• 하위 파일에있는 객체를 가져올때는 많은 속성을 설정하는 것이 아니면 document를 사용하는 것을 추천한다.

(ts에서만 써봄)

useRef 생성

전달

interface

지정

-첨석-

부족한 글 읽어주셔서 감사합니다!

조금더 자세하게 알고 싶으시면 공식 사이트 및 다른 블로그를 참고해 보세요!

 

-react 공식사이트-

 

Hooks API Reference – React (reactjs.org)

Hooks API Reference – React

 

-참고한 블로그 및 기타여러 사이트-

 

10. useRef 로 특정 DOM 선택하기 · GitBook (vlpt.us)

10. useRef 로 특정 DOM 선택하기 · GitBook

17. useMemo 를 사용하여 연산한 값 재사용하기 · GitBook (vlpt.us)

17. useMemo 를 사용하여 연산한 값 재사용하기 · GitBook