[D3JS] 4. 얼굴 그리기 with React & ES6

이 글은 https://youtu.be/2LhoCfjm8R4 강의를 정리하였습니다.

이번 강의에서는

- 리액트 컴포넌트

- 리액트 Props

- JSX transpilation
- ES6

- ES5의 함수와 ES6의 화살표 함수
- ES5의 var vs ES6의 let, const
- ES6의 비구조화 할당

에 대해서 배웁니다.

 

우리가 사용하는 앱들도 새로운 업데이트가 생기듯 자바스크립트도 새 기능들이 업데이트 됩니다. 자바스크립트의 표준은 ECMA 스크립트인데요, 그래서 자바스크립트는 ECMA 스크립트 2019 혹은 ES6와 같은 이름으로 버전이 명명됩니다.

ECMA 스크립트에 대한 설명은 위키백과 한국어보다 영어에 더 설명이 잘 되어 있습니다.

https://en.wikipedia.org/wiki/ECMAScript

ECMAScript - Wikipedia

ECMA 스크립트 각 버전에서 주요했던 업데이트가 어떤 것인지 설명이 잘 나와있어요.

 

지난번에 했던 아래 수업 코드를 컴포넌트, 모듈을 통해 리팩토링 해봅시다.

https://vizhub.com/curran/4297411eba0a4287a70f5da9dab5fd87?edit=files&file=index.js 

Smiley Face Part III

기존의 얼굴을 그렸던 circle을 BackgroundCircle 컴포넌트로 만듭니다. 주의해야할 점은 컴포넌트는 대문자로 시작해야 한다는 것입니다. 소문자로 시작하면 리액트는 태그로 인식하기 때문입니다.

그리고 반지름을 BackgroundCircle에서 계산하는 것이 아니라 미리 계산한 값을 props 로 전달하도록 변경하였습니다. 함수에서 인자를 전달하는 것과 똑같은 것이죠. props가 여러개라면 매번 props. 을 입력해주는게 귀찮을 것입니다. 이를 해결해주는 것이 ES6의 Destructuring(비구조화 할당) 입니다.

verbose(장황)했던 코드가 훨씬 간결해졌습니다!

(영어로 강의를 들으니 단어 공부도 되네요 :D)

 

강의에서 const와 let의 차이도 설명하셨습니다. ES6에서는 const 와 let이 등장했습니다.

const는 constant(상수) 에서 따온 말이고 let은 비틀즈의 유명한 노래 let it be 처럼 ~하게 하다 라는 뜻을 가지고 있습니다.

https://youtu.be/QDYfEBY9NM4

const는 값을 바꾸면 에러가 나지만 let과 var는 변경이 가능합니다. 개발자가 변수를 const로 했느냐에 따라 '아, 이 값은 변하지 않는 값이구나~' 라는 것을 알 수 있기 때문에 코드의 가독성이 높아집니다.

 

한편 let과 var는 변경이 가능하기 때문에 비슷하게 느껴지지 않으세요? 이에 대한 차이점은 https://ko.javascript.info/var 에 자세히 설명되어 있는데요, 요약하자면 var는 쓰지 말고 let만 쓰자 라고 알고 계시면 됩니다.

 

Multiple Files with ES6 Modules

ES6의 Modules를 이용하여 컴포넌트를 더 작게 쪼개봅시다.

수업에 사용되는 예시는 컴포넌트의 코드 길이가 적어서 나눌 필요가 없지만, 한 컴포넌트의 코드 길이가 너무 길다면 나눠보는 것을 고려해볼만 합니다.

 

Named exports vs Default exports

js 파일로 모듈화 할 때 named exports와 default exports 두가지 중 하나를 사용할 수 있습니다.

[BackgroundCircle_Named_Exports.js]
import React from 'react';

export const BackgroundCircle = ({ radius, strokeWidth }) => (
  <circle
    r={radius}
    fill="yellow"
    stroke="black"
    stroke-width={strokeWidth}
  />
);

[BackgroundCircle_Default_Exports.js]
import React from 'react';

export default ({ radius, strokeWidth }) => (
  <circle
    r={radius}
    fill="yellow"
    stroke="black"
    stroke-width={strokeWidth}
  />
);

[BackgroundCircle_Default_Exports2.js]
import React from 'react';

export BackgroundCircle = ({ radius, strokeWidth }) => (
  <circle
    r={radius}
    fill="yellow"
    stroke="black"
    stroke-width={strokeWidth}
  />
);

export default BackgroundCircle;

Named Exports의 경우 import 할 때

import { BackgroundCircle } from './BackgroundCircle';

이런식으로 중괄호가 있고, 선언했던 함수명과 같은 것으로 불러와야 합니다.

 

반면 Default Exports의 경우는 

import OverWatch from './BackgroundCircle';

이런식으로 중괄호가 없어도 되고 이름도 원하는대로 불러올 수 있습니다.

(제가 오버워치를 좋아합니다 :0)

 

강의를 해주시는 선생님께서는 Default Exports는 이름을 아무렇게나 부를 수 있기 때문에 혼동이 생길 수 있어 Named Exports를 추천하십니다.

 

완성된 코드는 아래에 있습니다!

https://vizhub.com/curran/be34ae5bb6ef438b9047b0c717d5315c

Smiley Face Part V