함수의 파라미터로 함수를 전달할 때 표현법에 따른 차이

이번 포스팅에서는 제가 React 공부를 하다가 함수의 파라미터로 함수를 전달할때, 함수의 표현방법에 따른 결과의 차이에 대해서 궁금함이 생겨서 의문점 + 나름대로 제가 이해한 것 을 정리하려고 글을 씁니다.

 

import React, { useState, useRef, useCallback } from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';

function createBulkTodos() {
  const array = [];
  for (let i = 1; i <= 2500; i++) {
    array.push({
      id: i,
      text: `할 일 ${i}`,
      checked: false,
    });
  }
  return array;
}

const App = () => {
  const [todos, setTodos] = useState(createBulkTodos);
  const nextId = useRef(4);

  const onInsert = useCallback(
    text => {
      const todo = {
        id: nextId.current,
        text,
        checked: false,
      };
      setTodos(todos.concat(todo));
      nextId.current += 1;
    },
    [todos],
  );

  const onRemove = useCallback(
    id => {
      setTodos(todos.filter(todo => todo.id !== id));
    },
    [todos],
  );

  const onToggle = useCallback(id => {
    setTodos(
      todos.map(todo =>
        todo.id === id ? { ...todo, checked: !todo.checked } : todo,
      ),
    );
  });
  return (
    <TodoTemplate>
      <TodoInsert onInsert={onInsert} />
      <TodoList todos={todos} onRemove={onRemove} onToggle={onToggle} />
    </TodoTemplate>
  );
};

export default App;

 

위 코드를 보면 createBulkTodos 라는 함수를 App 컴포넌트에서 useState 함수의 파라미터로 전달해주고 있습니다.

useState함수는 React의 함수형 컴포넌트에서 상태를 관리하는 함수로 파라미터가 의미하는 것은 상태의 초기값이죠. 

 

즉, 이 코드를 통해서 제가 의도하는 바는 App 컴포넌트의 todos라는 상태의 초기값을 createBulkTodos라는 함수의 결과로 설정하길 원하는거에요.

 

여기서 제가 궁금한 점은 

 const [todos, setTodos] = useState(createBulkTodos);

와

 const [todos, setTodos] = useState(createBulkTodos());

의 차이에요. 

공부하는 책에서는 아래코드로 작성할 경우, 리렌더링 할 때마다 createBulkTodos 함수가 호출되지만, 위 코드처럼 작성하면 컴포넌트가 처음 렌더링 될 때만 createBulkTodos 함수가 실행된다고 하네요.

어떤 원리로 이렇게 동작하는 지가 궁금합니다.

---

이후 공부를 하다 이 부분에 대해서 알게 되어서 자문자답합니다 ㅎㅎ 

 

아래 코드의 경우에는 createBulkTodos 함수를 호출하여 실행하는 표현식입니다.

즉, 컴포넌트가 리렌더링되면서 위에서 부터 코드를 순차적으로 파싱하면서 함수를 호출하게 되는 형태인 것이죠.

위의 코드는 createBulkTodos라는 변수를 참조하는 것입니다. 컴포넌트 첫 렌더링시 생성한 createBulkTodos 함수를 리렌더링 할 때마다 참조할 뿐 호출하지 않습니다. 그래서 위와 같이 작성해주는 것입니다.