[React] 부모에서 자식, 자식에서 부모 값 전달하는 방법

 

리엑트를 쓰다 보니 부모에서 자식으로 값을 전달할 일이 많았다.

이때에는 props를 통해 전달하면 되었지만 반대로 자식에서 부모로 전달하는 방법은 어떻게 해야 할지 몰라 찾아보던 중

알게 된 김에 포스팅을 해보고자 한다.

 

1. 부모에서 자식으로 값을 전달

props 란?
-상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 수단
-하위 컴포넌트에서 상위 컴포넌트가 전달 한 값에 접근 가능 하게 함
-반대로는 불가능

 

::상위 컴포넌트

import React, { useEffect, useState } from 'react';
import Reviews from './Sections/Reviews';

const StoreDetail = () => {
    <div>
      <div style={{ width: '85%', margin: '3rem auto' }}>
        <Reviews
          newReview={_store.newReview}
          ReviewList={_store.reviews}
          postId={storeId}
        />
      </div>
    </div>
  );
};
export default StoreDetail;

 

::하위 컴포넌트

import React, { useState, useEffect } from 'react';

export const Reviews = props => {
  const storeId = props.postId;

  useEffect(() => {
    setNewReview(props.newReview);
  }, [props.newReview]);

  return ();
};

 

이런식으로 props.(상위컴포넌트에서 지정해준 이름) 으로 하면 접근이 가능하다.

 

2. 자식에서 부모로 값을 전달하는 방법

 

::상위 컴포넌트

import React, { useState, useEffect } from 'react';

export const Reviews = props => {
  const [star, setStar] = useState('');
  
  const getStarRating = num => {
    setStar(num);
  };
  
  return (
  	<StarRating 
    	getStarRating={getStarRating} 
        star={star} 
    />
  );
};

 

::하위 컴포넌트

import React, { useState, useEffect } from 'react';

function StarRating(props) {
  const setStarRating = () => {
  	props.getStarRating(5);
  }
  return (
    <div>
   	  <a onclick={setStarRating}>click</a>
    </div>
  );
}
export default StarRating;

무슨 원리냐 하면

 

자식 컴포넌트는 props를 통해 getStarRating 이라는 함수가 부모 컴포넌트에 있다는 사실을 알고 있으므로 

이 함수를 작동시키기 위해 setStarRating이라는 함수를 만들어 준 뒤 onClick이벤트를 걸어준다.

 

위 이벤트와 함께 setStarRating함수가 동작하면, 부모가 전달해준 함수인 getStarRating(num)함수를  props로 접근한다.

해당 함수는 num이라는 매개변수를 담고 있으므로 5라는 숫자는 부모 컴포넌트에 있는 getStarRating함수에 보내지게 되므로 star의 state가 업데이트가 된다. 

---

출처

https://webaura.tistory.com/entry/Reactjs-%EB%B6%80%EB%AA%A8%EC%97%90%EC%84%9C-%EC%9E%90%EC%8B%9D-%EC%9E%90%EC%8B%9D%EC%97%90%EC%84%9C-%EB%B6%80%EB%AA%A8-%EA%B0%92-%EC%A0%84%EB%8B%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-props-function

[React.js] 부모에서 자식, 자식에서 부모 값 전달하는 방법 props, function