자바스크립트 문법 정리 pdf - jabaseukeulibteu munbeob jeongli pdf

자바스크립트와 웹 개발에 대한 지식을 전부 학습하고 난 다음 React 학습을 시작 하는 건 아주 이상적인 학습법입니다. 하지만 불행하게도 우리는 이상적인 세상에 살고 있지 않습니다. 자바스크립트를 모두 소화하고 난 다음 React를 시작하겠다고 마음먹으면 오히려 내상을 입을 수 있습니다. 자바스크립트를 어느 정도 알고 있는 사람이라면 React 학습을 위해 추가로 학습해야 하는 게 그리 많지 않을 수 있습니다. 실제 React 기반 애플리케이션에서 쓰이는 몇몇 자바스크립트 피처(feature)만 알아도 React 학습을 시작하는 데 무리가 없기 때문입니다. 아래는 React를 학습하기 위해 알아야 할 자바스크립트 피처 리스트입니다.

• ES6 classes
• The new variable declaration let/const
• Arrow functions
• Destructuring assignment
• Map and filter
• ES6 module system

위 피처는 전체 자바스크립트 피처 중 20% 정도밖에 차지하지 않습니다. 하지만 React 개발 도중 80%의 시간 동안 이 피처를 사용하게 될 겁니다. 이 튜토리얼을 통해 위에 언급한 피처가 무엇인지 알아보겠습니다.

Create React App 탐험하기

대부분의 사람이 create-react-app을 커맨드 라인에 입력하면서 React 학습을 시작했을 겁니다. 이 패키지엔 React를 실행하기 위한 모든 것이 세팅되어 있습니다. 패키지 설치가 끝난 후, src/app.js을 열어보면 아래와 같이 React 클래스(class)를 볼 수 있습니다.

ES6를 배워본 적이 없는 분이라면 클래스를 React의 고유한 피처라고 생각할 수 있습니다. 하지만 클래스는 ES6에서 새롭게 도입된 자바스크립트 피처입니다. 이렇게 React는 ES6 피처를 사용해 만들어졌기 때문에 ES6를 학습하면 React 코드를 더 잘 이해할 수 있습니다. 일단 ES6의 클래스부터 알아봅시다

ES6 클래스

ES6에선 자바나 파이썬 같은 객체지향언어에서 쓰이는 클래스가 도입되었습니다. ES6에서 쓰이는 클래스를 간단한 코드로 살펴보면 아래와 같습니다.

class는 새로운 객체를 생성할 때 쓰이는 식별자(또는 간단한 이름, 위의 코드에선 Developer) 앞에 쓰입니다. 생성자(constructor) 메서드는 객체를 초기화할 때 호출됩니다. 생성자에 전달되는 매개변수는 새로 만들어지는 객체에 전달됩니다.

예시:

클래스엔 원하는 만큼의 메서드를 정의할 수 있습니다. 위에선 문자열을 반환하는 hello 메서드가 정의되어 있습니다.

클래스 상속

클래스는 다른 클래스의 정의를 extends(확장) 할 수 있습니다. 확장한 클래스로 만든 객체엔 기존 클래스와 확장한 클래스에서 정의한 모든 메서드가 있습니다.

다른 클래스를 extends(확장) 해서 만든 클래스는 자식 클래스(child class) 혹은 서브 클래스(sub class)라고 부릅니다. 피 확장 클래스는 부모 클래스(parent class) 혹은 슈퍼 클래스(super class)라고 부릅니다. 자식 클래스는 부모 클래스에 정의된 메서드를 오버라이드(override)할 수 있는데, 이는 부모 클래스에 정의된 메서드를 자식 클래스에서 새롭게 정의하고 교체한다는 의미입니다. 자식 클래스 ReactDeveloper에서 부모 클래스(Developer)의 함수, hello를 오버라이드 해보겠습니다.

보이시죠? Developer 클래스에서 정의했던 hello 메서드가 오버라이드되어 새로운 문자열이 반환되었습니다.

React에서 어떻게 쓰이나요?

ES6의 클래스와 상속에 관한 개념을 학습했기 때문에, 이제 src/app.js에 쓰인 React 클래스가 뭔지 알 수 있습니다. React 클래스는 React 컴포넌트(component)입니다. 이 컴포넌트는 단순히 React 패키지로부터 import 한 React 컴포넌트 클래스를 상속받은 평범한 ES6 클래스일 뿐입니다.

이렇게 React 컴포넌트 클래스를 상속받았기 때문에 우리는

import React from 'react';

import React from 'react';

import React from 'react';

let과 const로 변수 선언하기

자바스크립트의

import React from 'react';

import React from 'react';

import React from 'react';

import React from 'react';

import React from 'react';

