props, useEffect
부모에 조건
React에서 props와 useEffect는 매우 중요한 요소이며, 이들이 제대로 동작하지 않으면 애플리케이션의 동작에 문제가 발생할 수 있습니다.
먼저, props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다. props는 불변하며, 자식 컴포넌트에서는 변경할 수 없습니다. props는 컴포넌트가 렌더링될 때마다 새로운 값을 받을 수 있습니다.
useEffect는 컴포넌트가 렌더링될 때마다 실행되는 함수입니다. 이 함수는 컴포넌트가 마운트되거나 업데이트되거나 언마운트될 때 실행됩니다. useEffect는 비동기적으로 동작하므로, 컴포넌트가 렌더링되고 나서 실행됩니다.
props와 useEffect의 실행 순서는 다음과 같습니다:
부모 컴포넌트에서 props 값을 변경합니다.
자식 컴포넌트가 렌더링됩니다.
useEffect 함수가 실행됩니다.
만약 useEffect 함수 내에서 props를 사용한다면, 이 값은 최신 값이 아닐 수 있습니다. 이런 경우 useEffect 함수의 의존성 배열에 props를 추가하여 최신 값을 사용하도록 할 수 있습니다.
만약 useEffect 함수에서 오류가 발생한다면, 다음과 같은 해결법을 시도해 볼 수 있습니다:
useEffect 함수 내에서 발생하는 오류를 확인합니다. 이를 위해서는 콘솔 로그를 확인하거나, 디버거를 사용할 수 있습니다.
의존성 배열을 확인합니다. useEffect 함수의 의존성 배열에 포함된 값이 최신 값인지 확인합니다.
useEffect 함수의 반환값을 확인합니다. 이 함수는 클린업 함수를 반환할 수 있으며, 컴포넌트가 언마운트되거나 업데이트될 때 실행됩니다. 이 함수를 사용하여 메모리 누수를 방지할 수 있습니다.
useEffect 함수를 분리합니다. useEffect 함수를 여러 개로 분리하여 코드를 간소화할 수 있습니다.
useEffect 함수를 useLayoutEffect로 대체합니다. useLayoutEffect 함수는 useEffect와 유사하지만, 렌더링된 이후에 즉시 실행됩니다. 이 함수를 사용하면 레이아웃 관련 작업을 수행할 때 더 정확한 결과를 얻을 수 있습니다.
React.memo, useMemo
React.memo와 useMemo는 둘 다 React에서 성능 최적화를 위해 사용되는 훅(hook)입니다. 하지만 각각의 사용 목적이 다릅니다.
React.memo는 컴포넌트의 props가 변경되었을 때만 컴포넌트를 다시 렌더링하도록 해줍니다. 이를 통해 불필요한 렌더링을 방지하고 성능을 향상시킵니다. React.memo는 일반적으로 함수형 컴포넌트를 래핑하여 사용됩니다.
예를 들어, 아래 코드에서 Parent 컴포넌트는 Child 컴포넌트를 렌더링합니다. 하지만 Parent 컴포넌트가 다시 렌더링되더라도 Child 컴포넌트의 props는 변경되지 않으므로, Child 컴포넌트를 다시 렌더링할 필요가 없습니다. 이때 React.memo를 사용하여 Child 컴포넌트를 래핑하면, Parent 컴포넌트가 다시 렌더링되어도 Child 컴포넌트는 다시 렌더링되지 않습니다.
function Child({ prop1, prop2 }) {
// ...
}
const MemoizedChild = React.memo(Child);
function Parent({ prop1, prop2 }) {
return <MemoizedChild prop1={prop1} prop2={prop2} />;
}반면에, useMemo는 계산 비용이 높은 함수나 연산의 결과를 캐싱하여 성능을 향상시킵니다. useMemo는 함수형 컴포넌트 내에서 사용되며, 해당 함수의 반환 값을 기억하고, 해당 함수를 호출하기 전에 이전에 반환된 값을 반환합니다. 따라서, 계산 비용이 높은 함수나 연산이 많이 호출되는 경우에는 useMemo를 사용하여 성능을 향상시킬 수 있습니다.
예를 들어, 아래 코드에서 computeExpensiveValue 함수는 계산 비용이 많이 드는 함수입니다. Child 컴포넌트가 렌더링될 때마다 computeExpensiveValue 함수가 호출되는 것은 비효율적입니다. 이때 useMemo를 사용하여 computeExpensiveValue 함수의 결과를 캐싱하면, Child 컴포넌트가 다시 렌더링되더라도 computeExpensiveValue 함수는 다시 호출되지 않습니다.
function computeExpensiveValue(prop1, prop2) {
// ...
}
function Child({ prop1, prop2 }) {
const result = useMemo(() => computeExpensiveValue(prop1, prop2), [prop1, prop2]);
//