[📝TIL 11_1]React 입문하기

|  2024년 12월 30일 월요일 TO DO  |

✔️ JavaScript 숙제 수정 및 제출

✔️ React 입문 1주차

✔️ UX 리서치

---

⭐️ 오늘 배운 내용

React 입문 

 변수 

- var 키워드는 많이 사용하지 않는다. 가장 많이 사용하는 변수 선언 방식은 const와 let이다.

 

변수가 왜 필요한가?
1. 변수는 데이터를 저장할 뿐만 아니라 관리의 용이하다.

- 저장 후 자바 스크림트 소스 코드의 많은 곳에서 재사용하는 매커니즘을 사용한다.

 

2. 프로그램이 복잡해지는 복잡성을 어느정도 막고 관리한다.

- 변수가 없으면 직접 모든 값을 기입해야하는데, 이렇게되면 코드가 복잡해지고 오류 가능성도 높아진다.

- 위에서의 재사용하는 매커니즘이 사라지게되면 확장성과 유지 보수성이 떨어질 수 밖에 없다.

 

3. 재사용성 및 유지보수의 향상

- 변수를 통해 정의된 데이터 값을 여러 위치에서 재사용 할 수 있다.

 

 변수의 종류 

변수의 종류에는 어떤 것이 있나?

- let, const, var

 

어떻게 분류를 하나?

1. 스코프(유효 범위)에 따른 분류

- 글로벌 > 블록(중괄호 안 영역에 쓰일 수 있는 블록) > 함수(function 키워드로 감싸진 영역

let, const, var의 스코프 변수는 무슨 차이가 있을까?
- 블록 스코프 변수 let, const는 선언된 블록 내에서만 접근할 수 있다.
- 함수 스코프 변수 var 는 선언된 함수 내에서 유효하다.

 

2. 재할당 가능성에 따른 분류

- 이미 선언된 변수의 값을 다시 저장할 수 있는지에 대한 것이다.

- const는 재할당이 되지않고, let이나 var는 재할당 가능하다.

 

 

 const - 블록스코프 

const의 중요성

- constant value로, 상수용으로 많이 쓰인다.

- const를 사용해서 상수를 선언하게되면 프로그램 내에서 값이 변경되지 않는 변수를 명확하게 표현할 수 있다.

- 개발자는 이를 보고 '변경될 일이 없겠구나' 라고 이해할 수 있어서 의도치 않는 값 변경으로 인한 오류를 예방할 수 있다.

>> 코드의 안정성을 높임

 

 

 let - 블록스코프 

let이란?

- let은 변수의 값을 필요에 따라 유연하게 관리하고 변경할 수 있다.

- 특히 for문에서 블록 스코프 케이스가 많이 있다.

예시)
for (let i = 0; i < 3; i++) {
      console.log(i);
}

console.log(i);

let 이 var로 바뀌어도 오류가 나지 않는다.
그래서 더 주의해야한다.

 

const vs let 잘 고르는 TIP!

- const를 먼저 떠오르고 사용해본다.

그러나 그 const로 만든 값이 변경될 수 있다면 그때 let을 사용하는것이 좋다.

 

 

 var - 함수스코프 

let이란?

- let은 변수의 값을 필요에 따라 유연하게 관리하고 변경할 수 있다.

 

var를 지양해야하는 이유

1. 예상치 못한 범위에서 사용될 수 있기 때문에 오류가 생길 가능성이 높다.

2. 호이스팅과 함수 스코프 특성은 가독성을 떨어뜨리고 유지보수가 어려워진다.

>> const와 let 도 호이스팅이 가능하다.

호이스팅이란?
" hoisting / 끌어 올리기 "란 의미로, 선언 전 미리 할당한다.

🚨
var로 선언한 경우, 초기 값을 undefined로 미리 할당한다. >> 헷갈리기 때문에 var 사용 지양
const와 let로 선언한 경우, 변수를 초기화하지 않아 논리적인 흐름에서 벗어나지 않는다.

 

---

 

 객체와 배열 

객체란?

- 객체는 key와 value로 이루어진 값을 저장하는 데이터 구조 또는 타입이다.

- 자바스크립트에서는 모든 것이 객체로 다뤄진다고 해도 과언이 아닐 정도로 매우 중요하다.

JSON (JavaScript Object Notation)형태
- JavaScript의 Object(객체) 기반
- 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식으로,경량 데이터 교환 형식이다.