[TECH-QA] 리액트 리렌더링

언제 리렌더링이 발생할까요?

• state가 변경될 때
• props가 변경될 때
• context 값이 변경될 때
• 부모 컴포넌트가 리렌더링되면 자식도 리렌더링

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => setCount(count + 1);

  return <button onClick={handleClick}>{count}</button>;
};

• 버튼 클릭 → setCount 호출 → count 값 변경
• 변경된 state로 인해 MyComponent() 함수 전체가 다시 실행됨
• count, handleClick, JSX 등이 다시 계산됨
• Virtual DOM에서 변화 비교 후, 실제 DOM은 필요한 부분만 업데이트됨

const handleClick = () => setCount(count + 1);

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => setCount(count + 1);

  useEffect(() => {
    console.log("handleClick 함수가 새로 만들어졌어요!");
  }, [handleClick]);

  return <button onClick={handleClick}>{count}</button>;
};

• 버튼을 누르면 setCount로 상태가 바뀌고,
• 컴포넌트가 다시 렌더링됨,
• 그러면 handleClick도 새로 생성됨,
• 따라서 useEffect가 실행됨 → 콘솔에 로그 출력!

그럼 왜 리렌더링 때마다 새로 생성될까요?

📝 [커스텀 훅] usePdfController.js

const usePdfController = () => {
  const [file, setFile] = useState(null);
  const pdfInputRef = useRef(null);

  const handlePDFChange = (event) => {
    const selectedFile = event.target.files[0];
    setFile(selectedFile);
  };

  return { file, pdfInputRef, handlePDFChange };
};

📝 [자식 컴포넌트] FileUpload.jsx (인터랙션만 처리)

const FileUpload = ({ onChange, InputRef, children }) => {
  return (
    <label>
      {children}
      <input type="file" ref={InputRef} onChange={onChange} style={{ display: 'none' }} />
    </label>
  );
};

📝 [부모 컴포넌트] StampController.jsx

const StampController = () => {
  const { file, pdfInputRef, handlePDFChange } = usePdfController();

  return (
    <div>
      <FileUpload InputRef={pdfInputRef} onChange={handlePDFChange}>
        PDF 업로드
      </FileUpload>
      {file?.name && <div>{file.name}</div>}
    </div>
  );
};

• 스테이트 관리: 스테이트는 커스텀 훅(예: usePdfController) 또는 스토어(예: useCanvasStore)에서 관리.
• 인터랙션 컴포넌트: 특정 컴포넌트(예: FileUpload, Button)는 사용자 인터랙션(클릭, 파일 선택 등)만 처리하고, 스테이트나 상태 값을 직접 소유하지 않음.
• 인터랙션 처리: 인터랙션은 훅이나 스토어에서 제공하는 함수(예: handlePDFChange, handleDownload)를 호출.

자식 컴포넌트 <FileUpload/> 리렌더링

📝 스테이트 소유 여부

• 자식 컴포넌트 FileUpload은 자체 스테이트를 가지지 않습니다. 따라서 FileUpload 내부에서 useState나 useReducer로 인해 리렌더링이 발생할 가능성이 없습니다.
• 스테이트는 usePdfController에서 관리되며, file 변경은 StampController 같은 부모 컴포넌트에 영향을 줍니다.

📝 Props 안정성

• 자식 컴포넌트 FileUpload가 받는 props(예: onChange, InputRef)가 변경되지 않는 한, React는 이 컴포넌트를 리렌더링하지 않습니다.
• FileUpload가 props로 받는 handlePDFChange가 메모이제이션되지 않으면, StampController가 리렌더링될 때마다 handlePDFChange는 새로운 함수 참조가 생성되어 FileUpload의 props가 변경된 것으로 간주되어 자식 컴포넌트 FileUpload는 리렌더링 됩니다. 이를 피하기 위해 커스텀 훅 usePdfController에서 handlePDFChange를 메모이제이션(useCallback)하여, 함수가 매 렌더링마다 동일한 참조를 유지하도록 합니다.

// usePdfController.js
// ★★★커스텀 훅 내부에서 useCallback 사용
  const handlePDFChange = useCallback((event) => {
  const selectedFile = event.target.files[0];
  setFile(selectedFile);
}, []);

• InputRef는 useRef로 생성된 참조로, 렌더링 간에 변경되지 않습니다.

📝 부모 컴포넌트의 리렌더링 영향

• 부모 컴포넌트 StampController가 자주 리렌더링되면, 자식 컴포넌트 FileUpload도 기본적으로 리렌더링됩니다.
• React는 부모가 리렌더링되면 자식도 렌더링 시도
• 이를 피하기 위해서는 자식 컴포넌트인 FileUpload을 React.memo로 감싸줍니다.

const FileUpload = ({ onChange, InputRef, children }) => {
  console.log('FileUpload rendered');
  return (
    <label>
      {children}
      <input type="file" ref={InputRef} onChange={onChange} style={{ display: 'none' }} />
    </label>
  );
};
export default React.memo(FileUpload);

• 이렇게 하면 onChange, InputRef, children이 변경되지 않는 한 FileUpload은 리렌더링되지 않습니다. 부모컴포넌트 StampController가 file 상태 변경으로 리렌더링되더라도, 자식 컴포넌트 FileUpload가 React.memo로 감싸져 있다면 props가 변경되지 않는 한 리렌더링을 건너뜁니다

• React.memo는 props의 얕은 비교(shallow comparison)를 수행해 props가 변경되지 않는 한 컴포넌트의 리렌더링을 방지합니다.

• 인터랙션의 경우 (예: 파일 선택)은 handlePDFChange를 호출하고, 이는 usePdfController의 file 상태를 변경합니다. 하지만 이 변경은 StampController의 렌더링에만 직접 영향을 주고, FileUpload은 스테이트를 소유하지 않으므로 간접적인 리렌더링을 피할 수 있습니다.

📝 <FileUpload/> Children Props 변경

<FileUpload InputRef={pdfInputRef} onChange={handlePDFChange}>
  PDF 업로드
</FileUpload>

📝 <FileUpload/> 같은 자식 컴포넌트가 스토어 상태를 직접 구독하지 않도록 하여 리렌더링을 방지 한다.

// 잘못된 예
const FileUpload = ({ onChange, InputRef, children }) => {
  const { file } = useCanvasStore(); // 스토어 구독
  return <input type="file" ref={InputRef} onChange={onChange} />;
};

// 올바른 예
const FileUpload = ({ onChange, InputRef, children }) => {
  return <input type="file" ref={InputRef} onChange={onChange} />;
};

리렌더링이 되지 않는 조건을 지켜는 방법

• 컴포넌트가 자체 스테이트를 소유하지 않고 커스텀 훅으로 관리.
• 컴포넌트가 스토어나 Context를 직접 구독하지 않고 커스텀 훅으로 관리하도록 함.
• 전달된 props(함수, 참조, 값)가 메모이제이션되어 전달 받도록 하기.
• 컴포넌트가 React.memo로 감싸져 있어 부모 리렌더링의 영향을 받지 않음.