import React from 'react';

둘 중 뭘 써야하나요?

정해진 규칙이 있는 것은 아닙니다. 하지만 경험상으론 변수 선언은

import React from 'react';

import React from 'react';

import React from 'react';

import React from 'react';

import React from 'react';

import React from 'react';

React에서 어떻게 쓰이나요?

변수가 필요한 모든 곳에 쓰입니다. 아래 예제를 통해 알아보도록 하겠습니다.

greeting 변수는 어플리케이션의 전체 생명주기(lifecycle)동안 변하지 않기 때문에

import React from 'react';

화살표 함수

화살표 함수(arrow function)는 ES6에서 도입된 새로운 피처입니다. 코드를 간결하고 읽기 쉽게 해주기 때문에 모던 언어에서 많이 쓰입니다. 화살표 함수를 쓰면 함수를 좀 더 짧은 문법(syntax)으로 작성할 수 있습니다.

자바스크립트를 오랫동안 다루던 개발자라면 기존 함수 선언 방법에서 새롭게 등장한 화살표 함수 선언 방법으로 바꾸는 불편할 수 있습니다. 제가 처음 화살표 함수를 배울 땐 아래 두 단계를 따라 함수를 재작성하였습니다.

1. function 키워드 지우기
2. create-react-app8다음에 뚱뚱한 화살표(fat arrow, =>) 기호 넣기

화살표 함수에서도 기존 함수 선언 방식에서와 마찬가지로 괄호는 매개변수를 감싸는 용도로 사용됩니다. 만약 매개변수가 하나라면 괄호를 생략할 수 있습니다. 아래 코드에서 두 번째 함수 singleParam은 매개변수가 firstName 하나이기 때문에 괄호를 생략하였습니다.

암묵적 반환(Implicit return)

화살표 함수의 본문(body)이 한 줄로만 구성되었다면, 반환 값 앞의 create-react-app9 키워드를 생략할 수 있습니다. 몸체를 감싸는 중괄호 src/app.js0역시 생략 가능합니다.

React에서 어떻게 쓰이나요?

React 컴포넌트를 만들 때 화살표 함수를 쓸 수 있습니다. React에서도 화살표 함수를 지원하기 때문입니다.

화살표 함수를 써서 만든 React 컴포넌트는 ES6 클래스 컴포넌트와 동일합니다.

화살표 함수는 코드를 좀 더 간결하게 만들어줍니다. 하지만 간결해진 대신 컴포넌트에서 라이프사이클을 활용하지 못한다는 단점이 있습니다. 이런 종류의 컴포넌트는 stateless 함수형 컴포넌트(functional component)라 불립니다. 리액트와 관련된 튜토리얼에서 이 용어를 많이 만나보시게 될 겁니다.

(Hooks가 등장하면서 이제 함수형 컴포넌트에서도 라이프사이클을 사용할 수 있습니다 — 옮긴이)

구조 분해 할당

ES6에서 새로 도입된 구조 분해 할당(destructuring assignment, 비구조화 할당)을 사용하면 객체나 배열 일부를 쉽게 변수로 해체할 수 있습니다. 예시를 살펴보겠습니다.

src/app.js1 객체의 src/app.js2 과src/app.js3프로퍼티를 해체하여 새로운 변수인 src/app.js2 과src/app.js3 에 할당하였습니다. 그런데 만약 src/app.js2 프로퍼티를 새로운 변수인 src/app.js7에 할당하고 싶다면 어떻게 해야할까요? 아래와 같이 하면 됩니다.

구조 분해 할당은 배열에도 적용할 수 있습니다. 객체에선 key를 사용했지만, 배열에선 배열 순서대로 대응한다는 점만 다릅니다.

src/app.js8을 사용하면 중간 인덱스(index)를 건너 뛰고 분해 할당하는게 가능합니다.

React에서 어떻게 쓰이나요?

React에서는 메서드 안에서 src/app.js9를 해체할당 하는데 자주 쓰입니다.

예시:

stateless 함수형 컴포넌트에서도 자주 쓰입니다. 화살표 함수에서 썼던 예제 코드를 다시 보도록 하죠.

매개변수를 바로 분해해서 대입하였습니다.

맵과 필터

이 튜토리얼은 ES6에서 새롭게 도입된 피처에 대해 다루고 있긴 하지만, 자바스크립트 ES5의 배열 메서드인 class0 과class1메서드는 꼭 언급하고 넘어가야 할 것 같습니다. 두 메서드는 React 애플리케이션을 만들 때 가장 많이 쓰이는 ES5 피처이기 때문입니다. 특히 데이터를 가공할 때 유용하게 쓰입니다.

API를 통해 받아온 데이터가 JSON 배열이라 가정해 봅시다.

