48일차[Passing function]

진하의 메모장·2025년 3월 17일

Passing function React 복습 자바스크립트 컴포넌트에 함수 전달하기

공부일기

목록 보기

53/66

2025 / 03 / 17

오늘 수업 시간에는 외부에서 컴포넌트로 함수를 전달하는 방법을 배웠습니다.
수업을 따라가긴 하는데 정확히 이해가 되고있는지.. 헷갈리고 있는건지 모르겠습니다.
배운 부분을 제가 이해한 내용으로 정리해서 포스팅해보겠습니다.

💌 Passing Function

부모 컴포넌트가 자식 컴포넌트로 함수를 전달하는 방법입니다.

자식 컴포넌트에서 전달 받은 함수를 호출할 수 있고, 부모 컴포넌트의 상태를 변경하거나 다른 작업을 할 수 있습니다.

상태 업데이트, 이벤트 처리 등에서 부모 - 자식 간 상호작용을 가능하게 합니다.

App 컴포넌트 (부모 컴포넌트)

import Card from "./components/Card";
import TabButton from "./components/TabButton";

function App() {
   function tabclick(selectedLabel) {
      console.log(`${selectedLabel} 선택됨`);
   }

   return (
      <div className="app">
         <h1>React Props 연습</h1>
         <section className="example">
            <h2>예시</h2>
            <menu>
               <TabButton label="data" on={tabclick}>
                  <span>데이터 전달</span>
               </TabButton>
               <TabButton label="component" on={tabclick}>
                  <span>재사용 컴포넌트</span>
               </TabButton>
               <TabButton label="style" on={tabclick}>
                  <span>동적 스타일링</span>
               </TabButton>
            </menu>
         </section>
      </div>
   );
}

export default App;

tabclick이라는 함수는 App 컴포넌트 내부에서 정의됩니다.
tabclick 함수는 선택된 탭의 이름을 출력하는 기능을 합니다.
TabButton 컴포넌트에 on이라는 prop을 통해 tabclick 함수를 전달합니다.

TabButton 컴포넌트 (자식 컴포넌트)

export default function TabButton({ label, on, children }) {
   return (
      <li>
         <button
            onClick={() => {
               on(label);  // 부모 컴포넌트에서 전달받은 함수 호출
            }}

            {children}
         </button>
      </li>
   );
}

TabButton 컴포넌트는 label, on, children을 prop으로 받습니다.
label : 탭의 이름
on : 부모 컴포넌트에서 전달받은 함수 (tabclick)
children : 버튼 안에 표시되는 내용

버튼을 클릭하면 onClick 이벤트가 발생합니다.
부모 컴포넌트에서 전달받은 on 함수(tabclick)가 실행됩니다.
on(label)로 label 값을 인수로 전달하여 부모 컴포넌트의 tabclick 함수에 넘겨줍니다.

-> 부모 컴포넌트의 함수가 실행됩니다.

💌 전체적인 동작 흐름

1. 부모 컴포넌트 (App)

tabclick 함수를 정의합니다.

TabButton 컴포넌트를 렌더링할 때 on={tabclick}을 전달합니다.

tabclick 함수를 자식 컴포넌트로 전달합니다.

2. 자식 컴포넌트 (TabButton)

TabButton은 버튼을 렌더링하고, 버튼 클릭 시 onClick 이벤트를 발생시킵니다.

onClick 이벤트가 발생하면, 부모 컴포넌트에서 전달받은 tabclick 함수를 호출하고, 이때 label 값을 인수로 넘깁니다.

3. 부모 컴포넌트 (App)로 돌아가서

tabclick 함수가 호출되고, 선택된 탭의 이름이 출력됩니다.

💌 주요 개념 정리

props / 콜백 함수 / 이벤트 핸들러에 대한 주요 개념입니다.

1. props

React에서는 데이터나 함수를 컴포넌트에 전달할 때 props를 사용합니다.

tabclick 함수는 on={tabclick}을 통해 TabButton 컴포넌트로 전달되었습니다.

2. 콜백 함수

부모 컴포넌트가 자식 컴포넌트에 함수를 전달하는 방식입니다.

자식 컴포넌트가 특정 이벤트가 발생했을 때, 부모 컴포넌트로부터 전달받은 함수를 호출하여 부모 컴포넌트의 상태나 로직을 실행하는 방식입니다.

3. 이벤트 핸들러

TabButton에서 onClick 이벤트에 함수를 지정하면서, 부모 컴포넌트의 tabclick 함수를 호출합니다.

이벤트가 발생했을 때, 부모 컴포넌트에서 정의한 함수를 호출하는 방식이 바로 Passing Function입니다.

💌 함수 전달의 주요 패턴

함수 전달은 React와 같은 컴포넌트 기반 라이브러리에서 자주 사용되는 패턴이며, 컴포넌트 간 상호작용을 다루는 데 필수적입니다.

1. 단순한 이벤트 처리

Event Handling

가장 기본적인 방법은 이벤트 핸들러를 자식 컴포넌트로 전달하는 것입니다.

부모 컴포넌트

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

   return <Button onClick={handleClick} />;
}

자식 컴포넌트

