시작하기 앞서서....

이번 6주차부터 강사님이 변경되면서 수강신청 이유인 react가 시작이 되었으며, "React 맛보기"라는 소제목으로 특성(?) 또는 함수(?)를 보여준다.
그러나 이번 주차 일지에서는 정부지원금이지만 나의 "기회비용" 을 지불하였기에 이번 주차는 장점 및 단점부터 정리하려고 한다.

장점

• 리액트의 맛보기로 리액트 특성에 대해서 궁금증을 유발할 수 있다. 실제로도 궁금해서 이전 주차보다 다른 강의 또는 자료를 더 많이 찾아봤다.

단점

• '맛보기'라고 하기에는 1주차를 전부 소비하고도 다음 주에 한 타임 더 소비한다. 맛보기라고 하기에는 할애하는 시간이 많아서 개인적으로 맛보기의 취지에 벗어난 것 같다.
• 강사님이 바뀌어서 스타일도 바뀌었다. 다시 적응이 조금 필요하다.
• 강사님은 우리가 이미 안 다는 것을 전제로 진행하는 느끼이었다. 기초역량훈련이라는 취지에 어긋난다고 생각한다. 아무리 코딩은 스스로 찾고 해결하는 것이지만 초보자가 느끼기에는 그냥 맨 땅에 헤딩하는 느낌이다. 적어도 가이드라인이나 앞선 강의처럼 하나씩 해주는 것이 더 나을 것 같다고 생각한다.
• 강의가 정제(?)되지 않은 듯한 느낌이다. 그냥 오프라인 수업 또는 대학교 수업 강의하시는 것을 그대로 찍은 듯한 느낌이고, 이전 강사님이 워낙 매끄럽게 하다보니 이 부분 더 차이가 난다.

이번 주차 총평

다음 주차 강의를 들으면서 바뀐다면 7주차 학습일지에 추가적으로 정리하려고 한다. 하지만, 이번 주차를 봤을 때 다른 분들에게 이 강의를 추천하고 싶은 마음이 없다. React강의는 유투브 또는 이미 기술 블로그 작성하시는 분들이 더 자세한 설명이 있다.

간단한 6주차 정리

DOM

• 브라우저가 이해하는 element의 원형
• 유투브 "유노코딩"과 "짐코딩"을 통한 쉬운 이해
  • HTML로 작성된 코드 → 브라우저를 통해서 ‘렌더링' → JS가 접근하고 제어 수 있게 DOM(웹 문서를 객체화, Document Object Model) 트리를 구성 (각 네모 박스를 ‘노드'리고 함)

(출처: 유노코딩)

(출처: 짐코딩의 CODING GYM)

JSX와 Babel

• JSX(JavaScript XML): JS에 XML을 추가한 확장 문법

const element = <h1>hello</h1>

• Babel: JS compiler -> JSX를 JS로 해석해줌
• cdn을 통해서 babel을 끌고왔다면 script부분에 어떤 것을 해석할 지 표시 필요 <script type="text/babel"> </script>

React의 리랜더링(re-rendering)

• React의 리랜더링은 효율적이나 trade-off인 부분도 있음
• React의 엘리먼트는 불변객체(immutable) → 우리는 render에 전달할 뿐 변경 및 반영은 react가 알아서 함
• Reconciliation(재조정): 엘리먼트 타입이 같으면 새로 구축한다, 그러나 타입이 같으면 key를 먼저 비교하고 다음 props를 비교해서 변경사항 반영
  • virtual DOM을 통해서 비교하고 반영한다
  • 변동사항만 바뀌고 나머지는 바뀌지 않음