[React & Express] 04 스코프란 무엇인가?

let 과 var의 차이점은 무엇인가?

 

let과 var는 자바스크립트에서 변수를 선언하는 키워드입니다.

가장 큰 차이점은 변수의 스코프(scope)입니다. var로 선언한 변수는 함수 스코프(function scope)를 갖지만, let으로 선언한 변수는 블록 스코프(block scope)를 갖습니다.

함수 스코프(fuction scope)는 해당 함수 내에서 선언된 변수는 함수 내부에서 모두 접근할 수 있습니다. 하지만 블록 스코프(block scope)는 해당 블록(중괄호 {}) 내에서 선언된 변수는 해당 블록 내에서만 접근할 수 있습니다.

이것은 변수의 유효 범위를 결정하는데 영향을 미칩니다. var로 선언한 변수는 함수 내에서 정의한 변수가 함수 전체에서 접근 가능하다는 것을 의미합니다. 따라서, var로 선언한 변수는 코드 전체에서 접근이 가능해져서 변수 값이 예측이 어려워지는 사례를 발생시키기도 합니다.

let으로 선언한 변수는 블록 단위로 유효 범위가 결정되기 때문에 var에 비해 안전한 변수 선언이 가능합니다. 또한, 선언 이전에 변수를 사용하는 것을 금지하여, 변수 호이스팅(Hoisting)이 일어나지 않습니다.

예를 들어, 다음과 같은 코드에서 let과 var의 동작 방식의 차이를 살펴볼 수 있습니다.

```
function abc() {
  if (true) {
    var x = 1;
    let y = 2;
  }
  console.log(x); // 1
  console.log(y); // ReferenceError: y is not defined
}
```

위 예시에서 if 문 내에서 var로 변수 x를 선언하고, let으로 변수 y를 선언합니다. if 문이 끝나고 나면, 변수 x는 여전히 함수 스코프 내에 존재하기 때문에 console.log(x)는 1이 출력됩니다. 그러나 변수 y는 블록 스코프 내에 선언되었기 때문에 if 문 밖에서는 존재하지 않아서 ReferenceError가 발생합니다.

 

변수의 스코프(scope)는 무엇인가?

 

변수의 스코프(scope)란 변수의 유효 범위를 말합니다. 즉, 어디에서 해당 변수에 접근할 수 있는지를 결정합니다.

스코프는 변수가 정의된 위치와 밀접한 관련이 있습니다. 변수를 선언하면, 해당 변수의 스코프가 결정됩니다. 자바스크립트에서는 대체로 함수 스코프(function scope) 또는 블록 스코프(block scope)를 사용합니다.

함수 스코프(function scope)는 해당 함수 내에서 선언된 변수는 함수 내부에서 모두 접근할 수 있습니다. 함수 스코프는 기본적으로 변수 선언 시 var 키워드를 사용합니다.

블록 스코프(block scope)는 해당 블록(중괄호 {}) 내에서 선언된 변수는 해당 블록 내에서만 접근할 수 있습니다. 블록 스코프는 변수 선언 시 let 또는 const 키워드를 사용합니다.

예를 들어, 다음과 같은 코드에서 함수 스코프와 블록 스코프를 설명할 수 있습니다.

```
var x = 1; // 전역 스코프

function foo() {
  var y = 2; // 함수 스코프
  if (true) {
    var z = 3; // 함수 스코프
    let w = 4; // 블록 스코프
  }
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // 3
  console.log(w); // ReferenceError: w is not defined
}

foo();
```

위 예시에서 변수 x는 전역 스코프에 선언됐기 때문에 함수 foo()에서도 접근이 가능합니다. 변수 y는 함수 스코프 내에서 선언되었기 때문에 함수 내에서는 모두 접근 가능합니다. 변수 z는 if 문의 블록 스코프 내에서 선언되었지만, var 키워드를 사용하여 함수 스코프 내에서도 모두 접근할 수 있습니다. 하지만 변수 w는 let 키워드를 사용하여 블록 스코프로 선언되었기 때문에 if 문 블록 내에서만 접근 가능합니다. 함수 스코프와 블록 스코프의 모든 변수들은 해당 스코프 안에서만 사용할 수 있으므로 적절한 스코프로 변수를 선언하고 사용하는 것이 중요합니다.

 

나의 정의: var와 전역변수는 console.log로 불러오면 올러와 지는데,

let은 {블록 스코프} 이기에 console.log로 불러와지지 않는다.

---

react 카멜 케이스(camel case)는 무엇인가?

 

React에서 카멜 케이스(camel case)는 JSX(JavaScript XML)의 속성 이름에 사용하는 네이밍 규칙 중 하나입니다. 카멜 케이스는 첫 글자는 소문자로 쓰이고 다음 단어부터는 첫 글자를 대문자로 씁니다. 예를 들면, backgroundColor, fontSize, borderColor, marginTop과 같은 형태입니다.

카멜 케이스 규칙은 일반적으로 JavaScript에서 변수와 함수를 작성할 때, 그리고 리액트에서 JSX 속성 이름을 작성할 때 사용됩니다. 이 규칙은 일관성 있고 읽기 쉬운 코드 작성에 도움이 됩니다.

예시로, 다음과 같이 style 속성을 사용할 때 예시입니다.

```
const styles = {
  backgroundColor: 'red',
  fontSize: '24px',
  borderColor: 'black',
  marginTop: '10px'
};

function App() {
  return (
    <div style={styles}>
      <h1>Hello, World!</h1>
    </div>
  );
}
```

위 예시에서는 style 속성의 값을 객체 형태로 선언하고 있으며, 해당 객체 내에서는 카멜 케이스 규칙을 적용하여 속성 이름을 작성하고 있습니다. 이렇게 작성하면 CSS와 유사한 형태로 속성 값들을 작성할 수 있으며, 코드의 가독성도 높아집니다.