[D3JS] 5. 얼굴 그리기 with Semantically meaningful JSX refactoring

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

 

[Compartmentalizing Complexity]

Compartmentalize는 "서로 영향을 주지 않도록 구분하다"라는 뜻입니다.

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

Smiley Face Part V

지난 강의에 이어 위의 코드를 리팩토링 해봅시다.

19~20 번째 라인은 not semantically meaningful(의미적으로 직관적이지 않음) 이기 때문에 이를 의미적으로 직관적인 코드로 리팩토링 할 수 있습니다.

19~20 라인을 FaceContainer라는 컴포넌트로 구현하면 좀 더 의미적으로 직관적입니다. 한편 FaceContainer의 g 태그 안에 기존의 코드를 넣어야 하는데 어떻게 할 수 있을까요?

이는 props.children으로 구현할 수 있습니다!

 

App은 Face가 있다는 것만 알아야지, BackgroundCircle, Eyes, Mouth가 필요하다는 건 알 필요가 없습니다. 그래서 App 아래에 Face라는 컴포넌트를 만듭니다. arc를 쓰는 곳은 Mouth에만 있습니다. 이를 통해 모든 컴포넌트들은 Compartmentalize(서로 영향 없음) 되고, 새로운 얼굴을 만들고 싶을 땐 index.js 만 고쳐주면 됩니다.

 

d3에는 range라는 것이 있는데요

const array = range(10)이라고 하면 [0, 1, 2, 3, 4, 5, 6, 7, 8]의 배열을 만들어 줍니다.

for문을 안 돌려도 되니 훨씬 편하죠?

array에 들어있는 값은 사용하지 않지만 map을 이용하여 여러 개의 얼굴을 만들 수 있습니다. Math.random을 이용하여 얼굴들에게 변주를 줄 수도 있고요.

for문을 쓰면 첫 번째 루프에서 return문이 실행되면서 얼굴이 한 개만 그려집니다.

위의 코드로 하려면 부모 컴포넌트에서 Face 컴포넌트를 여러 번 부르는 방법도 있겠지만, 강의에 나온 대로 array.map을 쓰는 방법이 더 간단하군요. 개인적으로 array에 있는 값은 활용하지 않고 map을 이용해 반복문을 돌리는 발상이 재밌습니다.