[JavaScript] class, iterable, 제너레이터, 라이브러리와 프레임워크 차이

🥕 class

 

자바스크립트에서 클래스는함수의 한 종류입니다.

 

혹자는 자바스크립트의 클래스를 문법 설탕에 불과하다고 말하지만 함수와는 중요한 차이가 몇 가지 있습니다.

클래스는 상속을 지원하는extends와 super 키워드를 제공합니다. 하지만 생성자 함수는 extends와 super 키워드를 지원하지 않습니다.

 

클래스는호이스팅이 발생하지 않는 것처럼 동작합니다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생합니다.

 

class로 만든 함수에는 특수 내부 프로퍼티인 [[IsClassConstructor]]: true가 붙습니다. 따라서new와 함께 호출하지 않으면 에러가 발생합니다.

 

또한 클래스에 정의된 메서드는 열거할 수 없으며, 항상strict mode로 실행됩니다

 

 

🥕 클래스형 컴포넌트와 함수형 컴포넌트의 차이

리액트에서 컴포넌트를 만드는 방법에는 클래스형 컴포넌트(class components)와 함수형 컴포넌트(functional components)가 있습니다.

 

클래스형 컴포넌트는 ES6의 클래스(class)를 사용하여 컴포넌트를 정의합니다. 이 방식은 React의 컴포넌트의 상태(state)와 생명주기(lifecycle)를 다룰 때 매우 유용합니다.
반면에 함수형 컴포넌트는 ES6의 화살표 함수(arrow function)를 사용하여 컴포넌트를 정의합니다. 이 방식은 훅(hook) API와 함께 많이 사용되며, 컴포넌트의 상태와 생명주기를 다룰 때도 유용합니다.

 

클래스형 컴포넌트와 함수형 컴포넌트의 가장 큰 차이점은 상태와 생명주기의 다루는 방식입니다. 클래스형 컴포넌트는 상태를 this.state로 정의하고, 생명주기 메서드를 오버라이드하여 다양한 작업을 수행합니다. 반면에 함수형 컴포넌트는 상태를 useState 훅을 사용하여 정의하고, useEffect 훅을 사용하여 생명주기를 다룹니다. 또한, 클래스형 컴포넌트에서는 this 키워드를 사용하여 상태나 메서드를 참조하며, 함수형 컴포넌트에서는 this 키워드를 사용하지 않습니다. 이러한 차이점 때문에, 함수형 컴포넌트는 더 간결하고 가독성이 좋아지며, 테스트와 리팩토링이 쉽게 이루어질 수 있습니다.

 

🥕 이터러블

 

Well-known Symbol인Symbol.iterator를 프로퍼티 키로 사용한 메서드를직접 구현하거나 프로토타입 체인을 통해상속 받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한이터레이터를 반환합니다. 이러한 규약을이터러블 프로토콜이라 하며, 이터러블 프로토콜을 준수한 객체를 이터러블이라고 합니다.
이터러블은 for…of문으로 순회할 수 있으며스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있습니다.

🥕 이터레이터

이터러블의Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한이터레이터를 반환합니다. 이터레이터는 next 메서드를 소유하며 next 메서드를 호출하면이터러블을 순회하며 value, done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환합니다. 이러한 규약을 이터레이터 프로토콜이라 하며, 이터레이터 프로토콜을 준수한 객체를 이터레이터라고 합니다.
이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할을 합니다.
이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환합니다.
이터러블의 Symbol.iterator 메서드가 반환한 이터레이터는 next 메서드를 갖습니다.
이터레이터의 next 메서드는 이터러블의 각 요소를 순회하기 위한 포인터의 역할을 합니다.

즉,이터레이터의 next 메서드를 호출하면 이터러블을순차적으로 한 단계씩 순회하며 순회 결과를 나타내는이터레이터 리절트 객체를 반환합니다.

🥕 이터러블과 이터레이터 차이

ES6에서 도입된이터레이션 프로토콜은순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해ECMAScript 사양에 정의하여 미리 약속한 규칙입니다.

ES6 이전의 순회 가능한 데이터 컬렉션, 즉, 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등은 통일된 규약없이 각자 나름의 구조를 가지고 for 문, for…in문, forEach 메서드 등다양한 방법으로 순회할 수 있었습니다.
ES6에서는 순회 가능한 데이터 컬렉션을이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for…of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록일원화했습니다.

 

이터레이터의next 메서드가 반환하는 이터레이터 리절트 객체의 value 프로퍼티는 현재 순회 중인이터러블의 값을 나타내며done 프로퍼티는 이터러블의순회 완료 여부를 나타냅니다.

🥕 제너레이터

Generator은 Iterator를 반환하는 함수입니다.
ES6에서 제너레이터 함수가 도입되어 함수선언식의 함수명 앞에 별표(*)를 붙여 사용할 수 있습니다.
또한 next() 메서드를 호출할 때마다 반환할 값은 yield 키워드를 사용해 지정할 수 있습니다.

🥕 라이브러리

개발자가 소프트웨어를 개발함에 있어 코드를 구현하는 개발 시간을 줄이고, 코드의 재사용성을 증가 시키기 위해 일련의 클래스 묶음이나 뼈대, 틀을 라이브러리 형태로 제공되는 것입니다.

🥕 프레임워크

라이브러리란 개발자가 만든 클래스들의 나열로, 다른 프로그램들에서 사용할 수 있도록 제공하는 방식입니다.

🥕 라이브러리와 프레임워크 차이

프레임워크와 라이브러리의 차이점은 흐름을 누가 지니고 있냐의 차이입니다. 프레임워크는 전체적인 흐름을 자체적으로 가지고 있어 프로그래머는 그 안에서 필요한 코드를 작성합니다. 반면에 라이브러리는 프로그래머가 전체적인 흐름을 가지고 있어 라이브러리를 자신이 원하는 기능을 구현하고 싶을 때 가져다 사용할 수 있습니다.
간단히 프레임워크는 가져다가 사용한다는 것보다는 프레임워크라는 특정 공간에 들어가서 사용한다는 느낌이 더 강하다고 말할 수 있으며 라이브러리는 라이브러리 자체를 가져가 사용하고 호출하는 용도로 사용된다고 생각하시면 쉽게 이해할 수 있습니다.