지난 몇 주 동안 Frontend React 인터뷰를 위해 공부했는데 내가 사용하고 있던 가이드에서 질문을 받았고 솔직히 혼란스러웠습니다. 하위에서 상위로 데이터를 전달하는 경우 Redux, Mobx 또는 Recoil과 같은 상태 관리 라이브러리 또는 Context API를 사용합니다. 참고로 저는 Redux에만 익숙하지만 Context API 또는 Redux 또는 모든 상태 관리 라이브러리이므로 Google 검색 및 일반 Stackoverflow를 사용하여 일부 매체 기사를 읽고 React Docs를 조금 읽은 후 실제로 CALLBACKS를 사용하여 자식에서 부모로 데이터를 전달할 수 있다는 것을 알게 되었습니다.

처음에는 혼란스러웠지만 MDN 문서에 따르면 다음과 같이 기억했습니다.
콜백 함수는 다른 함수에 인수로 전달되는 함수입니다. 이 콜백 함수는 일종의 루틴이나 작업을 완료하기 위해 외부 함수 내에서 호출됩니다.

절차

기본적으로 이 프로세스를 달성하는 데는 두 단계가 있으며 진행하면서 이를 나열하고 구성 요소를 생성할 것입니다.

부모 구성 요소를 만든 다음 부모 구성 요소에 콜백 함수를 만듭니다.

function ParentComponent() {
  const [team, setTeam] = useState("");

This here is the callback function that will be passed as a prop to the childcomponent
  const addTeam = (team) => {
    setTeam(team)
  }

  return (
     <>
    <h3>This is the Parent Component that we 
        will be focusing on
    </h3>
    <h1>Your selected team is {team} </h1>
Below, the addTeam function is then passed into the child component as a prop
    <ChildComponent addTeam={addTeam}/>
     </>
  );
}

ChildComponent의 구조 생성

const ChildComponet = ({ addTeam }) => {
The addTeam function will then be used to push the data(team) selected back to the ParentComponent
  const teams = ['LA Clippers', 'Boston Celtics', 'Cleveland Cavilers', 'Memphis Grizzlies'];

  return (
    <div>
      <h3>Choose Your Team in the child 
          component
      </h3>
      <ul>
        {teams.map(team, index => {
          return (
            <li key={index} onClick={() => addTeam(base)}>
              {team}</span>
            </li>
          )
        })}
      </ul>
      )}
    </div>
  )
}

ChildComponent에서 우리는 단순히 onClick 속성을 사용하여 사용자 클릭을 처리한 다음 클릭한 데이터가 상위 구성 요소로 전달되고 선택한 팀이 화면에 표시되면 작업이 완료됩니다.

결론

데이터가 ChildComponent에서 ParentComponent로 성공적으로 전달되었으며 반응의 단방향 흐름이 깨졌습니다. 내가 실수했다고 생각하시면 친절하게 저에게 연락하여 제가 놓친 부분을 알려주세요. 읽어주셔서 감사합니다.