use Callback, use Memo 및 use Effect를 사용하는 경우
의 주요 차이점은 무엇입니까?useCallback,useMemo ★★★★★★★★★★★★★★★★★」useEffect
각각의 사용 예시를 제시합니다.
간단한 설명.
use Effect(유효)
라이프 메서드의 componentDidMount,componentWillUnmount,componentDidUpdate의존관계가 변경되었을 때 부작용을 일으키기 위해서도 사용할 수 있습니다.즉, 「변수가 변경되었을 경우는, 이것을 실행해 주세요」라고 하는 것입니다.
useCallback
모든 렌더에서 기능 컴포넌트 내의 모든 것이 다시 실행됩니다.하위 구성요소가 상위 구성요소의 함수에 종속되어 있는 경우, 하위 구성요소는 해당 함수가 "변경되지 않음"(참조는 변경되지만 함수가 수행하는 작업은 변경되지 않음) 경우에도 부모가 다시 렌더링할 때마다 다시 렌더링됩니다.
종속성이 변경될 때만 함수가 참조를 변경하도록 하여 하위 렌더링의 불필요한 렌더링을 방지하여 최적화에 사용됩니다.기능이 부작용의 종속성일 때 사용해야 합니다. useEffect.
useMemo
모든 렌더에서 실행되지만 캐시된 값을 사용합니다.특정 종속성이 변경될 때만 새 값이 사용됩니다.이것은 고가의 계산에서 최적화에 사용됩니다.여기에 그것을 설명하는 좋은 답변도 있다.
useEffect()에서는 컴포넌트에 보내는 의존관계에 따라 컴포넌트에 부작용을 일으킬 수 있습니다.
function Example() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
ReactDOM.render(<Example />, document.getElementById('root'))<script src="https://unpkg.com/react@16.8.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.8.0/umd/react-dom.development.js"></script>
<div id="root"></div>위의 예는 React 문서에서 인용한 것입니다.버튼을 클릭할 때마다 카운트 필드(setCount() 사용)에서 갱신이 트리거되고 카운트 변수에 따라 페이지 제목에 갱신이 트리거되는 것을 알 수 있습니다.
useCallback()는 메모된 콜백을 반환합니다.일반적으로 함수 프로포트를 수신하는 하위 컴포넌트가 있는 경우 상위 컴포넌트의 각 재렌더에서 이 기능은 를 사용하여 재실행됩니다.useCallback()종속성 배열의 값이 변경될 때만 이 함수가 다시 검색되도록 할 수 있습니다.
function ExampleChild({ callbackFunction }) {
const [value, setValue] = React.useState(0);
React.useEffect(() => {
setValue(value + 1)
}, [callbackFunction]);
return (<p>Child: {value}</p>);
}
function ExampleParent() {
const [count, setCount] = React.useState(0);
const [another, setAnother] = React.useState(0);
const countCallback = React.useCallback(() => {
return count;
}, [count]);
return (
<div>
<ExampleChild callbackFunction={countCallback} />
<button onClick={() => setCount(count + 1)}>
Change callback
</button>
<button onClick={() => setAnother(another + 1)}>
Do not change callback
</button>
</div>
)
}
ReactDOM.render(<ExampleParent />, document.getElementById('root'));<script src="https://unpkg.com/react@16.8.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.8.0/umd/react-dom.development.js"></script>
<div id="root"></div>useMemo()는 전달된 파라미터의 결과인 메모화된 값을 반환합니다.즉,useMemo()는 일부 파라미터에 대해 한 번 계산한 후 캐시에서 동일한 파라미터에 대해 동일한 결과를 반환합니다.
이것은 대량의 데이터를 처리해야 할 때 매우 유용합니다.
function ExampleChild({ value }) {
const [childValue, setChildValue] = React.useState(0);
React.useEffect(() => {
setChildValue(childValue + 1);
}, [value])
return <p>Child value: {childValue}</p>;
}
function ExampleParent() {
const [value, setValue] = React.useState(0);
const heavyProcessing = () => {
// Do some heavy processing with the parameter
console.log(`Cached memo: ${value}`);
return value;
};
const memoizedResult = React.useMemo(heavyProcessing, [value]);
return (
<div>
<ExampleChild value={memoizedResult} />
<button onClick={() => setValue(value + 1)}>
Change memo
</button>
</div>
)
}
ReactDOM.render(<ExampleParent />, document.getElementById('root'));<script src="https://unpkg.com/react@16.8.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.8.0/umd/react-dom.development.js"></script>
<div id="root"></div>최소한의 설명:
use Effect:
상태 변경에 대한 반응으로 또는 변경이 일어나기 전에 실행되는 논리가 있을 때마다.
useEffect(() => {
// execute when state changed
() => {
// execute before state is changed
}
}, [state]);
또는 종속성이 없는 경우:
useEffect(() => {
// execute when component has mounted
() => {
// execute when component will unmount
}
}, []);
useCallback:
특정 상태에 따라 달라지는 기능이 있을 때마다.이 후크는 성능 최적화를 위한 것으로, 종속 상태를 변경하지 않는 한 구성 요소 내부의 기능이 재할당되지 않도록 합니다.
const myFunction = useCallback(() => {
// execute your logic for myFunction
}, [state]);
useCallback을 사용하지 않으면 myFunction이 모든 렌더링에 재할당됩니다.따라서 useCallback과 마찬가지로 더 많은 컴퓨팅 시간을 사용합니다.
useMemo
특정 상태에 따라 값이 달라지는 경우.useCallback과 마찬가지로 useMemo는 퍼포먼스 최적화를 위해 재할당을 줄입니다.
const myValue = useMemo(() => {
// return calculated value
}, [state]);
useCallback과 마찬가지로 myValue는 상태가 변경될 때만 할당되므로 계산 시간이 단축됩니다.그렇지 않으면 모든 렌더링에 myValue가 재할당됩니다.
! MIMICK 컴포넌트 Will Mount 라이프 사이클
useMemo(() => {
// execute componentWillMount logic
]}, []);
useEffect는 첫 번째 렌더링 후에 호출되며 그 후 종속성이 변경될 때마다 호출됩니다.첫 번째 렌더링 전에 실행되지 않습니다.useMemo는 JS와 인라인으로 실행되므로 Components return 스테이트먼트에 도달하기 전에 실행됩니다.
메모: useCallback을 사용하는 함수와 useMemo 값을 사용하는 함수는 useCallback, useMemo 및 useEffect의 의존관계로 사용할 수 있습니다.컴포넌트 내에서 적절하게 구조화되어 판독 가능한 상태의 흐름을 유지하려면 이러한 후크를 사용하는 것이 좋습니다.이러한 후크는 렌더를 트리거하지 않습니다.useState와 useReducer만 가능합니다!
렌더 또는 위에서 설명한 후크를 트리거하지 않는 상태를 유지하려면 useRef를 사용할 수 있습니다.useRef는 상태에 의존하는 값이나 효과를 트리거하지 않고 렌더링에 대해 일관된 값을 유지합니다.
언제 사용할 수 있는지 알 수 있으면 좋겠지만, 실제로 어떤 차이가 있는지 알고 싶었어요!다음은 제가 발견한 것입니다.
useMemo는 코드를 즉시 실행하므로 반환값은 코드 뒤에 오는 코드에 사용할 수 있습니다., 첫 렌더링 의 ", " "는 ", "는 "입니다."useRefHTML 컴포넌트에 액세스하기 위해서 사용하고 있는 것은, 초기 실행에서는 사용할 수 없습니다.ref.current에게useMemo의 의존관계useMemo첫 번째 렌더링 후 코드가 다시 실행되는 경우useRef사용할 수 있게 되었습니다).반환값은 바로 다음에 코드화할 수 있으므로 각 렌더에서 다시 실행할 필요가 없는 복잡한 계산에 권장됩니다.반환값을 즉시 사용할 수 있기 때문에 지금 값을 저장하고 나중에 액세스하기 위해 상태를 망칠 필요가 없습니다.반환값을 취득하기만 하면 됩니다.useMemo()바로 사용할 수 있습니다.useEffect는 즉시 실행되지 않고 첫 번째 렌더링 후에 실행됩니다., 임의의 「」를 합니다.useRefHTML 요소를 참조하는 값은 첫 번째 실행 시 유효합니다.함수의 모든 코드가 종료되고 렌더링된 후에 실행되므로 이 값을 사용할 수 있는 코드가 더 이상 실행되지 않으므로 반환 값을 가질 필요가 없습니다.한 방법useEffect코드는 상태를 변경하여 재렌더를 발생시키거나 직접 DOM을 수정하는 방식으로 눈에 보이는 모든 작업을 수행할 수 있습니다.useCallbackis is is is is와useMemo아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 맞다.은 ,을 합니다.useCallback은 즉시 할 수 전혀 ).useMemo는 해당 기능을 즉시 실행하고 나중에 사용할 수 있도록 반환값을 저장합니다.★★★★★★★★★★★★★★★와 달리useMemo코드가 사용될 때마다 다시 실행되기 때문에 복잡한 계산에는 적합하지 않습니다.함수의 인 '돌아가다'를.useCallback을 '하다'와 같이 했을const onClick = () => { ... }에서는 "JSX"로 표시됩니다.onClick={() => { ... }}그러면 모든 렌더에서 함수의 새 인스턴스를 얻을 수 있으므로 하위 구성요소는 사용자가 모든 렌더에서 다른 함수로 콜백을 변경했다고 생각할 때 항상 다시 검색됩니다. ★★★★★★★★★★★★★★★★★.useCallback매번 동일한 함수 인스턴스를 반환하므로 다른 변경 사항이 없는 경우 하위 함수가 렌더링을 완전히 건너뛸 수 있으므로 앱의 응답성이 향상됩니다.
를 들어, 같은 , 양쪽에 전달하면,useMemo ★★★★★★★★★★★★★★★★★」useCallback:
let input = 123;
const output = useMemo(() => {
return input + 1;
}, [
input,
]);
// The above function has now run and its return value is available.
console.log( output ); // 124
input = 125; // no effect as the function has already run
console.log( output ); // 124
let input = 123;
const output = useCallback(() => {
return input + 1;
}, [
input,
]);
// The above function has not run yet but we can run it now.
console.log( output() ); // 124
input = 125; // changes the result as the function is running again
console.log( output() ); // 126
서서,,useCallback변경될 까지 향후 시 함수가 됩니다., 「」는, 「원래의 를 되돌립니다.useMemo는 실제로 함수를 즉시 실행하고 반환 값만 기억합니다.
다.useCallback() ★★★★★★★★★★★★★★★★★」useMemo()할 수 합니다.useEffect()해당 코드는 렌더가 완료된 후 한참 후에 실행되기 때문에 실행되지 않습니다.
useEffect
구성 요소가 마운트, 마운트 해제되고 해당 종속성이 변경되면 호출됩니다.
컴포넌트가 데이터 취득에 사용할 수 있습니다.mounted,subscribe ★★★★★★★★★★★★★★★★★」unsubscribe컴포넌트 ''' 스트림'' mounts ★★★★★★★★★★★★★★★★★」unmounts('js'는 'JS'입니다.
const [userId, updateUser] = useState(1);
useEffect(()=>{
//subscription
const sub = getUser(userId).subscribe(user => user);
// cleanup
return () => {
sub.unsubscribe();
}
},[userId]) // <-- Will get called again when userId changes
청소가 필요 없는 일회성 메서드 호출에도 사용할 수 있습니다.
useEffect(()=>{
oneTimeData();
},[]); // pass empty array to prevent being called multiple times
useCallback
모든 컴포넌트 렌더에서 재현하고 싶지 않은 기능이 있습니까?
컴포넌트 마운트 또는 마운트 해제에서 호출되지 않는 함수를 원하십니까?
useCallback
const [val, updateValue] = useState(0);
const Compo = () => {
/* inc and dec will be re-created on every component render.
Not desirable a function does very intensive work.
*/
const inc = () => updateValue(x => x + 1);
const dec = () => updateValue(x => x - 1);
return render() {
<Comp1 onClick={inc} />
<Comp2 onClick={dec} />
}
}
useCallback을 위해
const [val, updateValue] = useState(0);
const Compo = () => {
const callbackInc = useCallback(() => {
setCount(currentVal => currentVal + 1);
}, []);
const callbackDec = useCallback(() => {
setCount(currentVal => currentVal - 1);
}, []);
return render() {
<Comp1 onClick={callbackInc} />
<Comp2 onClick={callbackDec} />
}
}
가 「」에 .setCount 그러면 원하는 변수는useCallback의존관계 배열에 'watch'를 지정해야 변경 효과가 없습니다.
const callbackInc = useCallback(() => {
setCount(val + 1); // val is an 'outside' variable therefore must be specified as a dependency
}, [val]);
useMemo
처리량이 많고 결과를 메모(캐시)하고 싶습니까?사용하다useMemo
/*
heavyProcessFunc will only be called again when either val or val2 changes
*/
const result = useMemo(heavyProcessFunc(val, val2),[val,val2])
이들 훅에는 모두 같은 목적이 있습니다.즉, 중복 컴포넌트의 재구축(및 훅 내부의 재실행)을 회피하는 것입니다.
useEffect는 아무것도 반환하지 않기 때문에 이러한 경우에 적합합니다.
useCallback나중에 컴포넌트에서 사용할 함수를 반환합니다.일반 함수 선언과 달리 종속성이 변경되지 않는 한 컴포넌트 재구축은 트리거되지 않습니다.
useMemo의 또 다른 풍미일 뿐이다useCallback.
내가 지금까지 본 것 중 가장 좋은 설명은 이렇다.
언급URL : https://stackoverflow.com/questions/56910036/when-to-use-usecallback-usememo-and-useeffect
'programing' 카테고리의 다른 글
| 스프링 MVC에서 JSON payload를 @RequestParam에 POST하는 방법 (0) | 2023.03.21 |
|---|---|
| angularjs $140.높이가 정의되지 않았습니다. (0) | 2023.03.21 |
| 일치하는 항목이 없을 때 JPA 쿼리 값 반환 (0) | 2023.03.21 |
| [ Validate ]옵션 버튼의 각도 확인JS (0) | 2023.03.21 |
| JSX는 무엇의 약자입니까? (0) | 2023.03.21 |