잠깐!

해당 글은 정재남 님의 '코어자바스크립트' 책을 읽고 공부한 포스팅입니다.

따라서, 챕터의 내용은 상당히 생략되어 있으며, 느낀점과 기억해야 할 것들을 주관을 가득 담아 작성했습니다.

노트가 아닌 관계로 포스팅의 영양가는 거의 없으니, 감안하고 봐주셨으면 좋겠습니다.

서론

위코드 생활 3주차를 앞둔 지금, React를 사용하기 전 급히 쓰지 않던 개념을 미리 맛을 약간은 볼 필요가 있다는 생각이 들었습니다.

원래라면 실행 컨텍스트와 LexicalEnvironment 등에 대한 포스팅이 다음 차례이지만, 본의 아니게 뒤죽박죽 스터디가 되었습니다.

그래도 나름 this와 class에 대해서 공부한 내용을 생각해보며 현재 지식 수준에 맞게 정리해보겠습니다.

this

Javascript에서 대부분 가장 난해하다는 생각을 갖는 개념이라고 책에도 쓰여 있는 것 같습니다.

이 녀석도 this, 저 녀석도 this, 코에 걸면 코걸이, 귀에 걸면 귀걸이인 친구가 아닐까 싶습니다.

그래도 차근차근 따져보면 알지 않을까? 하다가도 console.log(this)의 결과를 보는 순간 멍해지는 기분을 꽤나 느끼고 있습니다.

this, 사실상 모든 것이 객체인 자바스크립트에서는 정말 많은 경우의 수를 가진 녀석인 것 같습니다.

왜 대부분의 사람들이 자바스크립트는 모든 것이 객체라고 말했는지 이제야 맛을 좀 보는 것 같습니다.

그래도 제가 선언해왔던 대부분의 함수들이 window 객체의 프로퍼티였다는 배경을 조금은 알고 보니 this가 마냥 밉지만은 않았습니다.

this? 그냥 모르면 검색해보자

this 바인딩에 대한 이슈를 경험할 일이 없는 저와 같은 초보가 해당 상황에 대해 마주했을 때, 검색을 통해 해결하는게 가장 최선인 것 같습니다.

또는 책이 있다면 책을 보시는게 베스트가 될 수도 있습니다.

왜 이런 생각을 했냐면, 많은 경우의 수를 가진 개념을 처음부터 다 외우기란 불가능하다고 생각하기 때문입니다.

그럼에도 정말 this를 당장 알아야 하는 저는 나름의 정리를 해보기로 했습니다.

짧게나마 개념을 이해하자면, this 가 나타내는 것은 해당 실행 컨텍스트(현재는 대부분 함수로 이해하시면 됩니다.) 내부에 존재하는 environmentRecord, 기록 중 일부입니다.

이렇게 말하면 정말 어려운데, 저와 같은 초급자 수준에서 고려할 수 있는 대부분의 상황은 함수에서 발생하기 때문에 그냥 함수가 갖는 일종의 정보, 소속 정도로 이해할 수 있습니다.

그럼 5가지 정리로 겉핥기를 좀 해봅시다.

1. 기존 일반적인 함수 호출의 방식이라면 대부분 window, 전역을 바인딩한다.

2. 메소드로 호출했다면 무조건 해당 메소드의 상위객체를 바인딩한다.

3. JS가 제공하는 메소드 호출의 경우 대부분 바인딩 환경을 넘겨준다.

이 세 가지의 개념만으로도 사실상 React 초급의 this 개념은 쉽게 넘길 수 있다고 생각합니다.

거기서 더 크게 보자면 메소드 호출이냐, 함수 호출이냐의 차이가 됩니다.

이는 다시 this가 호출에 따라 달라지는 모호한 개념이라는 말로도 이해할 수 있는 것 같습니다.

그런데도 욕심이 조금은 더 있기 때문에 2가지 더 넣어보자면,

4. 화살표 함수로 표현된 내부함수 호출은 상위 객체를 바인딩한다.

5. bind 메소드가 사용되었다면 대상을 정확히 파악한다.

이 정도가 현재 저의 Javascript 이해도에 걸맞는 정리인 것 같습니다.

또한 정리에 대한 배경을 잔뜩 늘어놓는 글은 저의 포스팅 순서, 공부 순서와 일치하지 않기 때문에 추후 다룰 실행 컨텍스트 개념을 정리할 때, 다시 꺼내보도록 하겠습니다.

