인프런 커뮤니티 질문&답변

안녕하세요, 강의를 듣고 사이드 프로젝트를 하면서 의문이 생기어 질문남깁니다.

제가 이제까지는 .vue 파일내부의 script 내부에서, 모든 변수를 반응형화 하였는데요, 이게 의미가 있는지에 대해 의문이 생기어 질문드립니다.

예를 들어, 인풋에서 값을 받아 검색을 하는 상황에서, searchBookQuery라는 변수를 선언하여 반응형화 하였는데요, 그렇지 않고 그냥 let으로 선언해서 사용을해도 상관이 없으려나요?

모든 변수가 반응형객체로 생성된다는게 살짝 성능상에서도 좋지않을까 하는 고민이들어 질문 드립니다.

코드예시

// bookSearchResults는 렌더링 되는 부분과 연관이 있기에
// 반응형으로 생성해야한다라는 확신이 들지만
// 다른 변수는 어떨지 선생님의 의견이 궁금합니다
const bookSearchResults = ref([]);

const searchBookQuery = ref("");
const queryTimeout = ref(0);

const searchBook = (e: Event) => {
  searchBookQuery.value = (e.target as HTMLInputElement).value;
  queryTimeout = setTimeout(async () => {
    if (searchBookQuery.value !== "") {
      const result = await axios.get(...);
      bookSearchResults.value = result.data.item;
    } else {
      bookSearchResults.value = null;
    }
  }, 500);
};

// --------위: 반응형선언, 아래: 일반 변수선언------------

let searchBookQuery = null;
let queryTimeout = 0;

const searchBook = (e: Event) => {
  searchBookQuery = (e.target as HTMLInputElement).value;
  queryTimeout = setTimeout(async () => {
    if (searchBookQuery !== "") {
      const result = await axios.get(...);
      bookSearchResults.value = result.data.item;
    } else {
      bookSearchResults.value = null;
    }
  }, 500);
};