콜백 함수 알려드림.. 믿고 따라오셈

리액트에서 콜백 함수 사용하기

안녕하세요, 친구들! 오늘은 리액트에서 콜백 함수를 사용하는 방법에 대해 배워볼 거예요. 콜백 함수는 리액트에서 중요한 개념 중 하나예요. 함께 알아보도록 할까요

 

콜백 함수란?

콜백 함수는 다른 함수에 인수로 전달되어 나중에 호출되는 함수를 말해요. 콜백 함수는 주로 비동기 작업이나 이벤트 처리에서 사용돼요.

 

콜백 함수의 기본 개념

먼저, 콜백 함수가 무엇인지 간단한 예시를 통해 이해해봐요.

function sayHello() {
  console.log("안녕하세요!");
}

function executeCallback(callback) {
  console.log("콜백을 실행하기 전!");
  callback(); // 전달된 콜백 함수 실행
  console.log("콜백을 실행한 후!");
}

executeCallback(sayHello);

이 예시에서는 sayHello 함수가 executeCallback 함수에 인수로 전달되어 실행돼요. executeCallback 함수는 먼저 "콜백을 실행하기 전!"을 출력하고, 그 다음 sayHello 함수를 호출해 "안녕하세요!"를 출력해요.

 

리액트에서 콜백 함수 사용하기

리액트에서는 주로 상태 변경이나 이벤트 처리에서 콜백 함수를 사용해요. 리액트의 useState 훅과 이벤트 핸들러를 사용한 예시를 볼까요?

 

상태 변경 시 콜백 함수 사용하기

리액트에서 useState를 사용하여 상태를 관리할 때 콜백 함수를 사용할 수 있어요. 아래는 버튼을 클릭할 때마다 숫자가 증가하는 간단한 예시예요. 훅에 대한 내용은 useState훅에 대한 글을 읽어봐주세요.

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(prevCount => {
      const newCount = prevCount + 1;
      console.log('카운트가 증가했어요:', newCount);
      return newCount;
    });
  };

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={handleClick}>증가</button>
    </div>
  );
};

export default Counter;

여기서 handleClick 함수는 setCount에 콜백 함수를 전달해요. 이 콜백 함수는 이전 상태를 받아서 새로운 상태를 계산하고, 그 값을 반환해요. 이 방식은 상태 변경이 비동기적으로 이루어질 때 유용해요.

 

이벤트 처리 시 콜백 함수 사용하기

리액트에서는 이벤트 핸들러로 콜백 함수를 많이 사용해요. 예를 들어, 입력 폼에서 입력 값을 처리하는 예시를 볼까요?

import React, { useState } from 'react';

const TextInput = () => {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('입력된 텍스트:', text);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={text} onChange={handleChange} />
      <button type="submit">제출</button>
    </form>
  );
};

export default TextInput;

여기서 handleChange 함수는 입력 필드의 값이 변경될 때마다 호출되는 콜백 함수예요. 이 함수는 입력된 값을 상태에 저장해요. handleSubmit 함수는 폼이 제출될 때 호출되는 콜백 함수로, 현재 입력된 값을 출력해요.

---

리액트에서 콜백 함수는 컴포넌트 간 데이터 전달, 이벤트 처리, 비동기 작업 등을 효과적으로 관리하는 데 중요한 역할을 해요. 콜백 함수를 잘 이해하고 활용하면 리액트 애플리케이션을 더 효율적으로 개발할 수 있어요.