React Functional Components의 Props를 비교하십시오.
예전에 제가 어렸을 때 (LOL) 우리는 react 15를 사용했습니다. 더 장황하고 복잡하고 오늘날의 놀라운 업그레이드가 없었지만 라이브 사이클이 있어도 각각 언제 사용해야하는지 알고 있습니다. 게다가 가장 중요한 "componentDidMount", props 값 "componentWillReceiveProps"를 추적하는 또 다른 중요한 주기가 있습니다.
그 당시에는 새로운 props 값을 현재 props 값과 비교할 수 있었습니다.
componentWillReceiveProps(nextProps) {
if(nextProps.count !== this.props.count) {
// Do something here since count prop has a new value
}
}
따라서 오늘날 React 17에서 이와 같은 작업을 수행하여 apollo 쿼리를 건너뛰거나 구성 요소 내부의 부작용을 방지해야 한다고 가정해 보겠습니다.
가장 먼저 생각할 수 있는 것은 컴포넌트 내부의 일부 상태를 설정하여 useEffect 후크를 사용하여 props 값을 추적하는 것입니다.
function ComponentGettingProps({count, ...restProps}) {
const [localCount, setLocalCount] = React.useState(0)
React.useEffect(() => {
if(count === localCount) {
// count prop has the same value
setLocalCount(count)
// ... do what ever you need to do if the count prop value is the same
} else {
// count has a new value, update the local state
setLocalCount(count)
}
}, [count])
return (...)
}
이 방법이 효과가 있긴 하지만 시간이 지남에 따라 여러 소품을 확인하고 논리 블록을 읽기 어려울 수 있으므로 시간이 지남에 따라 꽤 지저분해질 수 있습니다.
그렇다면 이 사건에 대한 다른 해결책은 없을까요? 대답은 예입니다! 우리를 위해 우리는 최고의 반응 네이티브 후크 중 하나를 사용하여 사용자 정의 후크를 만들 수 있습니다: "useRef()"
사용자 정의 후크 "usePrevPropValue"를 빌드해 보겠습니다.
function usePrevPropValue(value) {
const ref = React.useRef();
React.useEffect(() => {
ref.current = value;
});
return ref.current;
}
마술처럼 이 후크는 모든 재렌더링에서 이전 카운트 값을 반환합니다. 이러한 일이 발생하는 이유는 ref에 저장된 현재 값이 저장되지만 모든 렌더링에서 다시 계산되지 않기 때문입니다. 따라서 반환하는 값은 이전에 저장된 값입니다. 현재 prop 값 대신에 하나 :), 매우 놀랍습니다. 반응성의 부족도 훌륭하다는 생생한 예입니다.
이제 후크를 사용합시다.
function ComponentGettingProps({count, ...restProps}) {
const prevCount = usePrevPropValue(count)
return (
<div>
New: {count} Prev: {prevCount}
</div>
);
}
실제로는 여기에서 새 상태를 정의하는 작업을 제거하지만 실제로는 더 이상 사용하지 않는 상태를 업데이트할 때 이 구성 요소를 다시 렌더링하는 작업도 제거합니다. :)
이것은 전체 그림이 필요한 경우를 대비한 라이브 예시입니다.
https://codesandbox.io/s/naughty-snow-uoo48?file=/src/App.js
이 기사가 다음 프로젝트에 도움이 되길 바라며 읽어주셔서 감사합니다. 다음 편에서 만나요!
Reference
이 문제에 관하여(React Functional Components의 Props를 비교하십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/alexandprivate/nextprops-in-react-functional-components-1jc2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)