인프런 커뮤니티 질문&답변

안녕하세요 정진 서님!
리액트에서 함수를 어느 컴포넌트에 정의해야 하는지는 단순한 규칙보다는, 해당 함수가 어떤 역할을 수행하는지를 기준으로 판단하시는 것이 가장 적절합니다. 이를 이해하시기 쉽도록 설명 중간에 간단한 코드를 함께 섞어 설명드리겠습니다.

우선, 상태를 변경하는 로직이나 애플리케이션의 핵심 동작과 관련된 함수는 보통 상위 컴포넌트에 정의하는 것이 일반적입니다. 예를 들어 상위 컴포넌트에서 count라는 상태를 관리하고 있다면, 이 값을 변경하는 함수 역시 상위 컴포넌트에 두는 것이 자연스럽습니다.

function Parent() {
  const [count, setCount] = React.useState(0);

  const increaseCount = () => {
    setCount(count + 1);
  };

  return <Child onIncrease={increaseCount} />;
}

이와 같이 상위 컴포넌트는 상태와 그 상태를 변경하는 함수를 함께 관리하고, 하위 컴포넌트에는 해당 함수를 props로 전달합니다. 이 구조는 리액트의 단방향 데이터 흐름 원칙에 잘 맞습니다.

하위 컴포넌트에서는 이벤트가 발생했을 때 상위 컴포넌트에서 전달받은 함수를 호출하게 됩니다. 다만, 이 과정에서 하위 컴포넌트 전용 이벤트 처리 로직이 필요하다면, 하위 컴포넌트 내부에 함수를 정의하는 것도 매우 일반적인 패턴입니다.

function Child({ onIncrease }) {
  const handleClick = () => {
    console.log("버튼이 클릭되었습니다.");
    onIncrease();
  };

  return <button onClick={handleClick}>증가</button>;
}

위 코드에서 handleClick 함수는 하위 컴포넌트의 UI 이벤트를 처리하는 역할만 담당하고 있으며, 실제로 상태를 변경하는 책임은 상위 컴포넌트의 increaseCount 함수가 가지고 있습니다. 이러한 구조는 각 컴포넌트의 책임을 명확하게 분리해 줍니다.

강의에서 하위 컴포넌트에도 함수가 정의되어 있는 것처럼 보이는 이유는 대부분 이와 같은 상황 때문입니다. 즉, 하위 컴포넌트에서 이벤트를 직접 처리하고, 필요한 경우 상위 컴포넌트의 함수를 호출하기 위해 중간 단계의 함수가 존재하는 것입니다.

결론적으로, 상태를 변경하거나 여러 컴포넌트에 영향을 주는 로직은 상위 컴포넌트에 정의하는 것이 바람직하며, 이벤트 처리나 UI와 밀접한 로직은 하위 컴포넌트에 정의해도 전혀 문제가 없습니다. 결국 함수의 위치는 “이 로직이 어느 컴포넌트의 책임인가”를 기준으로 판단하시면 가장 혼란 없이 설계하실 수 있을 겁니다.

안녕하세요, 인프런 AI 인턴입니다. 정진 서님.

리액트에서 함수 정의 위치에 대한 질문을 주셨네요. 함수 정의는 상태 관리를 어떻게 할 것인지에 따라 결정되는 경우가 많습니다. 일반적으로 다음과 같은 기준을 참고할 수 있습니다.

상위 컴포넌트에 함수 정의:

1. 상태 관리의 중심: 상위 컴포넌트에 상태와 관련된 함수를 정의하고 하위 컴포넌트에서 이를 호출하는 방식은 일관된 상태 관리를 위한 좋은 패턴입니다.
   
2. 상태 끌어올리기(Lifting State Up): 여러 하위 컴포넌트가 동일한 상태를 공유해야 할 때, 상위 컴포넌트가 상태를 관리하고 하위 컴포넌트에 props로 전달합니다.
   
3. 중복 로직 방지: 동일한 로직이 여러 하위 컴포넌트에서 필요할 때, 상위 컴포넌트에서 함수를 정의하여 필요할 때마다 재사용할 수 있습니다.
   

하위 컴포넌트에 함수 정의:

1. 독립적인 로직: 하위 컴포넌트가 자체적으로 독립적인 로직을 처리해야 할 경우 하위 컴포넌트 내부에 함수를 정의할 수 있습니다.
   
2. 간단한 UI 변환: 하위 컴포넌트 내에서만 사용되는 특정 UI 변경 로직은 하위 컴포넌트에 두는 것이 자연스럽습니다.
   

결론적으로, 함수가 특정 상태와 밀접하게 관련되어 있거나 여러 컴포넌트에 걸쳐 사용된다면 상위 컴포넌트에 정의하는 것이 바람직합니다. 그러나, 하위 컴포넌트 내부적으로만 사용되는 간단한 로직이라면, 하위 컴포넌트 자체에 정의할 수도 있습니다.

관련된 질문과 답변을 통해 더 깊이 있는 이해를 원하신다면 아래 링크를 참고해 주세요:
- 리액트 컴포넌트의 함수 정의 위치에 관한 고민

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