[자습][React] Todo List 만들기

목표 :

1. 이번 목표
   1) react 기초 복습하기
   2) react + typescript 적용한 todo-list 만들기

2. 다음 목표
   3) hook 복습 + 최적화
   4) 테스트 붙이기
   5) rudux 복습 + 데이터 저장기능 구현

개요 :

회사에서 react + typescript 를 사용했지만, 중간에 투입된 프로젝트 였기에 이미 갖춰진 환경에서 코드만 짜면 되는 상황이었다. 기초를 다지는데는 프로젝트 생성부터 다시 해보는게 좋다고 생각한다. 그래서 react의 기초 동작 방식을 복습하고, 가장 기본인 todo list 만들기를 해보기로 했다.

• 저장소 : https://github.com/whlee0525/react-ts-todo-list

진행 과정 :

1. 개발도구 : WebStorm, nodeJS, yarn...
2. 프로젝트 생성 : npx create-react-app todo-list --template typescript
3. 설정 : Terminal, 브라우저, prettier, styled-components...

나의 말로 기억하기 :

1. nodeJS의 도입으로 javascript를 웹브라우저가 아닌 서버 용도로도 쓸수있게 되었구나
2. frontend library를 사용하면 대규모 프로젝트에서 DOM 요소들을 쉽게 관리하여 기능 개발에 집중 할 수 있음
3. react는 이벤트 발생 시 가상DOM과 비교하여 변경된 부분 업데이트. 변화를 최소화 시키는게 중요
4. 가상DOM 사용의 장점은 모든 변화를 묶어 한번에 처리 가능

• DOM 재생성시 일어나는 브라우저 workflow 반복을 최소화
• 브라우저 workflow : HTML로 DOM Tree생성 > 노드별 attach()(css처리) - layout(), painting()

5. React에서 DOM 노드 업뎃이 일어날 때
   1) type이 문자열이고 기존과 동일 + props 변경없음 => DOM 변경 X
   2) type이 문자열이고 기존과 동일 + props 변경 => DOM 노드 제거 없이 property만 변경
   3) type이 문자열이고 변경됨 => 모든 자식과 함께 노드 제거 후 갈아끼우기
   4) type이 컴포넌트일 때 => 내부 조사
   5) 요소에 딸린 자식들을 비교할 때 key가 있으면 index 안따지고 필요시 순서만 변경
   6) setState 호출 시 부모는 건들지 않고 자기 자신과 자식들만 다시 렌더링

후기

. 금방 끝날 줄 알았는데, 실제 코드 작성보다 기초 내용들의 복습/환경 셋팅/규칙 만들기 등에 시간이 많이 들었다.
. 돌아가게만 짜는것과 성능/깨끗함 등을 고려하며 짜는게 아주 차이가 크다는 생각이 들었다. 회사에서 이렇게 했어야 하는데 마감이 있는 일은 리소스에 한계가 있어서 쉽지 않은 듯 하다. 미리 연습을 해서 조금 투자해도 좋은 코드가 나올 수 있도록 해야겠지...

참고 / 학습

http://todomvc.com/ - Todo List 참고소스
https://velopert.com/3612 -
https://velopert.com/3236 - react에서 virtualDOM을 쓰는 이유, 브라우저 workflow
https://www.holaxprogramming.com/2018/04/15/react-optimizing-virtual-dom-explained/ - React 최적화 - 가상 DOM
https://velog.io/@velopert/create-typescript-react-component - 타입스크립트 react에서 사용하는 React.FC의 장단점