[React] 최상위 컴포넌트에서 사용하는 함수에 return 사용이 안되는 이유

구조나 흐름을 생각 못하고 return을 사용하면 뭔가를 반환해준다라고만 생각하고 안일하게 썼던걸 반성하면서 백업

---

React에서는 상위 컴포넌트가 하위 컴포넌트로 함수를 전달할 때, 하위 컴포넌트에서 해당 함수를 호출함으로써 상위 컴포넌트의 상태를 업데이트할 수 있습니다. 하지만 함수의 return 값을 통해 상위 컴포넌트에 값을 전달할 수는 없습니다. 그 이유는 React 컴포넌트 트리의 구조가 단방향 데이터 흐름을 따르기 때문입니다.

단방향 데이터 흐름 원리

React에서는 상위 컴포넌트가 하위 컴포넌트에 데이터를 props로 전달할 수 있지만, 반대로 하위 컴포넌트가 return을 통해 상위 컴포넌트에 데이터를 전달할 수는 없습니다. 하위 컴포넌트가 상위 컴포넌트에 데이터를 전달하려면 상위 컴포넌트에서 정의된 함수를 호출하는 방식으로 전달합니다.

대안: 상태 업데이트 함수 사용하기

하위 컴포넌트에서 상위 컴포넌트의 상태를 변경하고자 할 때는 상위 컴포넌트에서 상태 업데이트 함수를 정의하여 하위 컴포넌트로 전달해야 합니다. 하위 컴포넌트가 return을 통해 값을 반환하는 대신, 전달된 상태 업데이트 함수를 호출하여 필요한 값을 상위 컴포넌트로 전달합니다.

 

예시 코드

아래는 return 대신 상위 컴포넌트에 상태 업데이트 함수를 전달하여 값을 업데이트하는 예시입니다.

Container.js (상위 컴포넌트)

import React, { useState } from 'react';
import TopComp from './TopComp';
import BottomComp from './BottomComp';

function Container() {
    const [count, setCount] = useState(0);

    // 상태를 업데이트할 수 있는 함수
    const updateCount = (newCount) => {
        setCount(newCount);
    };

    return (
        <div>
            <TopComp count={count} />
            <BottomComp updateCount={updateCount} />
        </div>
    );
}

export default Container;

이렇게 하면 TopComp는 count 상태를 통해 현재 값이 변경될 때마다 최신 값을 반영하게 됩니다.

BottomComp.jsx (하위 컴포넌트)

BottomComp에서 updateCount 함수를 useEffect로 호출하여 count 값을 상위 컴포넌트에 전달합니다.

import React, { useEffect } from 'react';

function BottomComp({ updateCount }) {
    useEffect(() => {
        updateCount(1); // count 값을 상위 컴포넌트로 전달
    }, [updateCount]);

    return <div>Bottom Component</div>;
}

export default BottomComp;

TopComp.jsx (값을 표시하는 컴포넌트)

TopComp는 count 값을 받아 화면에 표시합니다.

 

import React from 'react';

function TopComp({ count }) {
    return <div>Count: {count}</div>;
}

export default TopComp;

설명

1. Container.js에서 count를 상태로 관리하고, updateCount 함수가 상태를 변경하도록 설정했습니다.
2. TopComp는 count 상태를 props로 받아, 상태가 변경될 때마다 UI에 반영됩니다.
3. BottomComp에서는 updateCount를 useEffect로 호출하여 count를 1로 설정합니다.

이제 BottomComp에서 updateCount(1)을 호출하면 Container.js의 count 상태가 1로 업데이트되고, 이 값이 TopComp에 반영됩니다.

요약

• return을 통한 데이터 전달은 불가능: React의 단방향 데이터 흐름 특성상, 하위 컴포넌트에서 return으로 상위 컴포넌트에 값을 전달할 수 없습니다.
• 상위에서 정의한 상태 업데이트 함수를 사용: 하위 컴포넌트가 상위 컴포넌트에 데이터를 전달하려면 상위 컴포넌트에서 상태 업데이트 함수를 전달하고, 하위 컴포넌트에서 해당 함수를 호출해 데이터를 전달해야 합니다.