[ React ] Warning: Cannot update a component ...

Warning: Cannot update a component (`Main`) while rendering a different component (`MainHeader`). To locate the bad setState() call inside `MainHeader`, follow the stack trace as described in

 

렌더링하는 동안 함수가 함수가 나와서 업데이트를 할수 없는 상황이 생긴거같습니다.

저의 경우에는 자식 컴포넌트에서 부모 컴포넌트로 넘겨주는 상황에서 발생했습니다.

 

상황

import { useState } from "react";

const Child = ({parentFn}) => {

    const [title, setTitle] = useState('');
    
    parentFn(title); // 오류 발생지점
    
    const onTitle = (e) => {
        setTitle(e.target.value);
    };

    return (
        <>
            <input type="text" value={title} onChange={onTitle} />
            
            parentFn 함수가 렌더링 중에 나와버려서 생기는 오류입니다.
        </>
    );
};


export default Child;

 

해결방법

import { useEffect, useState } from "react";

const Child = ({parentFn}) => {

    const [title, setTitle] = useState('');
    
    // 해결 위치
    useEffect(() => {
        parentFn(title);
    }, [title])
    
    const onTitle = (e) => {
        setTitle(e.target.value);
    };

    return (
        <>
            <input type="text" value={title} onChange={onTitle} />
        </>
    );
};


export default Child;

 

위 코드에서는 useEffect로 감싸주었습니다.