[React] 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하기

 

 

 

 

부모 컴포넌트에서 자식 컴포넌트로 데이터를 보낼 때, props로 쉽게 전달할 수 있다.

역방향으로 자식 컴포넌트에서 부모 컴포넌트로 데이터를 보내고 싶을 때는 어떻게 처리해야 할까? 

 

 

 

✅ 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하기

1. 부모 컴포넌트에 함수를 선언한다.

2. 자식 컴포넌트의 props로 함수를 전달한다.

function App() {

const parentFunc(data) {
	console.log(data)
}

return <Child parentFunc={parentFunc} />
}

3. 자식 컴포넌트에서 부모 컴포넌트의 함수를 호출하면서, 인자로 데이터를 전달한다.

function Child({ parentFunc }) {
	const [data, setData] = useState("안녕하세요!");
    parentFunc(data);
    
    return <></>
}

파라미터로 넘어온 데이터가 콘솔창에 찍히는 것을 확인할 수 있다.