그럼 this를 잠깐 묻어두고, class에 대해 생각해봅시다.

Class

Class의 개념은 추상적 개념을 구체화하는 하나의 방식 정도로 이해하고 넘어가는게 맞는 것 같습니다.

책에서도 마지막 장에 다루고 있기 때문에, 상당히 난해한 개념을 먼저 접했을 때 조금 시간이 부족할 것 같다는 생각이 듭니다.

이에 현재 포스팅에서는 짤막하게 React 진행을 위한 단순한 개념만 적어두겠습니다.

Class는 인스턴스, 상위 개념의 특징을 모두 가지고 있는 하나의 개체를 만들기 위해 존재합니다.

차 - 전기차 - 테슬라 - 사이버트럭 의 전개에서 사이버트럭은 인스턴스가 됩니다.

또 다른 Class 구조는

분식 - 떡볶이류 - 로제떡볶이 정도가 있겠네요.

즉, 세부 항목을 구체화하는데 Class는 사용됩니다.

그리고 로제떡볶이, 국물떡볶이 등을 우리는 인스턴스라고 부른다. 정도로만 먼저 이해하고 넘어가는게 맞는 것 같습니다.

하지만 로제떡볶이는 분식이면서 동시에 퓨전음식에 속할 수도 있습니다.

또한 파는 곳이 한국 외에 없다면 경우에 따라 한국음식으로 분류할 수 있습니다.

그러나 한국음식과 퓨전음식은 동일한 카테고리가 아닙니다.

또한 분식에는 엄연히 빵이 들어갈 수도 있으니, 로제떡볶이를 하위 항목으로 갖는 셋은 서로 다른 분류의 기준이 됩니다.

그러나 이러한 방식으로 로제떡볶이의 상위 개념을 생성하는 것은 컴퓨터와는 정반대의 방식입니다.

즉, 먼저 분식 or 한국음식 or 퓨전음식 셋 중 하나를 먼저 결정한 뒤, 하위 Class를 만들고, 다시 또 하위 Class를 만들어 상속하는 방식으로 로제 떡볶이를 구현해야 합니다.

우리가 일상에서 인스턴스를 구현할 때에는 다양한 방식으로 구현할 수 있는 추상적인 개념이 되는 것이지만, 컴퓨터의 인스턴스는 단 하나의 클래스에 속한 구체적인 개념으로 구현되는 것이죠.

class 음식{...}

class 분식 extends 음식{...}

class 떡볶이류 extends 분식{...}

class 로제떡볶이 extends 떡볶이류{
  super();
  
  constructor(taste){
    
  this.taste = taste
  
  }
}

위와 같은 과정을 거치면 로제떡볶이라는 인스턴스를 만들어낼 수 있게 됩니다.

마침 Class 내부에 this가 나왔으니, 둘을 엮어 한 번 정리해봅시다.

Class 내부 this 바인딩

먼저, 우리는 this가 함수가 가지는 특별한 속성값이라고 생각하기로 했었습니다.

그렇다면 왜 this. 라는 표현을 사용해서 생성자 내부에 taste를 구현해야만 할까요?

3가지로 정리할 수 있습니다.

1. Class는 엄격한 언어다.
2. 생성할 때 Class 내부 constructor() 메소드가 실행된다.
3. constructor() 의 내부 this.(= this 값)는 해당 클래스(상위 객체)를 의미한다.

즉,

let 지옥맛로제떡볶이 = new 로제떡볶이(`지옥맛`)

위처럼 세부적인 맛 표현을 일종의 property로 탑재한 로제떡볶이 인스턴스를 만들기 위해서 사용합니다.

이 때, this. 로 로제떡볶이 Class(객체)를 constructor 내부에서 지정해주지 않으면 전달된 인자('지옥맛')는 로제떡볶이라는 Class(객체)에 접근할 수 없게 되고, 이는 후에 코드 내의 오류를 막을 수 있게 됩니다.

그렇기에 Class는 strict, 엄격한 방식의 함수라고 합니다.

초급 React에서 사용하는 this, class는 이 정도 개념이면 충분할 것 같습니다.

일주일 뒤에는 해당 개념을 더 밑바닥에서 이해해보는 포스팅으로 뵙겠습니다.

다음 글은 위 개념들 이전의 개념, 실행 컨텍스트 (executionContext) 에 대한 내용으로 돌아오겠습니다.

읽어주셔서 감사합니다.