props로 함수 전달하기/자식에서 사용하기

 

props로 함수 전달하기(매개변수x)

• 부모 컴포넌트

import React from "react";
import Child from "./Child";

const Parent = () => {
  // props로 전달할 함수
  const testFunc = () => {
    console.log("addArticle 함수 호출");
  };

  return <Child propsFunc={testFunc} />;
};

export default Parent;

• 자식 컴포넌트

import React from "react";

const Child = ({ propsFunc }) => {
  return (
    <button onClick={propsFunc}> // 버튼 클릭 시 부모 컴포넌트의 testFunc 함수 호출
      Add Article
    </button>
  );
};

export default Child;

 

props로 함수 전달하기(매개변수O)

• 부모 컴포넌트

const Parent = () => {
  // props로 전달할 함수
  const testFunc = (title, content) => {
    console.log("addArticle 함수 호출");
    console.log("title:", title);
    console.log("content:", content);
  };

  // props로 전달할 매개변수
  const testTitle = "테스트제목";
  const testContent = "테스트내용";

  // 자식 컴포넌트 props로 함수와 매개변수를 전달한다
  return (
    <Child propsFunc={testFunc} param1={testTitle} param2={testContent} />
  );
};

• 자식 컴포넌트

const Child = ({ propsFunc, param1, param2 }) => {
  // 버튼 클릭 시 실행할 함수
  const buttonClick = () => {
    propsFunc(param1, param2);
  };

  // 버튼 클릭 시 부모 컴포넌트의 testFunc가 실행되어 콘솔에 param1과 param2를 출력한다
  return (
    <button onClick={buttonClick}>버튼 클릭</button>
  );
};

 

 

이러한 것을

Props Drilling(프롭스 드릴링) 이라고 한다.

 

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 중간 컴포넌트들을 거쳐야 하는 과정을 말한다.

 

Props Drilling의 단점:

1. 컴포넌트 깊이가 깊어지면 관리가 어려움
2. 중간 컴포넌트들이 불필요한 props를 전달만 하게 됨

이를 해결하기 위한 방법:

1. Redux, Recoil 같은 전역 상태 관리 사용
2. Context API 사용
3. 컴포넌트 구조 재설계

 

참고사항

• 자식 컴포넌트에 함수를 전달할 때 기본값을 설정하기

→ 코드의 안전성, 유연성, 명확성 및 가독성을 높이는 데 기여

// 1. 부모 컴포넌트 (PageAiPersona)
function PageAiPersona() {
  const updatePersonaList = () => { ... }

  return (
    <OrganismPersonaCardList
      setIsStarred={updatePersonaList}  // props로 함수 전달
    />
  );
}

// 2. 자식 컴포넌트 (OrganismPersonaCardList)
function OrganismPersonaCardList({   setIsStarred = () => {}) {  // props로 받음
  const toggleFavorite = () => {
    // ...
    setIsStarred(updatedPersonaData);  // 전달받은 함수 사용
  }
}

하위 컴포넌트의 값을 상위(부모)컴포넌트로 전달하기

 

 

하위 컴포넌트의 값을 상위(부모)컴포넌트로 전달하기

 

[React] 컴포넌트 props로 함수 전달하기, 다른 컴포넌트 함수 호출하기

[React] 컴포넌트 props로 함수 전달하기, 다른 컴포넌트 함수 호출하기

 

[React] Props 로 콜백 함수 전달하기 / 어떨때 Props로 콜백 함수를 전달해야 하는가?

[React] Props 로 콜백 함수 전달하기 / 어떨때 Props로 콜백 함수를 전달해야 하는가?

 

부모에서 자식 / 자식에서 부모 값 전달하기

부모에서 자식 / 자식에서 부모 값 전달하기