콜백 함수 (리액트 예제)

콜백 함수(Callback Function)란?

 

• 다른 함수의 인자로 넘겨지는 함수.
• 그 함수의 내부에서 호출되어 특정 작업을 수행하게 된다.
• 비동기 작업을 할 때 주로 활용되는 개념이다
• 특정 시점에 원하는 작업을 수행할 수 있게 해주는 핵심 개념

 

 

React에서 콜백 함수 사용

 

 

1. 이벤트 핸들러

const handleClick = () => {
  console.log('Button clicked!');
}

return (
  <button onClick={handleClick}>클릭</button>
)

여기서 onClick 이벤트에 전달된 handleClick 함수가 콜백 함수. 버튼 클릭 시 React에 의해 호출된다.

 

 

2. 상태 업데이트

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

const incrementCount = () => {
  setCount(prevCount => prevCount + 1);
}

return (
  <div>
    <p>Count: {count}</p>
    <button onClick={incrementCount}>증가</button>
  </div>
)

setCount에 전달된 콜백 함수는 이전 상태값을 받아 새로운 값을 반환하게 되어 있다.

 

3. 효과 정리

useEffect(() => {
  const cleanup = () => {
    // 정리 작업
  }
  
  return cleanup; // 콜백 반환
}, []);

여기서 useEffect에서 반환된 cleanup 함수는 콜백함수이다.

컴포넌트가 unmount 되기 직전에 React에 의해 호출되어, 메모리 누수나 부작용을 방지하기 위한 정리 작업을 처리하게 된다.

 

4. 비동기 작업

const fetchData = () => {
  axios.get('/data')
    .then(response => {
      // 데이터 처리
    })
    .catch(error => {
      // 에러 처리  
    });
}

axios 같은 비동기 라이브러리에서 then, catch에 전달된 콜백들이 Promise가 처리된 후 호출되는 방식이다. 

 

 

---

 

 

인자, 파라미터 구분

 

파라미터 : 함수 정의 시 선언된 변수

인자 : 함수를 호출할 때 전달되는 값

 

 

 

콜백 함수는 다른 함수의 인자로 전달되는 함수

 

function handleClick(callback) {
  // 어떤 작업 수행 후
  callback(); // callback이 인자
}

handleClick(() => {
  console.log('버튼 클릭!'); // () => {...} 가 인자
});

handleClick 함수의 파라미터는 callback이고, 

이 callback은 함수 호출 시 넘겨진 익명 함수 리터럴의 인자로 사용되는 것이다.