LG CNS 부트캠프 학습일지 6일차

학습 내용

• JavaScript 문법
• React 개요 및 실습

JavaScript 문법

구조분해, Optional Chaining, 널 병합 연산자, Spread Operator 등을 배웠다. Java, Kotlin 그리고 Python에서 봤던 것이라서 익숙하지만 적극적으로 사용해본 적은 없어서 이번 기회에 다시 배울 수 있었다.

Optional Chaining

Optional Chaining이 가장 기억에 남는다. Optional Chaining은 코블몬의 Kotlin 코드를 보면서 자주 봤다. 객체의 필드나 메소드에 접근할 때 NullPointerException이 발생할 수 있다. 하지만 Optional Chaining을 사용하면 그 객체가 필드나 메소드를 가지고 있는지 확인하지 않고 접근할 수 있게 된다. Optional Chaining에 익숙하지 않은 이유로 접근하려는 필드가 널이 아닌지 확인하는 것을 명확하게 확인하는 것을 개인적으로는 선호하지만, 이것을 사용하면 프로그램의 정상 흐름과 관련된 코드만 남길 수 있어서 가독성을 높이는데 좋다고 생각했다.

myObject.?someProperty; // otherwise undefined

myObject.?doSomething();

널 병합 연산자

Nullish Coalescing Operator라고도 한다. 왼쪽 값이 null이나 undefined의 경우에만 오른쪽 값을 사용한다.

const name = null;
const result = name ?? "default";

console.log(result);

|| 연산자랑 비슷하다. 하지만 || 연산자는 null과 undefined를 포함한 NaN, false, "", 0 등의 거짓값의 경우까지 아울러 사용할 수 있다.

const count = 0;

console.log(count || 10);

React 개요 및 실습

TypeScript를 사용했다. 정적타입언어를 선호하기 때문이다. JavaScript를 잘해서 TypeScript를 사용하는 것은 아니다. 실습을 따라가면서 그냥 JavaScript를 사용하는게 좋지 않았을까 후회했다.

실습에서는 Create React App (이하 CRA) 를 사용했는데, WebStorm IDE에서 제공하는 Vite를 사용했다. React에서도 CRA를 더 이상 추천하지 않는다.¹

Spread Operator를 사용해서 Props를 전달할 수 있었다.

<Book {...props}></Book>

Virtual DOM

기술면접을 볼 때마다 물어보는 주제였다. 면접을 볼 때마다 준비를 하고 갔기 때문에 알고 있는 개념이라고 생각했는데 잘못알고 있던 부분이 있는 것 같아서 적는다.

Virtual DOM과 구별되는 개념으로 Real DOM이라고 말한다. Real DOM은 하부 요소가 하나라도 바뀌면 전체가 다시 렌더링 된다고 생각했다. 하지만 그게 아니었다. Real DOM도 바뀐 요소만 다시 렌더링 하는 정도의 최적화는 되어 있다.

Virtual DOM이 없었다면 DOM이 어떻게 변경되었는지 그리고 언제 어떻게 업데이트할 것인지 등을 개발자가 직접 신경써주어야 한다. 다시 말해 Virtual DOM은 개발자가 그런 것들을 하나하나 신경쓰지 않아도 되도록 도와준다. 최적화되어 있기 때문에 속도도 빠르지만 UI를 효율적으로 관리할 수 있게 해준다는 점에서 유용한 기술이다.

Garbage Collection과 비슷하다. Garbage Collection도 마찬가지로 개발자가 메모리를 할당하고 해제하는 것을 신경쓰지 않아도 되게 만들어준다.

결론

React 첫 수업이었다. 꽤 어려웠다. 옆에 두고 참고할 수 있는 종이책이 있으면 좋겠다. 적어도 이번 주 안에 배송이 되면 좋겠다.

Reference

1. Sunsetting Create React App ↩