dummyList 변수 선언 위치 질문

안녕하세요 이정환입니다.

넵 보여지는 결과적으로는 변수를 컴포넌트 외부에 선언하든 내부에 선언하든 같습니다.

그러나 컴포넌트 내부에 변수를 선언하게 될 경우 해당 변수는 컴포넌트가 리렌더 될 때 마다 다시 생성됩니다.

예를 들어 아래의 코드에서 변수 arr은 App 컴포넌트가 리렌더 될 때 마다 계속해 다시 생성된다는 것이죠

function App() {
  let arr = [1, 2, 3]; // 리렌더 될 때 마다 다시 생성된다.
  return <div>...</div>;
}

그러나 다음과 같이 컴포넌트 외부에 변수를 선언하게 될 경우에는 컴포넌트가 얼마나 많이 리렌더가 되던 다시 생성되지 않습니다.

let arr = [1, 2, 3];

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

따라서 컴포넌트가 리렌더 될 때 마다 굳이 변수를 다시 생성할 이유가 없다면 보통은 컴포넌트 외부에 선언하는것이 일반적입니다.

같은 맥락에서 우리 강의에서도 dummyList 라는 변수는 컴포넌트의 리렌더와는 관계없이 동일한 값을 저장하고 있기만 하면 되기에 컴포넌트 외부에 선언한 것 입니다.

감사합니다 😃