[React.ts] 상위 컴포넌트로 값 전송

React 프로젝트를 개발할 때  업데이트 되는 컴포넌트를 줄이기 위해 기능별로 최대한 나누어서 구현하게 되는데 이 때 하위 컴포넌트로 값을 넘겨줘야할 때가 많이 생깁니다.

상위 컴포넌트에서 하위 컴포넌트로 값을 넘겨줄 땐 Props를 사용하면 되지만 하위 컴포넌트에서 Props로 받은 값을 함수를 통해 값을 가공하려고 변경해봐도 화면이 리렌더링 되지 않습니다.

이 때 상위 컴포넌트로 변경할 값을 다시 던져주고 상위 컴포넌트에서 함수를 통해 값 변경 후 다시 하위 컴포넌트로 던져줘야 하는데 이 때 값을 전송하는 방법에 대해 작성해보겠습니다.

 

구현할 함수를 상위 컴포넌트에서 작성해준 뒤 하위 컴포넌트에 Props로 던져주면 됩니다.

부모 컴포넌트

import { useState } from "react";

import { ChildComponent } from "./child";

const ParentComponent = () =>
{
    const [text, _setText] = useState<string>( "hello" );

    const getChildDataHandler = ( data :string ) =>
    {
        if ( data === "hello" )
            console.log( text );
    };
    return <>
        <ChildComponent text={text} getChildData={getChildDataHandler} />
    </>;
};

자식 컴포넌트

export interface childComponentProps {
    text: string;
    getChildData: ( _text: string ) => void;
}

export const ChildComponent: React.FC<childComponentProps> = ( { text, getChildData } ) =>
{
    const onButtonClickHandler = () =>
    {
        getChildData && getChildData( text );
    };

    return <>
        <label>{ text }</label>
        <button onClick={onButtonClickHandler}></button>
    </>;
};