[React] 부모 컴포넌트에서 자식 컴포넌트에 값 전달하기

navigate도 많이 쓰고 여러가지 쓰는데 부모 컴포넌트에서 자식 컴포넌트에 값 전달하는 방법도 있을 것 같아, 찾아보다가 정리하게 되었다.

props의 개념

• 상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 수단.
• 하위 컴포넌트에서 상위 컴포넌트가 전해준 값에 접근을 할 수 있게 한다.
• 하위 컴포넌트에서 상위 컴포넌트로 값을 전달할 수 없다.

props의 사용

1. 상위 컴포넌트에서 하위 컴포넌트로 값 전달

1) 상위 컴포넌트(부모 컴포넌트)

function 함수=()=>{
	 const [변수, set변수] = useState('')
}

const 상위페이지이름 =()=>{
	<하위페이지이름 value={변수} /> 
}

2) 하위 컴포넌트(자식 컴포넌트)

<p>전달 받은 값 : {props.value}</p>

값이 전달되는 방식

1. 상위 컴포넌트에서 넘겨주고자 하는 값을 선언한다. (useState를 사용한다.)
2. 받고자하는 하위 컴포넌트에 value값을 넣어 넘겨준다.
3. 하위컴포넌트에서 props로 받아, 값을 받아온다.
4. props.상위컴포넌트 변수값을 넣어 가져온다.

예시) 상위 컴포넌트

import React, { useState } from "react";
import Down from "./Down";

function Up() {
  const [test, setTest] = useState("유희왕짱");
  return (
    <div>
      <Down value={test}></Down>
    </div>
  );
}
export default Up;

반응형

하위 컴포넌트

import React from 'react';

function Down(props){
  return(
    <div>
      <p>전달 받은 값:{props.value}</p>
    </div>
    )
}
export default Down;

→ 상위 컴포넌트 안에 하위 컴포넌트가 포함되어 있어야 한다. 그러면 상위컴포넌트에서 하위값이 나타나게 된다.

url

전달 받은 값

2. 하위 컴포넌트에서 상위 컴포넌트로 값 전달

: setter 함수를 이용하여 부모 컴포넌트에게 데이터를 전달

1) 상위 컴포넌트(부모 컴포넌트)

function 상위페이지이름 =()=>{
	const [변수, set변수] = useState('')
	<하위페이지이름 set변수={set변수} /> 
}

2) 하위 컴포넌트(자식 컴포넌트)

function 함수 =(props)=> {
	function 함수이름(){
        props.상위컴포넌트set변수("바꾸고자 하는 값");
      }
	<button onClick={함수이름}>부모 컴포넌트로 데이터 전달</button>
}

예시) 상위 컴포넌트

import React, { useState } from "react";
import Down from "./Down";

function Up() {
  const [test, setTest] = useState("유희왕짱");
  return (
    <div>
      <Down setTest={setTest}></Down>
      <p>{test}</p>
    </div>
  );
}
export default Up;

하위 컴포넌트

import React from 'react';

function Down(props){
    function sendData(){
        props.setTest("자식 데이터");
      }
  return(
    <div>
      <button onClick={sendData}>부모 컴포넌트로 데이터 전달</button>
    </div>
    )
}
export default Down;

하위컴포넌트에서 상위 컴포넌트로 값을 전달

1. 하위 컴포넌트에서 함수를 만든다. 그리고 props.

부모 컴포넌트로 데이터 전달

🔗 참고

https://webaura.tistory.com/entry/Reactjs-부모에서-자식-자식에서-부모-값-전달하는-방법-props-function

https://covelope.tistory.com/entry/React리액트-하위-컴포넌트에서-데이트-받아서-상위-컴포넌트로-전달

https://intrepidgeeks.com/tutorial/pass-values-to-parentchild-components

https://songzzi.github.io/2021/11/21/react-2/ → 설명 잘 되어 있음

https://itprogramming119.tistory.com/entry/React-Objects-are-not-valid-as-a-React-child-해결-방법 → 오류