2021.04.08 데일리 회고

Facts

• 드림코딩엘리의 강의를 들으면서 리액트 공부를 했다.

Feeings & Findings

우테코 방학 이후로 처음 쓰는 데일리 회고이다. 방학해도 열심히 공부한다고 마음을 먹었는데 너무 놀았다. 다 놀았으니 이제부터 열심히 공부하겠다는 다짐을 했다.

js, 리액트, 피드백 정리 중 어떤 공부를 해야할지에 대해 고민이 많았다. 코치가 추천해준 방법은 피드백 정리나 js의 기초를 다지는 것이었다. 그래서 나도 그렇게 하려고 마음을 먹었다.
하지만 계속 불안했다. 당장 다음주 화요일이 시작인데 리액트를 전혀 모른다. 해본 적은 있지만 너무 오래돼서 기억이 나질 않는다. 이렇게 불안할 바엔 리액트를 한번 훑고 피드백 정리와 js 기초 다지는 것을 해야겠다고 생각했다.
리액트가 어떤 것인지만 정말 빠르게 훑어보려고 한다. 운이 좋게도 예전에 구매해놓은 드림코딩엘리의 강의가 있어서 이것만 하면 될 것 같다. 내일까지 다 끝내는 것이 목표이다.

드림코딩엘리의 강의를 들으면서 리액트 공부를 했다.

약 5시간 정도 리액트 공부를 했다. 배운 것은 다음과 같다.

• 리액트를 배워야 하는 이유
• 리액트의 컨셉(components, state, props, render, virtual DOM)
• habit tracker 실습

예전에 했던 것들이 생각나면서 꽤 재미있게 강의를 들었다. 조금 헷갈리는 것은 components를 얼마나 잘게 쪼개야 하는지에 대한 것인데 아직은 고민할 단계는 아닌 것 같다.
또, state가 변하게 되면 자동으로 render을 하는 특성 상 부모의 state가 변하게 되면 모든 자식도 같이 render가 된다고 한다. 이때, virtual DOM Tree에서 실제 DOM tree와 비교해서 바뀐 부분만 업데이트를 하도록 요청하기 때문에 성능에 문제가 없다고 한다. 이것이 어떻게 가능한지 궁금하다. 지하철 노선도 미션을 할 때 사용했던 캐시 방식이지 않을까라는 생각을 했었는데 다시 보니 절대 아닌 것 같다. 특정 부분만 업데이트되는 것을 어떻게 구현했을까? 나중에 실력이 더 쌓이면 라이브러리의 내부를 구경해봐야겠다.

또 궁금한 것은 부모가 props로 넘겨주는 것이 어떻게 가능한지 모르겠다.

<Habit
  key={habit.id}
  habit={habit}
  onIncrease={this.handleIncrease}
  onDecrease={this.handleDecrease}
  onDelete={this.handleDelete}
/>

이렇게 있을 때, Habit Component에서는 props에 key, habit 등 모든 상태가 담기게 되는데 어떻게 될까? React.Component에 이미 props가 있는 것 같고, Habit.props.habit = habit과 같이 할당을 해주는 것일까? 지금 생각해보니 가능하긴 할 것 같다.

그래서

<Habit
  habit={habit}
  habit={1}
/>

이렇게 할당하면 아래 것으로 할당되는 것 같다. 정확한 이유를 알아봐야겠다.

드림코딩엘리의 강의를 들으면 지금까지는 class의 constructor을 사용하지 않았다. 지금까지 js에서 class를 사용할 때, 상태 값이 필요하면 항상 constructor에 this.state = {}와 같은 방법을 사용했었고, 그래야 어떤 상태를 가지고 있는지 알 수 있어서 좋다고 생각했는데, 왜 그렇게 사용하지 않는지 이유가 궁금하다. 강의를 더 보다보면 알 수 있지 않을까?

궁금한 것도 많았지만 꽤 재미있고, 상태 값을 불변성을 유지하면서 바꿔줘야 하는 것이 특히 재밌다. 불변성을 유지하기 위해 이것저것 해보고 있다. 리액트가 재밌어서 레벨 2가 기다려진다.

Plans

• 리액트 강의 마무리하기
• 비동기 공부하기(하브루타 스터디)