function Button({ onClick }) {
   return <button onClick={onClick}>클릭하세요</button>;
}

부모에서 정의한 함수를 자식 컴포넌트의 이벤트 핸들러로 넘겨주는 방식입니다.

2. 함수를 자식에서 호출

Callback Functions

자식 컴포넌트가 전달받은 함수를 여러 번 호출하거나 조건에 맞춰 실행할 수 있습니다.

부모 컴포넌트

function App() {
   const handleAction = (action) => {
      alert(`액션: ${action}`);
   };

   return <ActionButton onAction={handleAction} />;
}

자식 컴포넌트

function ActionButton({ onAction }) {
   const triggerAction = () => {
      onAction('클릭');
   };

   return <button onClick={triggerAction}>액션 실행</button>;
}

자식 컴포넌트가 부모로부터 전달받은 함수를 호출하고, 특정 값을 전달할 수 있습니다.

💌 실습 예제

Passing Function

button 태그에 클릭 이벤트를 적용한다.

handleCreateUser 함수에 아무 문자열을 담아 콘솔로그를 출력한다.

1. 콘솔 로그 출력 함수

handleCreateUser 함수

function handleCreateUser(name) {
   user.name = name;
   console.log(user.name);
}

handleCreateUser 함수는 name이라는 인자를 받습니다.
함수 내부에서 user.name에 name 값을 할당하고, 그 값을 콘솔에 출력합니다.
중요한 점은 user 객체가 App 컴포넌트 내에서 선언된 상태로, 이 함수가 실행될 때마다 user.name 값을 수정합니다.

2. App 컴포넌트 작성

위에서 작성한 함수와 Html 태그로 코드를 작성합니다.

function App() {
   const user = {
      name: "",
   };

   // handleCreateUser 함수 정의
   function handleCreateUser(name) {
      user.name = name;
      console.log(user.name);
   }

   return (
      <div id="app">
         <h1>User Login</h1>
         <p>
            <label>Name</label>&ensp;
            <input type="text" />
         </p>
         <span>{user.name}</span>

         <p id="actions">
            <button onClick={() => handleCreateUser("이한")}>
               Create User
            </button>
         </p>
      </div>
   );
}

user 객체는 name 속성을 갖고 있으며, 기본값으로 빈 문자열 ""을 가지고 있습니다.
<button> 태그에서 onClick 이벤트 핸들러로 handleCreateUser("이한")를 호출합니다.
버튼이 클릭되면 "이한"이라는 문자열을 handleCreateUser 함수의 인자로 전달합니다.

3. 화면 표시

user.name이 출력될 html 태그 부분입니다.
<span>{user.name}</span>

user.name은 화면에 표시됩니다.
user 객체는 상태로 관리되지 않기 때문에, handleCreateUser 함수가 실행되어도 화면이 자동으로 업데이트되지는 않습니다.
name 값이 "이한"으로 변경되지만 화면에 반영되지 않음에 유의해야 합니다.

💌 핵심 내용

실습 예제의 코드 내용 중 중요한 부분을 따로 정리하였습니다.

1. 클릭 이벤트 처리

클릭 이벤트가 발생하고 인자로 전달되는 부분입니다. `
<button onClick={() => handleCreateUser("이한")}>
   Create User
</button>

onClick 이벤트가 발생했을 때 handleCreateUser("이한") 함수를 실행합니다.
handleCreateUser 함수는 "이한"이라는 문자열을 인자로 받아 user.name에 할당하고, 그 값을 콘솔에 출력합니다.

2. 함수 호출

handleCreateUser 함수는 부모 컴포넌트(App) 내에서 정의된 함수로, 자식 컴포넌트에서 호출됩니다.

handleCreateUser 함수는 onClick 이벤트를 통해 버튼 클릭 시 실행됩니다.

3. 동적 UI 반영

코드에서는 user.name을 화면에 표시하는 <span>{user.name}</span> 요소가 있지만, React의 상태 관리(예: useState)를 사용하지 않았기 때문에 화면의 실시간 업데이트는 이루어지지 않습니다.

상태 변경에 따라 UI를 자동으로 업데이트하려면 useState 훅을 사용해야 합니다.

48일차 후기

부모 컴포넌트의 함수를 자식 컴포넌트로 넘겨줄 필요 없이 자식 컴포넌트에서 바로 실행하면 되지 않나.. 라는 생각을 했지만! 부모 요소가 자식의 상태 변화나 함수 실행을 알고있어햐 하는게 당연하다는 이야기를 들으니까 그런가..? 싶습니다.

배우고 나서 제가 이해한 부분이 맞는지 제 나름대로 정리해서 교수님께 질문을 했는데! 잘 이해한 것 같다고 말씀해주셔서 기분이 좋았습니다. ෆ ฅ́˘ฅ̀ ෆ

이론을 배우고 바로 예제 문제에서 사용해보니까 확실히 그냥 듣고 넘어가는 것보다는 이해가 잘 되는 것 같습니다. 그래도 쉬운건 아닌거 같아요. ପ(｡ᵔ ⩊ ᵔ｡)ଓ

진하의 메모장

૮꒰ ྀི〃´꒳`〃꒱ა

이전 포스트

46일차[React style 적용하기]

다음 포스트