[React 공부 전 알아야 할 JavaScript]_문법

React(이하 '리액트')가 좋다는 말도 많이 듣고 리액트 기술 역량을 요구하는 기업들도 많아서 공부해봐야겠다 싶었어요. 아직 공부 중인데 리액트가 뭔지 알고 나니까 꼭 알야할 필수 지식으로 느껴지더라고요. (새로운 기술 배워서 편하게 개발할 생각하니까 벌써 설렙니다.😚)

리액트에 대한 포스트는 빨리 공부해서 곧 포스팅 해볼거에요!
이번 포스트는 리액트를 공부하기 위해 공부한 JavaScript(이하 '자바스크립트')에 대한 내용을 기록해볼게요.

자바스크립트는 모든 프로젝트에서 사용했는데 당시엔 사용하기 급급해서 애매하게 알고 넘어간 부분들도 있었어요.

그래서 이번 포스트에서는 공부하면서 다시 정립한 애매한 부분들과 새롭게 배운 내용들에 대해 기록해 볼 생각이에요.

변수 선언 키워드

자바스크립트의 변수 선언 키워드는 var, let, const 3가지가 있어요.

1. var(현재 거의 사용X)
   - 중복 선언 가능 : 똑같은 이름으로 변수 선언 가능
   - 함수 레벨 스코프 : 함수 안에서 선언된 변수만 지역 변수로 인정 -> {} 안에서 선언한 변수를 밖에서 사용 가능
   - 호이스팅 : 선언 전에 값을 부를 경우, undefined 출력 -> 유지보수 힘듬

2. let(변수)
   - 중복 선언 불가능
   - 재할당 가능
   - 블록 레벨 스코프 : {} 안에서 선언한 변수 밖에서 사용 불가능

3. const(상수)
   - 재할당 불가능
   - 초기화 필수
   - 객체/배열의 경우 객체나 배열 내부의 값은 수정 가능

this 바인딩

자바스크립트에서는 '누가, 어떻게' 호출했는지에 따라 가리키는 대상이 다릅니다.(동적 바인딩)

1. 기본 호출: 그냥 함수를 실행하면 this는 전역 객체(window 또는 global)를 가리킵니다.

2. 객체의 메서드 호출: 객체 안에 정의된 함수를 실행하면, this는 해당 메서드를 호출한 객체를 가리킵니다.(ex. user.hello()에서 this는 user)

3. 생성자 함수 호출: new 키워드로 객체를 만들 때, this는 새로 생성된 인스턴스를 가리킵니다.

4. 화살표 함수 (Arrow Function): 화살표 함수는 자신만의 this를 가지지 않고 자신을 감싸고 있는 외부 환경의 this를 그대로 가져와서 씁니다.
   ex) AI모델 Gemini에서 발췌해온 예시입니다.

// 전역에서 선언한 경우
const myFunc = () => {
  console.log(this); 
};

myFunc(); // window (또는 undefined in strict mode)

------------------------------------------------------

// 일반 함수에서 선언한 경우
const obj = {
  name: 'Gemini',
  printName: function() {
    // 여기서의 this는 obj입니다.
    const arrow = () => {
      console.log(this.name); 
    };
    arrow();
  }
};

obj.printName(); // 'Gemini' (상위 함수인 printName의 this를 그대로 사용)

유의사항으로 자바스크립트의 객체에서 선언한 경우엔 전역 스코프를 가리킵니다. {}가 '블록'이 아니라 '값'을 나타내기 때문이에요.
추가로 class라는 문법 안에서는 화살표 함수를 만든 인스턴스를 가리킵니다.

Arrow function

// 일반 함수
const add = function(a, b) {
    return a + b;
};

-------------------------------

// 화살표 함수
const add = (a, b) => a + b;

화살표 함수는 동적바인딩의 문제점을 해결하고 간결한 코드 작성이 가능해서 많이 사용합니다.

템플릿 리터럴(Template Literals)

따옴표(") 대신 백틱(`)을 사용한 문법이에요. (이전에 "RESTful API 구현해보기" 포스트에서 언급했던 내용입니다.)

// 기존 방식
const name = "홍길동";
const age = 25;
console.log("제 이름은 " + name + "이고,\n나이는 " + age + "살입니다.");

// 템플릿 리터럴 방식
const name = "홍길동";
const age = 25;
console.log(`제 이름은 ${name}이고,
나이는 ${age}살입니다.`);

템플릿 리터럴을 사용하면 문자열과 변수를 같이 사용할때 실수를 줄일 수 있고 줄바꿈도 알아서 적용되서 매우 편리한 기능입니다.

객체 초기화 단축(Shorthand Property Names)

객체를 만들 때 key와 value 값이 같다면 한 번만 적어도 되는 기능이에요.

// 기존 방식
const name = "홍길동";
const age = 25;

const user = {
  name: name, 
  age: age   
};

// 단축 방식
const name = "홍길동";
const age = 25;

const user = {
  name,
  age
};

이 문법을 사용하면 가독성이 좋아지고 한 군데만 고치면 되니가 유지보수도 편리해요. 데이터를 꺼내고 넣을때 코드의 흐름이 자연스러워져요.


다음 포스트에서는 데이터를 다루는 핵심 기술들을 포스팅할 예정입니다.