onClickButton함수를 넘겨주는 것이 궁금합니다.

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

6.3) 기능 구현하기

해결된 질문

작성

import "./App.css";
import Viewer from "./components/Viewer";
import Controller from "./components/Controller";
import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const onClickButton = (value) => {
    setCount(count + value);
  };
  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <section>
        <Viewer count={count} />
      </section>
      <section>
        <Controller onClickButton={onClickButton} />
      </section>
    </div>
  );
}

export default App;

const Controller = ({ onClickButton }) => {
  return (
    <div>
      <button
        onClick={() => {
          onClickButton(-1);
        }}
      >
        -1
      </button>
      <button
        onClick={() => {
          onClickButton(-10);
        }}
      >
        -10
      </button>
      <button
        onClick={() => {
          onClickButton(-100);
        }}
      >
        -100
      </button>
      <button
        onClick={() => {
          onClickButton(100);
        }}
      >
        +100
      </button>
      <button
        onClick={() => {
          onClickButton(10);
        }}
      >
        +10
      </button>
      <button
        onClick={() => {
          onClickButton(1);
        }}
      >
        +1
      </button>
    </div>
  );
};

export default Controller;

App.jsx에서 onClickButton이 count, setCount 함수를 모두 사용하고 있을텐데요, 이것이 Controller.jsx로 넘어갈 때에는 아래와 같이 넘어가나요

(value) => { setCount(13 + value);//count:13일때 };

아니면 App.jsx에서 onClickButton 함수를 호출하여 App.jsx의 count, setCount를 사용하는 것인가요?

너무 기초적인 질문을 드려 죄송합니다ㅠㅠ

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

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

우선 기초적인 질문은 아닌것 같아요! 예리하고 날카로운 질문인 것 같습니다.
멋진 질문 감사합니다 그러니 전혀 죄송해 하실 필요 없습니다.
그리고 기초적인 질문이라도 절대 죄송하실 필요는 없습니다 😃

질문에 답변드리자면 결론적으로는 전자가 조금더 맞는 설명인 것 같습니다.
count의 값이 변화할 때 마다 onClickButton 함수 역시 다시 생성되기 때문이에요

좀 더 구체적으로 설명드리자면 count state의 값이 변경되면 App 컴포넌트가 리렌더링 됩니다.
이때 App 컴포넌트가 리렌더링 된다는 말은 곧 App 함수가 다시 호출된다는 말과 동일합니다.
함수가 다시 호출되면 해당 함수 내부에 선언된 변수나 함수들 또한 처음부터 다시 생성되죠 그렇기 때문에 이때 onClickButton 함수 또한 다시 생성됩니다. 그리고 이때 변경된 count State의 값도 함께 반영되죠

따라서 결론적으로 Props로 전달되는 onClickButton 함수는 App 컴포넌트가 리렌더링 될 때 마다 새롭게 다시 생성되어 자식 컴포넌트에게 전달되며 그럴 때 마다 변경되는 count state의 값을 반영한다고 보시면 좋을 것 같습니다 😃

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

hiramap님, React에서 함수를 다른 컴포넌트에 전달할 때의 작동 방식에 대해 궁금하신 것으로 이해했습니다. 특히 onClickButton 함수가 Controller 컴포넌트로 어떻게 전달되고 작동하는지에 대해서 설명드리겠습니다.

App 컴포넌트에서 정의된 onClickButton 함수는 setCount라는 상태 변경 함수를 포함하고 있습니다. 이 함수는 App 컴포넌트의 state를 직접 수정하는 역할을 합니다. onClickButton을 Controller 컴포넌트에 prop으로 전달하면, Controller 컴포넌트 내부에서는 해당 함수를 호출하여 App 컴포넌트의 state를 변경할 수 있게 됩니다.

How it works:

Function Definition in App:
- onClickButton은 App 컴포넌트 내부에서 정의되고, setCount를 사용하여 count 상태를 업데이트합니다.
Passing the Function as a Prop:
- onClickButton은 Controller 컴포넌트에 prop으로 전달됩니다. 이 때 함수는 그대로 전달되며, Controller에서 함수의 로직이 변경되거나 새로운 값으로 고정되지 않습니다. 함수를 전달하는 것이지, 함수가 리턴하는 값을 전달하는 것이 아닙니다.
Execution in Controller:
- Controller 컴포넌트에서는 전달받은 onClickButton을 버튼의 onClick 핸들러로 설정합니다. 버튼이 클릭되었을 때 이 핸들러가 호출되며, 이때 onClickButton이 실행됩니다. 실행 시점에 App 내에서의 현재 상태와 연결되어 있도록 React에서 자동으로 관리되므로 App의 setCount를 사용하여 현재 상태를 바꿀 수 있습니다.

<button
  onClick={() => {
    onClickButton(-1); // 이 부분에서 Controller가 실행해도 실제로는 App의 상태가 변경됩니다.
  }}
>
  -1
</button>

따라서 질문하신 바와 같이, onClickButton 함수 자체는 App 컴포넌트의 컨텍스트를 유지하므로, Controller에서 이 함수를 호출할 때는 여전히 App 내의 count 상태 업데이트에 영향을 주게 됩니다.

관심이 있으시다면 다음 유사한 질문에 대한 지식공유자의 답변을 확인해 보세요:
- “질문드립니다.” 질문에 대한 지식공유자의 답변

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

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

onClickButton함수를 넘겨주는 것이 궁금합니다.

How it works: