[TIL] 2022-04-04 / 11일차

 

오늘 배운 내용

 

컴포넌트 방식으로 생각하기

 

자바스크립트를 시작하면 가장 먼저 접하게 되는 프로젝트. 간단한 To Do List. To Do List를 따라 구현해봤던 기억이 얼핏 얼핏 나지만 그때는 div tag를 추가하고, input 값을 가져오고, 결과로 li tag를 추가하기 바빴던 것 같다.

 

간단한 To Do List App을 만들며 컴포넌트 방식으로 UI를 표현하고 사고하는 방법을 김태희(로토) 강사님이 강의를 통해 강의해 주셨다. UI 요소들이 어떻게 컴포넌트 단위로 추상화되는지? 그리고 응집력 있게 개발하는 방법은 무엇인지? 각 단계 별로 천천히 진행했다.

 

컴포넌트 방식으로 사고

 

컴포넌트는 특정 프레임워크와 라이브러리에 따라 정의가 조금씩 다르기 때문에, 바닐라 자바스크립트에서 컴포넌트를 다루면서 특정 프레임워크와 라이브러리에 종속되지 않고 컴포넌트 자체가 무엇인지?를 중점적으로 신경 쓰는 게 좋다고 한다.

 

화면을 구성하는 UI를 작성할 때 명령형은 구성하고자 하는 것을 일일히 작성해주어야 한다. h1 tag, input tag, 기타 등등..

 

이 과정을 선언형으로 작성한다면? 명령형처럼 하나하나 다 그리는 것이 아니라 추후에 재사용이 가능하도록 비슷한 것들끼리 묶어주고, 이 때 묶인 것들은 서로 다른 것에 영향을 미치지 않게 구성해 주어야 한다. To Do List에서 사용되는 UI를 간단하게 생각해보면 Header, Form, ToDoList 이 3가지로 나타낼 수 있다. 이 3가지를 각자의 하나의 단위로 생각할 수 있고, 각각은 독립적인 존재로 다른 곳에 의존하지 않고 작동할 수 있어야 한다(영향을 미치지 않아야 한다). 3개의 컴포넌트가 있고, 3개의 컴포넌트를 생성하고 관리는 App 컴포넌트까지 총 4개의 컴포넌트로 동작하는 구조를 갖게 된다.

 

컴포넌트 방식을 사용했을 때의 이점?

 

우선 컴포넌트를 사용하는데 있어 다른 부가적인 것들에 영향을 받는다면(데이터를 저장하기 위해 다른 컴포넌트를 참조한다거나) 독립적이라고 할 수 없고 컴포넌트를 수정하거나 기능을 추가할 때 올바르게 동작하지 않을 수 있다(의존성이 있기 때문에 연관된 컴포넌트까지 영향).

 

선언형으로 컴포넌트를 작성해 독립적인 컴포넌트를 구성하면 특정 컴포넌트에 기능을 추가하거나 삭제할 때, 해당 컴포넌트만 들여다보면 되기 때문에 수정, 확장에 용이하다고 할 수 있다.

 

예를 들어 Form에서 input 값을 받아왔을 때, TodoList에 작성하기 위해 어떻게 해야 할까? 기존에는 TodoList를 직접 참조해 결과를 담아두는 곳을 활용, 변경해서 작성했다. 이렇게 작성하면 Form은 독립적이지 못하고(Form 자체의 기능만 수행하는 것이 아니다), ToDoList에 의존하게 된다. 

 

이를 해결하기 위해 Form 생성 파라미터에 이벤트 콜백 함수를 넣고, 입력을 받으면 콜백 함수를 통해 입력 값을 넘겨주면 된다. 입력이 있고, 이벤트가 호출되면 데이터를 넘겨주겠다고 선언한 것이다. Form의 이벤트 콜백 함수를 통해 TodoList의 상태를 추가, 변경이 가능해진다.

 

명령형은 화면이 어느 타이밍에, 어느 곳에서 고쳐지는지 추적하기 힘든 반면 컴포넌트를 활용하면 해당 부분만 쳐다보면 되기 때문에 수월하다.

 

---

 

생성자 함수와 class

 

2주차 과제는 강의를 따라 하며 작성한 Simple Todo List를 보완하는 것이다. 과제 공통 요구사항으로 생성자 함수를 new 키워드 없이 호출한 경우 에러가 나도록 방어 코드를 작성해야 하는 것이 있었다. 그러나 컴포넌트를 class로 구현한 경우에는 필요하지 않다고 작성되어 있어 둘의 차이가 무엇인지 궁금해졌다.

 

자바스크립트에서 객체를 생성하기 위해 생성자 함수와 class를 사용한다. class를 통해 객체는 어떻게 생성되는 것일까?

 

class User{
    constructor(name){
        this.name = name;
    }
    say(){
        console.log(this.name)
    }
}

 

User 클래스가 있을 때, new User()로 호출하게 되면 constructor() 생성자 함수는 new 키워드에 의해 자동으로 호출되고, 객체가 초기화된다. 객체를 생성하고 나면, User.say()를 통해 User 객체의 메서드를 활용할 수 있게 된다.

 

그렇다면 new 키워드를 사용하지 않고 생성자 함수를 호출했을 때와 class를 호출했을 때의 차이는? 결과는 생성자 함수는 에러가 발생하지 않고, class는 에러가 발생한다.

 

User class는 우선 함수로 동작한다. class로 만든 함수 내부에는 "[[IsClassConstructor]]: true"가 존재하는데 constructor() 생성자 함수를 조회하는 것이다. 따라서 new 키워드를 사용하지 않고 class를 통해 객체를 생성하면 에러가 발생하는 것이다. 

 

따라서 class는 내부적으로 new 키워드 없이 작성되지 않도록 되어 있고, 생성자 함수는 그렇지 못하기 때문에 생성자 함수 내부에서 new 키워드 없이 생성되지 않는 방어 코드를 작성해 주어야 한다.

 

---

 

부족한 점

• 생성자 함수와 class의 차이점
• 컴포넌트를 class로 작성하기

 

느낀 점

 

지난주차부터 본 강의와 선택형 강의를 통해 선언형, 함수형에 대해 다루기 시작했다. 선언형, 함수형은 아직 너무 어려운 개념이라 따라가기 벅차다. 더 많은 시간을 투자해 공부를 해야 하는데, 사실 본 강의를 따라가기에도 하루가 모자라다.. 우아한 테크코스 프리코스 과정을 끝내고 자바스크립트 관련해 가이드라인이 될 만한 책들을 추천해 주었다. 해당 책을 구매해서 따로 공부하며 빠르게 따라잡을 수 있도록 해야겠다.

 

방어 코드를 작성하는 방법은 간단하게 작성할 수 있을 것 같은데, 정확한 동작 원리를 아직 깊게 이해하지 못했다. 추가적으로 생성자 함수와 class를 통해 객체를 생성할 때의 차이가 무엇인지 찾아볼 필요가 있다. 

 

오늘부터 2차 과제가 시작되었고, 다음 주에는 개인 프로젝트가 시작된다. 그 후에는 팀 프로젝트가 진행될 것이고.. 민폐 안 끼치려면 빨리 실력을 늘려야 할 텐데🤔

 

---

 

임시 팀은 오늘까지가 마지막이다. 화요일 오후에 새로운 팀이 구성된 후 커피 챗을 진행할 때 주제를 정해주셨다. "이번 주 주제는 간단한 자기소개 및 지난 2주간 학습해보니 ‘내가 알던 지식과 달랐던 개념' 이야기하기입니다." 조금 더 생각해 봐야겠지만, 우선 가장 크게 느꼈던 것은 선언형과 명령형의 차이다. 정처기를 공부할 때 단순 암기를 통해 외웠던 터라 둘의 차이는 그저 언어를 구분하는 카테고리 정도로 생각했다. 이밖에도 다양한 개념들을 배웠었는데, 내일이 되기 전까지 무엇이 내가 알던 것과 어떻게 달랐었는지 정리해야겠다.

 

참고

 

https://ko.javascript.info/class#ref-1185

클래스와 기본 문법

https://velog.io/@ansrjsdn/%EC%83%9D%EC%84%B1%EC%9E%90-%ED%95%A8%EC%88%98%EC%99%80-class%EC%9D%98-%EC%B0%A8%EC%9D%B4

생성자 함수와 class의 차이