Closed yejun95 closed 7 months ago
Memoized value를 리턴하는 Hook
쉽게 말해서 메모를 해두었다가 나중에 다시 사용하는 것.
useMemo 사용법
의존성 배열에 들어있는 변수가 변했을 경우에만 새로 create 함수(useMemo)를 호출하여 결과값을 반환한다.
그렇지 않으면 기존 값을 그대로 반환한다.
이렇게 하면 컴포넌트가 다시 렌더링 될 때 마다 연산량이 높은 작업의 반복을 피할 수 있다.
결과적으로 빠른 렌더링 속도를 얻을 수 있다.
💡 주의점 : useMemo Hook 사용 시 useMemo로 전달된 함수는 렌더링이 일어나는 동안 실행된다.
아래와 같이 의존성 배열을 넣지 않은 경우, 매 렌더링마다 함수가 실행된다.
useMemo() Hook 과 유사하지만 값이 아닌 함수를 반환한다.
useMemo() Hook 과 동일하게 의존성 배열의 값이 바뀐 경우에만 함수를 재정의하여 리턴한다.
아래와 같이 의존성 배열의 값이 변경되면 콜백함수를 반환한다.
사용 이유
일반적으로 함수를 정의하면 컴포넌트가 렌더링 될 때 마다 함수가 재정의되지만 useCallback Hook을 사용하면 의존성 배열의 값이 변경된 경우에만 함수를 재정의하여 리턴하는 것이다.
결국 불필요한 렌더링을 줄이기 위해 사용하는 것
예시
아래와 같이 useCallback() Hook 을 사용하지 않고 handleClick 이라는 함수를 정의하면 재렌더링마다 함수가 정의된다.
handleClick
이렇게 되면 부모 컴포넌트가 렌더링 될 때 자식 컴포넌트도 같이 재렌더링 되면서 쓸데없이 props 값이 넘어간다.
Reference를 사용하기 위한 Hook
리액트에서의 Reference는 특정 컴포넌트에 접근할 수 있는 객체를 말한다.
이때 useRef() Hook 은 Reference 객체를 반환하는 것이다.
refObject.current 라는 속성을 이용하면 현재 참조하고 있는 Element를 가리킨다.
refObject.current
사용법
만약 초기값이 null이라면 초기값이 null인 Reference 객체를 반환하게 되는 것이다.
컴포넌트가 언마운트 되기 전까지는 유지된다.
아래 예시는 버튼 클릭 시 input에 focus가 가는 로직이다.
input에다가 ref를 객체를 맵핑하고 current 속성을 이용하여 접근하게 된다.
current
💡 useRef() Hook은 내부 데이터가 변경되었을 때, 별도로 알리지 않는다.
따라서 Ref에 DOM 노드가 연결되거나 분리되었을 경우, 어떠한 코드를 실행하고자 한다면 Callback ref를 사용해야한다.
Callback ref
useCallback() Hook 과 태그에 맵핑하는 ref 속성을 결합한 것이다.
useRef() Hook의 current 속성을 변경해도 재렌더링이 안되기 때문에 사용하는 것
아래 그림처럼 useCallback() Hook을 사용하면서 태그에 ref 속성을 맵핑한다.
Reference
인프런 Inje Lee : 처음 만난 리액트(React)
useMemo, useCallback, useRef란?
✔ useMemo
Memoized value를 리턴하는 Hook
쉽게 말해서 메모를 해두었다가 나중에 다시 사용하는 것.
useMemo 사용법
의존성 배열에 들어있는 변수가 변했을 경우에만 새로 create 함수(useMemo)를 호출하여 결과값을 반환한다.
그렇지 않으면 기존 값을 그대로 반환한다.
이렇게 하면 컴포넌트가 다시 렌더링 될 때 마다 연산량이 높은 작업의 반복을 피할 수 있다.
결과적으로 빠른 렌더링 속도를 얻을 수 있다.
💡 주의점 : useMemo Hook 사용 시 useMemo로 전달된 함수는 렌더링이 일어나는 동안 실행된다.
아래와 같이 의존성 배열을 넣지 않은 경우, 매 렌더링마다 함수가 실행된다.
✔ useCallback
useMemo() Hook 과 유사하지만 값이 아닌 함수를 반환한다.
useMemo() Hook 과 동일하게 의존성 배열의 값이 바뀐 경우에만 함수를 재정의하여 리턴한다.
아래와 같이 의존성 배열의 값이 변경되면 콜백함수를 반환한다.
사용 이유
일반적으로 함수를 정의하면 컴포넌트가 렌더링 될 때 마다 함수가 재정의되지만 useCallback Hook을 사용하면 의존성 배열의 값이 변경된 경우에만 함수를 재정의하여 리턴하는 것이다.
결국 불필요한 렌더링을 줄이기 위해 사용하는 것
예시
아래와 같이 useCallback() Hook 을 사용하지 않고
handleClick이라는 함수를 정의하면 재렌더링마다 함수가 정의된다.이렇게 되면 부모 컴포넌트가 렌더링 될 때 자식 컴포넌트도 같이 재렌더링 되면서 쓸데없이 props 값이 넘어간다.
✔ useRef
Reference를 사용하기 위한 Hook
리액트에서의 Reference는 특정 컴포넌트에 접근할 수 있는 객체를 말한다.
이때 useRef() Hook 은 Reference 객체를 반환하는 것이다.
refObject.current라는 속성을 이용하면 현재 참조하고 있는 Element를 가리킨다.사용법
만약 초기값이 null이라면 초기값이 null인 Reference 객체를 반환하게 되는 것이다.
컴포넌트가 언마운트 되기 전까지는 유지된다.
예시
아래 예시는 버튼 클릭 시 input에 focus가 가는 로직이다.
input에다가 ref를 객체를 맵핑하고
current속성을 이용하여 접근하게 된다.💡 useRef() Hook은 내부 데이터가 변경되었을 때, 별도로 알리지 않는다.
따라서 Ref에 DOM 노드가 연결되거나 분리되었을 경우, 어떠한 코드를 실행하고자 한다면
Callback ref를 사용해야한다.✔ Callback ref
useCallback() Hook 과 태그에 맵핑하는 ref 속성을 결합한 것이다.
useRef() Hook의 current 속성을 변경해도 재렌더링이 안되기 때문에 사용하는 것
아래 그림처럼 useCallback() Hook을 사용하면서 태그에 ref 속성을 맵핑한다.
Reference
인프런 Inje Lee : 처음 만난 리액트(React)