[TIL] React #useReducer, useCallback, useMemo 사용
더 나은 코드 최적화를 위해
useReducer
,useCallback
,useMemo
에 대하여 알아보자.
useReducer
React 공식 문서에 따르면 useReducer
는 useState
를 대체할 수 있다고 말한다.
useState
function Signin(){ const [id, setId] = React.useState(''); return( <form> <h1>로그인</h1> <input name="id" type="text" placeholder="아이디" value={id} onChange={e => setId(e.target.value)} /> <input name="password" type="password" placeholder="비밀번호 입력" value={password} onChange={e => setPassword(e.target.value)} /> </form> ) }
useState
를 사용하면 위와 같이 두번 사용해야 한다.
이를 useReducer를 사용한다면?
useReducer
useCallback
import React from "react";
function App() {
const [count, setCount] = React.useState(0);
const handleClick = React.useCallback(() => console.log("clicked"), []);
return (
<>
<button onClick={() => setCount(count + 1)}>카운트 올리기</button>
<button onClick={handleClick}> 클릭하기</button>
</>
);
}
export default App;
-
위 코드처럼 useCallback을 감싸면 이전에 생성한 함수를 저장해두고 재사용이 가능하다!
함수의 동작은 똑같지만 좀 더 최적화가 좋다. 메모제이션 패턴을 이용한 것이며, 의존성 빈 배열로 두번째 인자에 넣는다.
-
의존성 빈배열을 명시하지 않는다면 제대로 인지하지 못하고 이전 값을 출력하므로 반드시, 의존성 빈배열을 명시해줘야함.
useMemo
-
useCallback은 함수를 반환하는 반면, useMemo
도 최적화에 사용되지만 함수가 아닌 값을 반환할때 쓰인다.
-
버튼을 클릭할때 두배로 계산한 값을 출력을 한다면,컴포넌트가 재렌더링 되었을 때, 불필요한 연산을 하게 되고 컴포넌트의 상태값이 많고 복잡한 연산의 경우?? 최적화가 좋지 않아 useMemo를 통해 최적화가 필요하다.
-
의존하는 값이 변경될 때에만 연산하므로 최적화가 개선되며,
useCallback과 마찬가지로 두번째 인자 배열에 의존하는 값을 반드시 명시해야함.
정리를하며
useMemo는 상태값을 반환하고, useCallback은 함수를 반환하는 차이이다.
적절히 사용하면 컴포넌트 렌더링 최적화에 큰 도움이 되지만 주의할 점은 useCallback
과 useMemo
를 무분별하게 사용한다면, 이를 사용하는 코드와 메모제이션용 메모리가 추가로 필요하게 되므로 적절하게 사용해야한다.
Author And Source
이 문제에 관하여([TIL] React #useReducer, useCallback, useMemo 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@damho0514/TIL-React-useReducer-useCallback-useMemo-사용
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import React from "react";
function App() {
const [count, setCount] = React.useState(0);
const handleClick = React.useCallback(() => console.log("clicked"), []);
return (
<>
<button onClick={() => setCount(count + 1)}>카운트 올리기</button>
<button onClick={handleClick}> 클릭하기</button>
</>
);
}
export default App;
위 코드처럼 useCallback을 감싸면 이전에 생성한 함수를 저장해두고 재사용이 가능하다!
함수의 동작은 똑같지만 좀 더 최적화가 좋다. 메모제이션 패턴을 이용한 것이며, 의존성 빈 배열로 두번째 인자에 넣는다.
의존성 빈배열을 명시하지 않는다면 제대로 인지하지 못하고 이전 값을 출력하므로 반드시, 의존성 빈배열을 명시해줘야함.
-
useCallback은 함수를 반환하는 반면,
useMemo
도 최적화에 사용되지만 함수가 아닌 값을 반환할때 쓰인다. -
버튼을 클릭할때 두배로 계산한 값을 출력을 한다면,컴포넌트가 재렌더링 되었을 때, 불필요한 연산을 하게 되고 컴포넌트의 상태값이 많고 복잡한 연산의 경우?? 최적화가 좋지 않아 useMemo를 통해 최적화가 필요하다.
-
의존하는 값이 변경될 때에만 연산하므로 최적화가 개선되며,
useCallback과 마찬가지로 두번째 인자 배열에 의존하는 값을 반드시 명시해야함.
정리를하며
useMemo는 상태값을 반환하고, useCallback은 함수를 반환하는 차이이다.
적절히 사용하면 컴포넌트 렌더링 최적화에 큰 도움이 되지만 주의할 점은 useCallback
과 useMemo
를 무분별하게 사용한다면, 이를 사용하는 코드와 메모제이션용 메모리가 추가로 필요하게 되므로 적절하게 사용해야한다.
Author And Source
이 문제에 관하여([TIL] React #useReducer, useCallback, useMemo 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@damho0514/TIL-React-useReducer-useCallback-useMemo-사용
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
useMemo는 상태값을 반환하고, useCallback은 함수를 반환하는 차이이다.
적절히 사용하면 컴포넌트 렌더링 최적화에 큰 도움이 되지만 주의할 점은 useCallback
과 useMemo
를 무분별하게 사용한다면, 이를 사용하는 코드와 메모제이션용 메모리가 추가로 필요하게 되므로 적절하게 사용해야한다.
Author And Source
이 문제에 관하여([TIL] React #useReducer, useCallback, useMemo 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@damho0514/TIL-React-useReducer-useCallback-useMemo-사용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)