배열의 각 요소를 map을 이용해 뽑아내 render()에서 사용할 수 있습니다. 아래와 같이 말이죠.

data를 필터링(filter, 가공하여 필요한 것만 남겨서)해서 render()에서 쓸 수도 있습니다.

ES6 모듈 시스템

ES6 모듈 시스템(module system)은 자바스크립트가 파일(모듈)을 호출(import)하고, 선언하여 내보낼 수 있게(export) 해 줍니다. src/app.js 코드로 이를 살펴보도록 하겠습니다.

코드 맨 윗줄을 보면 import 키워드가 있는걸 발견할 수 있습니다:

맨 아랫줄엔 class3 문이 있는걸 볼 수 있습니다:

이 코드를 이해하려면 모듈 문법에 대하여 먼저 알아야 합니다.

모듈은 class4 키워드를 통해 하나 혹은 다수의 값(객체나 함수, 또는 변수)을 선언하여 외부로 내보낼 수 있게 해주는 자바스크립트 파일입니다. 이를 확인하기 위해 class5 폴더에 새로운 파일, class6 을 만들어보도록 합시다.

touch util.js

그리고 나서 util.js에 아래와 같이 함수를 작성하도록 합시다. 이제 함수 times 모듈은 default export가 됩니다.

아래와 같이 여러 개의 named export를 만들 수도 있습니다.

이제 class7에서 export 한 함수들을 불러올 수 있게 되었습니다.

모듈 하나에 여러 개의 named exports가 있을 수 있지만, default export는 딱 하나만 허용됩니다. default export는 {}를 사용하지 않으면서, 상응하는 이름 없이도 import 할 수 있습니다.

반면, named exports는 {}을 이용해 import 해야 하고, 정확한 이름도 명시해 주어야 합니다. as 키워드를 사용해 별칭을 사용하면 모듈 이름이 겹치는 경우를 할 수 있습니다.

아래와 같이 절대 이름(absolute name)을 이용하여 import 하는 것도 가능합니다.

import React from 'react';

절대 이름을 사용하여 import할 때는 자바스크립트가 이에 상응하는 패키지 이름을 class8에서 검색합니다. 그러므로 local에 저장된 파일을 import 할 때는 파일의 위치를 제대로 입력하는 걸 잊지 마시기 바랍니다.

React에서 어떻게 쓰이나요?

모듈 시스템과 관련된 문법이 쓰인걸 class7 파일에서 이미 확인한 바 있습니다. export된 생성자(constructor)0 컴포넌트가 렌더링 되고 있는 생성자(constructor)1 파일에서도 이를 확인할 수 있습니다. serviceWorker에 대해선 지금은 넘어가도록 하겠습니다.

생성자(constructor)2 디렉토리에서 import 한 App은 확장자가 없다는 점에 주목하시기 바랍니다. 자바스크립트 파일을 import 할 땐, 확장자를 생략해도 됩니다. 하지만 생성자(constructor)3같이 다른 종류의 파일은 확장자를 반드시 써 줘야 합니다. DOM 렌더링에 사용되는 노드 모듈인 생성자(constructor)4도 import 해 주었습니다.

맨 아랫줄의 서비스 워커(service worker)는 React 애플리케이션이 오프라인에서도 작동할 수 있게 해줍니다. 이 피처는 기본적으로 꺼져있기 때문에, 본 튜토리얼에선 이에 대해서 더 자세히 알아보진 않겠습니다. React 유저 인터페이스(UI)를 만드는데 자신감이 생기면, 그때 PWA(Progressive Web App)을 학습하면서 서비스 워커를 알아봐도 늦지 않습니다.

결론

다른 웹 프레임워크가 자바스크립트 위에 프레임워크 특정 추상 레이어를 얹어 만들어진 것과 달리 React는 순수 자바스크립트로만 만들어졌습니다. 이런 장점 때문에 자바스크립트 개발자 사이에 React의 인기가 식지 않고 있습니다. React는 자바스크립트의 장점을 이용해 유저 인터페이스 개발과 유지보수를 쉽게 해줍니다. React 애플리케이션 안엔 React 특유의 문법으로 작성한 코드도 있지만, 자바스크립 코드가 더 많이 사용됩니다. 그렇기 때문에 자바스크립트, 특히 ES6를 잘 이해하는 개발자는 자신감을 갖고 React 애플리케이션을 만들 수 있을 겁니다. 이 말은 자바스크립트를 모두 마스터 한 다음 React 애플리케이션을 만들라는 말이 아닙니다. 작은 애플리케이션이라도 하나를 만들다 보면 자바스크립트를 더 학습할 기회가 찾아올 것입니다. 이렇게 더 나은 개발자가 될 수 있습니다.