[React] var, let, const

이유진·2023년 7월 3일

React

목록 보기

2/4

Quiz 2 : var, let, const의 차이점이 무엇이고, 언제 무엇을 사용해야 할까요?

A)

var

var는 함수 스코프를 가지고 있어서 함수 내에서 선언한 변수는 함수 전체에서 접근 가능.
호이스팅에 의해 변수 선언이 스코프 상단으로 끌어올려지므로, 변수를 선언하기 전에도 사용 가능.
중복 선언이 가능하며, 재할당도 자유로움.
var를 사용하면 같은 변수명을 여러 번 선언해도 오류가 발생하지 않고, 변수 값이 덮어씌워짐.
var는 블록 스코프를 가지지 않기 때문에 if문이나 반복문에서 선언한 변수도 외부에서 접근 가능.

ex)

function Example() {
  var count = 0;

  if (true) {
    var count = 1;
    console.log(count); // 출력: 1
  }

  console.log(count); // 출력: 1

  return <div>Count: {count}</div>;
}

let

let은 블록 스코프를 가지고 있어서 중괄호({})로 둘러싸인 블록 내에서만 유효.
호이스팅이 발생하지 않고, 변수를 선언하기 전에는 불가능.
중복 선언이 불가능.
재할당은 가능.
변수의 스코프를 좁게 제한하여 예상치 못한 동작 방지 가능.

function Example() {
  let count = 0;

  if (true) {
    let count = 1;
    console.log(count); // 출력: 1
  }

  console.log(count); // 출력: 0

  return <div>Count: {count}</div>;
}

const

const는 상수를 선언하는 키워드.
한 번 할당한 값은 변경 불가능.
블록 스코프를 가지고 있으며, 중복 선언이 불가능.
객체나 배열과 같은 참조 타입의 경우, const로 선언되더라도 내부의 속성이나 요소는 변경 가능.
변수의 값을 보존하고자 할 때 사용됨.

function Example() {
  const count = 0;

  if (true) {
    const count = 1;
    console.log(count); // 출력: 1
  }

  console.log(count); // 출력: 0

  return <div>Count: {count}</div>;
}

언제 무엇을 사용해야 하는가?

값이 변하지 않는 상수를 선언하려면 → const
값이 변경될 수 있는 변수를 선언하려면 → let

var는 React에서는 가능한 사용을 피하고, let 또는 const를 대신 사용하는 것이 좋다. var는 호이스팅 등의 특징으로 인해 예기치 않은 동작을 일으킬 수 있기 때문이다.

React에서는 보통 상태 관리를 위해 useState 훅을 사용하므로, var, let, const를 직접 사용하는 경우는 상대적으로 적다. 하지만 컴포넌트 내에서 변수를 선언하거나 임시적인 값 저장 등의 경우에는 차이점과 규칙을 고려하여 적절한 키워드를 선택하여 사용하면 된다.