React 기초5 : 상향식 컴포넌트 통신

📣 이 자료는 Udemy의 React 완벽 가이드 강의와 React 공식문서를 참고하여 작성되었습니다.

그리고 개인적으로 공부하고 이해한 내용을 바탕으로 정리하는 용도로 작성되었으므로 이해를 돕기위한 예시는 최소화하였습니다.

 

자식 → 부모 컴포넌트로 정보 전달하기

앞에서 다루었던 props는 부모 컴포넌트가 자식 컴포넌트에게 전달해주는 정보였다. 그럼 자식 컴포넌트는 어떻게 부모 컴포넌트로 정보를 전달해줄 수 있을까? 답은 함수를 내려주는 것이다. 부모 컴포넌트에서 자식 컴포넌트가 값을 담아줄 수 있는 함수를 만들어서 props로 전달해주는 방법이 있다. 아니면 setState를 다이렉트로 내려줘도 된다.

 

함수를 이용해서 전달해주는 방법

// 부모 컴포넌트
const Parent = () => {
	const [childName, setChildName] = useState('')
    
    const getChildName = (name) => {
    setChildName(name)
    }
    
    return <Child sendChildName = {getChildName} />
}

일단 부모 컴포넌트에서 이렇게 함수를 만들어서 자식 컴포넌트에 props로 내려보낸다.

// 자식 컴포넌트
const Child = (props) {
	const submitHandler = event => {
    	props.sendChildName(event.target.value) // 이렇게 내려준 함수를 props로 꺼내씀
    }
    
    return (
    <div>
    	<form onSubmit={submitHandler}>
        	<label>name<label>
            <input type='text' />
            <button type='submit'>내이름!</button>
        </form>
    </div>
    )
}

이렇게 부모가 내려준 함수를 자식이 props에서 꺼내쓰면, 함수의 작동은 결국 부모 컴포넌트에서 일어나므로, 부모는 자식에게서 정보를 받아서 사용할 수 있는 것이다.

 

props로 전달해 주는 것 말고 조금 형태를 다르게 할 수도 있는데,

// 부모 컴포넌트
const Parent = () => {
	//생략
    return <Child sendChildName = {getChildName} />
}

// 자식 컴포넌트
const Child = ({sendChildName}) {
	const submitHandler = event => { //props. 을 생략하고 사용가능하다.
    	sendChilName(event.target.value)
    }
    
    return (
    // 생략
    )
}

자식 컴포넌트에서 매개변수를 props로 받지 말고 {key} 형태로 받으면, key를 직접 사용해서 함수를 호출할 수 있어서 조금 더 간편해진다.

 

setState를 직접 내려주는 방법

// 부모 컴포넌트
const Parent = () => {
	const [childName, setChildName] = useState('')

    return <Child setChildName = {setChildName} />
}

// 자식 컴포넌트
const Child = ({setChildName}) {
	const submitHandler = event => { //props. 을 생략하고 사용가능하다.
    	setChildName(event.target.value)
    }
    
    return (// 생략)
}

부모 컴포넌트에서 자식컴포넌트에게 애초에 setState를 내려주고, 자식 컴포넌트에서 사용하게 만드는 방법이다. (혼란 방지를 위해 key도 setChildName으로 통일했다.) 이때 childName도 같이 내려주고 input 요소의 value에 초기값으로 넣어주면 양방향 바인딩까지 완성된다.

 

양방향 바인딩에 관련된 내용은 지난 포스팅에서 확인!

2022.08.21 - [Study Note/React] - React 기초4

React 기초4 : <Form>에서 받은 여러 <input>의 state 처리(양방향 바인딩)