[React] useState에 함수를 전달할 때 괄호()를 빼는 이유

What

useState에 함수를 전달할 때 괄호()를 빼는 이유

 

How

2500개의 객체를 담은 배열을 반환하는 createBulkTodos() 함수가 있다고 가정하자.

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

 

useState에 함수를 전달해 todos에 객체 배열을 초기 상태로 설정하기 위해 아래와 같이 코드를 작성했다.

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

하지만 위와 같이 코드를 작성하게 되면 리렌더링될 때마다 함숙 호출되어 초기 상태가 매번 변경되어 오류를 일으킨다.

 

따라서 useState에 함수를 전달하여 초기 상태를 설정하고 싶다면 아래 코드와 같이 괄호를 뺀 함수를 넣어야한다.

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

 

Why

React에서는 컴포넌트가 렌더링될 때, 함수 호출이 발생하면 해당 함수 내에서 어떤 계산이든 완료되어야 한다.

따라서 useState(createBulkTodos())와 같이 함수를 호출하여 초기 상태를 설정하면  함수가 호출되는 시점이 렌더링 중이기 때문에  컴포넌트가 리렌더링될 때마다 함수가 호출되고 초기 상태가 다시 계산되어 원치 않는 부작용을 초래할 수 있으며, 성능 문제를 발생시킬 수 있다.

즉, 컴포넌트가 리렌더링될 때마다 함수 내에서의 계산이 완료 되지 않아 createBulkTodos 함수가 매번 호출되므로 초기 상태가 매번 변경될 것이다.

따라서 useState(createBulkTodos)와 같이 함수를 전달하여 초기 상태를 한 번만 설정하는 것이 적절하다.