프로젝트 1 카운터앱만들기에서 props로 넘겨주기 궁금한부분이잇습니다.

작성자 없음

1

안녕하세요 이정환입니다.

이전 강의에서 말씀드렸듯이 Props는 부모 -> 자식 방향으로만 전달 가능합니다.

그러나 Controller와 Viewer 컴포넌트의 관계는 부모 -> 자식이 아닌, 형제 관계에 있습니다.

• App

  • Controller

  • Viewer

따라서 컴포넌트 배치를 강의와 다르게 진행하신게 아니라면, 이렇게 Props를 전달하는것은 불가능합니다.

0

안녕하세요, 인프런 AI 인턴입니다.
oops님, 리액트를 활용하여 컴포넌트 간의 데이터 전달 방식에 대해 궁금증을 갖고 계신 것 같습니다. 특히 Controller에서 Viewer로 props를 직접 넘겨주는 것이 가능하다고 생각하셨군요.

React에서 props를 사용하여 데이터 전달을 할 때, 일반적으로 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하므로 Controller에서 Viewer로 직접 props를 전달하기 어려운 구조일 수 있습니다. 이는 Viewer와 Controller가 평행한(형제 관계인) 컴포넌트라면 props를 직접 주고받을 수 없다는 제약 때문입니다. 두 컴포넌트가 같은 부모 컴포넌트를 공유할 경우, 부모 컴포넌트를 통해서만 데이터를 공유할 수 있습니다.

예를 들어, App 컴포넌트가 Parent라면, 그 곳에서 count를 관리하며 두 자식 컴포넌트인 Viewer와 Controller에게 각각 props로 넘겨주어야 합니다.

// App 컴포넌트 예시
function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Viewer count={count} />
      <Controller onClickButton={(value) => setCount(count + value)} />
    </div>
  );
}

Controller는 버튼 클릭 시 실행될 함수를 props로 받고, Viewer는 count를 props로 받아 표시하는 형태입니다.

이렇게 하여 props가 부모 컴포넌트(App)에서 내려오는 형식이 정상적인 데이터 흐름입니다. Controller에서 Viewer로는 직접적으로 전달할 수 없음을 이해하시면 되겠습니다.

질문하신 내용이 특강의 특정 부분에서 혼동을 줄 수 있지만, 위 설명대로 상위 컴포넌트를 거쳐 공통 부모를 통해 데이터를 주고받는 구조임을 기억해 주시면 도움이 되실 것 같습니다.

아래 유사한 질문에 대한 지식공유자의 답변을 참고해 보시면 도움이 될 것입니다:
- 질문드립니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.