[WIL] 이노베이션 3주차 회고 | 주특기 입문 주차

리액트 입문 주차가 시작 되고 새로운 과제를 받았다 !

 

React 입문 주차 개인과제

(8월 18일 오후9시까지 제출!)

-구현해야할 기능

• UI 구현하기
• Todo 추가 하기
• Todo 삭제 하기
• Todo 완료 상태 변경하기 (완료 ↔ 진행중)

완성본 !!

 

 

 

 

입문주차의 최고 난제는 과제요구사항 중 하나였던 주어진 구성에 맞게 파일을 나누고, 그에 따라 컴포넌트 구조를 짜는 것이었다.

완성을 해보고 나니 왜 그렇게 하라는지 이해는 하겠다만...처음 부터 구성에 엄청 공을 들였다. (이해가 되지 않아서)

두번째 최고의 난제는 부모-자식 컴포넌트의 구조를 이해하는 것이었다.

state와 props를 강의를 보며 직접 써보고 이해도 했지만 직접 내 코드에 적용시키기엔 많이 어려웠다...

(그래서 정리 타임..)

 

• state와 props는 객체다
• 둘 다 render update를 trigger한다.
• 둘 다 deterministic (결정론적 - 예측한 그대로 동작한다)
  
  

props

컴포넌트의 구성(configuration) 중 하나

상위 컴포넌트(부모)로부터 받아지는 값이며, 이 값을 받아들이는 컴포넌트(자식)은 이 값을 바꿀 수 없다(불변)

state

컴포넌트가 마운트될 때 기본값으로 시작하고,  이벤트에 의해 돌연변이-변화-(mutations)가 발생한다.

컴포넌트는 내부적으로 자체 state를 관리하지만, 자식 컴포넌트의 state까지 간섭할 필요는 없음

 

 

 

이번주차에 배운 것 

-DOM이란?

DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.

 

--> 그렇다면 가상돔은?

실제 DOM에 접근하여 조작하는 대신, 이를 추상화 한 자바스크립트 객체를 구성하여 사용한다. 가상돔은 돔의 상태를 메모리 위에 계속 올려두고 돔에 변경이 있을경우 해당 변경을 반영한다

 

-서버리스

 서버리스(Serverless)라는 단어만 보면 자칫 '서버리스 = 백엔드 리스' 라거나 '서버가 없다' 라고 생각할 수 있지만 단순히 미리 위와같은 서버의 역할을 미리 설정해둔 서버를 서버리스라고 한다.

 

 

 

이번주는 유독 강의를 듣는둥 마는둥...머리에 잘 들어오지 않았다.

역시 나는 쓰면서 공부해야한다.

이번주는 강의내용을 직접 주석처리하면서 이해해보려고 했다.

시간적으로는 효율적이나 머리엔 잘 안들어온다.

혼자 딴생각하고 있는 나를 발견...! 앗....

화요일이 되어서야 제대로 정신을 차리고 들었던 강의를 2배속으로 돌렸더니 그제서야 이해가 되더라...

이번주차에 아쉬운 점은 컴포넌트 구조에 얽매여서 정말 많은 고민과 많은 시간을 들였다.

또한 코드를 짜면서도 내가 여기에 자식(혹은 부모를)둔게 맞나...? 

무한 헷갈림의 굴레에 빠지기도 했다.

이번주에 느낀점은 기록하는것도 나의 장점이다 ! 장점을 살려 맞는 공부법을 찾아보자 !