Learn Recursive Func & callback

Index

재귀함수
콜백함수

Recursive Function - 재귀함수

재귀함수(Recursive Function)은 자기 자신을 호출하는 함수로, 자신을 다시 호출하여 문제를 해결하고 결과를 반환하는 방식으로 동작한다. 이 방식은 몇몇 상황에서 특히 유용하며, 함수의 구현이 간결하고 직관적인 경우가 많다.

예를 들어, React에서 트리 구조를 표현할 때 자주 사용되는 코드 패턴 중 하나는 자식 요소를 재귀적으로 렌더링하는 것이다.

다음은 React에서 트리를 렌더링하는 예제

function TreeNode({ value, children }) {
  return (
    <li>
      {value}
      <ul>
        {children.map(child => (
          <TreeNode key={child.value} {...child} />
        ))}
      </ul>
    </li>
  );
}

const treeData = {
  value: "root",
  children: [
    {
      value: "child1",
      children: [
        {
          value: "grandchild1",
          children: []
        },
        {
          value: "grandchild2",
          children: []
        }
      ]
    },
    {
      value: "child2",
      children: [
        {
          value: "grandchild3",
          children: []
        }
      ]
    }
  ]
};

function App() {
  return <TreeNode {...treeData} />;
}

ReactDOM.render(<App />, document.getElementById("root"));

위의 예제에서는 TreeNode 컴포넌트에서 자식 요소를 재귀적으로 렌더링한다. children 배열의 각 항목에 대해 새로운 TreeNode 컴포넌트를 생성하고, 이전에 작성한 TreeNode 컴포넌트에 전달하며 이렇게 해서 트리의 모든 노드를 렌더링할 수 있다.

Callback

콜백(Callback)은 다른 함수에 인수로 전달되는 함수이며 함수를 변수처럼 다룰 수 있습니다. 콜백 함수는 보통 비동기적인 작업에서 사용된다. 비동기 작업은 결과가 나오기 전에 다른 작업을 수행할 수 있으며, 이를 위해 비동기 함수는 일반적으로 콜백 함수를 인수로 받는다.

예를 들어, setTimeout 함수는 일정 시간이 지난 후에 콜백 함수를 호출한다.

다음 코드는 3초 후에 "Hello, world!"를 출력하는 예제

setTimeout(function() {
  console.log("Hello, world!");
}, 3000);

여기서 setTimeout 함수의 첫 번째 인수로 익명 함수를 전달하고 있는데 이 함수가 콜백 함수이다. 3초 후에 setTimeout 함수는 이 함수를 호출하여 "Hello, world!"를 출력한다.

또다른 예제,

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

ReactDOM.render(<Counter />, document.getElementById("root"));

버튼 클릭 이벤트를 처리하고, 클릭 이벤트가 발생할 때마다 카운터를 증가시키는 예제이다.

이 코드에서는 useState 훅을 사용하여 상태를 관리하고 handleClick 함수는 setCount 함수를 호출하여 상태를 업데이트하고, 버튼 클릭 이벤트에 대한 핸들러로 등록된다. 이렇게 하면 버튼을 클릭할 때마다 handleClick 함수가 호출되고, 상태가 업데이트된다.

이 예제에서 handleClick 함수는 콜백 함수로 사용된다. 이벤트가 발생할 때마다 React는 이 함수를 호출하게 된다