React - 자식 컴포넌트(Child Component) 값을 부모 컴포넌트(Parent Component)에게 전달하기

April 17, 2019

부모 컴포넌트 (페이지) 안에 자식 컴포넌트 (캘린더)가 있고 사용자가 선택한 체크인-체크아웃 날짜를 부모 컴포넌트에게 전달 하고 싶다면?

부모-자식 컴포넌트 관계를 이해하기 위해 필수적으로 선행되어야 하는 것은 콜백함수에 대한 이해다. event handler로 넘어가는 함수는 모두 콜백함수이다. 아래 링크에서 콜백함수에 대한 자세한 설명을 찾아볼 수 있다.

콜백함수 설명 링크

아래 예시를 보자.

goToMessage = () => {
    this.props.history.push('/messagelist');
  }

  render() {

    return (
      <div className="mainwrapper">
        <div className="upperBar">
        <img
        id="logoLocation"
        src={logoImg}/>
          <ul className="underBar">
            <li
            className="menubar"
            onClick={this.goToMessage}>Message list</li>

onClick이벤트를 통해 goToMessage 메서드를 호출하고 그에 따라 해당 li태그에 클릭을 하면 /messagelist 주소로 이동하게 된다.

이 콜백 함수는 자식 컴포넌트의 값을 부모 컴포넌트에 전달할 때 유용하게 활용할 수 있다.

로직: 부모함수에서 콜백함수를 정의 → 정의한 콜백함수를 props를 통해 자식 컴포넌트에 전달→자식 컴포넌트에서 어떠한 이 벤트가 발생하면 전달받은 콜백함수를 호출(이를 통해 자식컴포넌트에서 데이터를 부모에게 전달)

이제 부모 컴포넌트 (페이지) 안에 자식 컴포넌트 (캘린더)가 있다는 가정 하에 사용자가 선택한 체크인-체크아웃 날짜를 부모 컴포넌트에게 전달해보자.

//부모 컴포넌트
class Main extends React.Component {
  constructor() {
    super();
    this.state ={
      guestnum:'',
    }
  }

  saveTripDates = (startfrChild, endFrChild) => {
    startfrChild && endFrChild && console.log(startfrChild.format('YYYY/MM/DD'), endFrChild.format('YYYY/MM/DD'))
  } // 자식 컴포넌트로부터 체크인, 체크아웃 날짜를 전달 받고 싶습니다.
//각각 날짜 value 가 true일때만 console.log로 값을 호출합니다.

render() {

    return (
         <Picker
            saveTripDate={this.saveTripDates}
          />

//자식 컴포넌트

class Picker extends React.Component {
  constructor(props) {
    super(props);
    this.state ={
      startDate: null,
      endDate: null,
      focusedInpupt: null,
      date: null,
      focused: true
    }
  }
  handleDateChange = (dates) => {
    let startDate = dates.startDate;
    let endDate = dates.endDate;
    this.props.saveTripDate(startDate, endDate); //props를 통해 전달받은 부모 메서드
    this.setState({
      startDate: startDate,
      endDate: endDate
    })
  }

  render() {
    return (
      <div>
        <div>
          <div>
            <DateRangePicker
              startDate={this.state.startDate}
              startDateId="your_unique_start_date_id"
              endDate={this.state.endDate
              endDateId="your_unique_end_date_id"
              onDatesChange={this.handleDateChange} //onDatesChange 이벤트가 발생하면 handleDateChange함수로 이동
              focusedInput={this.state.focusedInput}
              onFocusChange={focusedInput => this.setState({ focusedInput })}
            />

위와 같이 부모 메서드 saveTripDate에 자식 컴포넌트가 변수를 전달한다다. 즉, 부모가 메서드를 정의하고 자식이 그 메서드를 호출해야만 다시 부모 메서드에 자식 컴포넌트에서 정의된 변수를 태워보낼 수 있는(?) 구조다.

다시한번 정리하면, Parent component의 saveTripDate props를 통해 부모 메서드를 Child component에 전달하였고, Child component에서 특정 이벤트가 발생시 실행되게 한 함수에 있는 부모 메서드를 통해 (this.props.saveTripDate) 데이터를 전달하였다.