리액트에서 Arguments (매개변수) 전달하기

 

함수에서 전달할 데이터를 Arguments라고 하며 리액트에서 파라미터(parameter)와 매개변수(argument)는 함수 정의와 호출에서 동일한 개념을 다룬다.

 

리액트에서 Arguments 전달하기는 주로 컴포넌트 간 데이터 전달, 이벤트 핸들러에 인자 전달, 또는 함수 호출 시 인자를 넘길 때 사용된다. 리액트는 props를 통해 부모 컴포넌트에 자식 컴포넌트로 데이터를 전달하는 구조를 가지고 있지만, 이벤트 핸들러에 인자를 전달하거나, 함수를 호출할 때 인자를 전달하는 방식도 자주 사용된다.

 

1. Props를 통한 컴포넌트 간 데이터 전달

리액트에서 props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 기본 방법이다. 부모 컴포넌트에서 데이터를 전달하고, 자식 컴포넌트에서 이를 받을 수 있다.

import React from 'react';

// 자식 컴포넌트
const ChildComponent = ({ message }) => {
  return <div>{message}</div>;
};

// 부모 컴포넌트
const ParentComponent = () => {
  return <ChildComponent message="Hello from Parent!" />;
};

export default ParentComponent;

 

위 코드에서, 부모 컴포넌트는 message라는 props를 자식 컴포넌트에 전달하고, 자식 컴포넌트는 이를 받아서 화면에 출력한다.

 

 

2. 이벤트 핸들러에 인자 전달하기

리액트에서 이벤트 핸들러를 사용하면서 추가적인 인자를 전달하고자 할 때가 많은데 이때는 보통 화살표 함수를 사용하거나 bind()메서드를 사용해서 이벤트 핸들러에 인자를 전달 할 수 있다.

 

a. 화살표 함수 사용

import React from 'react';

const MyComponent = () => {
  const handleClick = (id) => {
    console.log(`Button with ID ${id} clicked!`);
  };

  return (
    <div>
      <button onClick={() => handleClick(1)}>Button 1</button>
      <button onClick={() => handleClick(2)}>Button 2</button>
    </div>
  );
};

export default MyComponent;

 

위 코드에서, handleClick 함수는 버튼이 클릭될 때마다 각 버튼에 고유한 id 값을 인자로 받아와서 처리한다.

화살표 함수로 handleClick(1)또는 handleClick(2)와 같이 인자를 전달한다.

 

b. bind() 메서드 사용

import React from 'react';

class MyComponent extends React.Component {
  handleClick(id) {
    console.log(`Button with ID ${id} clicked!`);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this, 1)}>Button 1</button>
        <button onClick={this.handleClick.bind(this, 2)}>Button 2</button>
      </div>
    );
  }
}

export default MyComponent;

 

위 코드에서, bind()메서드는 this 바인딩을 유지하면서 첫 번째 인자로 id 값을 전달한다.

 

 

 

3. 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하기(콜백함수 사용)

자식 컴포넌트가 부모 컴포넌트에게 데이터를 전달하려면, 부모 컴포넌트가 자식 컴포넌트에 콜백 함수를 넘겨주고, 자식 컴포넌트가 이 콜백 함수를 호출하면서 데이터를 전달 할 수 있다.

import React, { useState } from 'react';

const ChildComponent = ({ onSendData }) => {
  const sendData = () => {
    onSendData('Hello from Child!');
  };

  return <button onClick={sendData}>Send Data to Parent</button>;
};

const ParentComponent = () => {
  const [data, setData] = useState('');

  const handleData = (receivedData) => {
    setData(receivedData);
  };

  return (
    <div>
      <h1>Data from Child: {data}</h1>
      <ChildComponent onSendData={handleData} />
    </div>
  );
};

export default ParentComponent;

 

ParentComponent는 ChildComponent로 부터 데이터를 받기 위해 callback 함수를 전달하고, 자식은 이 콜백 함수를 호출하여 데이터를 부모에게 보낸다.

 

ChildComponent

• onSendData라는 props를 받아서 사용한다. onSendData는 ParentComponent에서 전달된 callback 함수이다.
• 버튼 클릭 시 sendData 함수가 실행되고, 이 함수는 onSendData함수를 호출하여 "Hello from Child!"라는 문자열을 부모에게 전달
• 즉, 자식 컴포넌트는 부모로부터 받은 함수 onSendData를 호출하여 부모에게 데이터를 전달

ParentComponent

• useState를 사용하여 data라는 상태를 관리한다. data는 자식 컴포넌트에서 받은 데이터를 저장하는 변수
• handleData 함수는 자식 컴포넌트에서 보내는 데이터를 받아서 setData를 호출하여 data 상태를 업데이트 한다.
• 부모 컴포넌트는 자식 컴포넌트에 onSendData={handleData}를 props로 전달한다. 즉, 부모 컴포넌트에서 정의한 handleData함수가 자식 컴포넌트에서 호출될 준비가 되어 있는 상태이다.
• data 상태는 자식 컴포넌트가 보낸 데이터를 출력하기 위해 h1 태그 안에 표시 된다.

 

 

4. useEffect나 useCallback 등엣 인자 전달하기

리액트에서 useEffect, useCallback 등을 사용하면서 의존성 배열이나 특정 조건에 맞춰서 인자를 전달하는 경우도 있다.

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const handleScroll = (event) => {
      console.log('Page scrolled!', event);
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);// 빈 배열로 한 번만 실행return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <p>Current Count: {count}</p>
    </div>
  );
};

export default MyComponent;

 

이 코드는 React의 함수형 컴포넌트에서 useState와 useEffect 훅을 사용하는 예제이다.

주요 기능은 스크롤 될 때마다 scroll 이벤트를 처리하고, 버튼을 클릭할 때마다 카운트를 증가시키는 것이다.

 

• handleScroll 함수는 스크롤 이벤트가 발생할 때마다 콘솔에 메시지를 출력하는 역할을 한다.
• window.addEventListener('scroll', handleScroll);는 스크롤 이벤트를 감지하고 handleScroll 함수가 실행되도록 한다.
• 두 번째 인자인 의존성 배열이 [] 비어있으므로 useEffect는 컴포넌트가 처음 렌더링 될 때 한 번만 실행되고, 이 후에는 재실행되지 않는다.
• return () => {...} 는 정리함수로 컴포넌트가 언마운트 될 때 removeEventListener를 호출하여 이벤트 리스너를 제거한다.

전체 동작

1. useState를 사용하여 count라는 상태 값을 관리하고, 버튼을 클릭할 때마다 그 값을 1씩 증가시킨다.
2. useEffect를 사용해서 컴포넌트가 처음 렌더링된 후에 스크롤 이벤트를 감지하고, 그 이벤트에 대한 핸들러를 등록한다. 이 핸들러는 페이지가 스크롤될 때마다 Page scrolled!라는 메시지를 콘솔에 출력한다.
3. 컴포넌트가 언마운트 되면 이벤트 리스너를 제거하여 메모리 누수 및 성능 문제를 방지한다.