[2주차] 권오진 과제 제출합니다.

[KOJ50]

느낌점: 저번주 과제와는 다르게 React와 Tailwind CSS는 처음 다뤄보기 때문에 시작부터 어려웠습니다. HTML / CSS / JS는 각각 파일을 구성하고 시작하는 것에 비해 React는 CLI를 통해 Vite와 결합된 파일을 만들어야 했습니다. 그리고 내부의 파일 구성 또한, 이전과는 다른 형태인 점에서도 난관을 겪었습니다. 일주일이 생각보다 짧아 React와 Tailwind CSS를 공부하기에 시간이 부족하여 다크 모드 등 일부 기능들을 이전 과제와 100% 동일하게 구현하지 못한 점이 아쉬웠습니다.
이전 과제 기능 중 input를 한국어로 받을 때 중복으로 입력되었던 부분은 isComposing을 이용하여 입력 중 일 때는 입력을 받지 않고, 입력이 끝났을 때 등록되도록 리팩토링 했으며, 날짜 변경에서 일부 코드가 동일한 부분은 인자를 받도록 수정하였습니다.
또한, 지난 과제에서 Vercel를 통한 배포가 되지 않아 Github에서 배포를 진행하였습니다. 그러나 Github를 통해서 이후 대규모 과제에서 배포가 어려울 것이라는 조언을 통해 Vercel를 통해 배포를 진행하려고 했습니다. 배포 처음에는 Branch가 master로 설정되어 변경해도 이동하지 않아 여러 방법을 시도했습니다. 실제 파일 변경이 없더라도 새로운 커밋을 강제로 생성하여 연결된 Vercel 프로젝트의 자동배포 트리거로 사용하기 위해 새로운 커밋을 집어넣은 것이 효과가 있었으며, 정상적으로 배포를 마무리하였습니다.

초기 구성:

1. 현재 날짜를 나타내고 버튼에 따라 날짜 변경 기능
2. 입력을 하고 등록 버튼을 통해 리스트 작성
3. 날짜별로 등록된 리스트 노출
4. Tailwind CSS를 통해 디자인

---

배포링크

---

Review Questions
1) Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
Virtual DOM : UI 효율성을 극대화하기 위해 DOM의 가벼운 복사본을 메모리 상에서 유지 관리하는 기술

• 실제 HTML DOM의 복사본이며 복사본은 JS 객체 형태로 메모리에 저장
• 브라우저에 있는 Document에 직접 접근할 수 없어 직접 화면을 수정하는게 불가능함
  작동 방식 :

1. Virtual DOM 생성 : React 컴포넌트가 렌더링되면 가상 DOM트리 생성
2. 변경사항 감지 : 상태 변경 시, 새로운 가상 DOM을 생성하고 이전 가상 DOM과 비교(= diffing)
3. 최소한의 업데이트 계산 : 비교 결과를 바탕으로 실제 DOM에서 변경이 필요한 부분만 추적하고 업데이트(= patching)
4. 실제 DOM 업데이트 : 변경된 부분만 실제 DOM에 적용하여 화면을 재구성

2) React.memo(), useMemo(), useCallback() 함수로 진행할 수 있는 리액트 렌더링 최적화에 대해 설명해주세요. 다른 방식이 있다면 이에 대한 소개도 좋습니다.
React.memo()

• 컴포넌트가 React.memo()로 래핑 될 때, React는 컴포넌트를 렌더링하고 결과를 Memoizing함. 그 다음 렌더링이 일어날 때 props가 같다면 Memoizing된 내용을 재사용함.
• React.memo() 는 함수형 컴퍼넌트에 적용되어 같은 props에 같은 렌더링 결과를 제공함. 따라서 같은 props로 자주 렌더링 될 때 해당 함수로 래핑하는 것이 좋음.

useMemo()

• React에서 컴포넌트의 성능을 최적화하는데 사용되는 Hook
• 함수의 결과를 메모이제이션하여 비용이 많이 드는 계산을 최적화
• useMemo는 함수의 결과 값을 메모함
• 렌더링 과정에서 마지막 렌더링에서 저장된 값을 반환하거나( 종속성이 변경되지 않은 경우), calculateValue를 다시 호출하고 반환된 값을 저장

const memo = useMemo(calculateValue, dependancies);
// calculateValue = 캐시하려는 값을 계산하는 함수
// dependancies = calculateValue에서 참조된 모든 값의 목록

useCallback()

• 콜백 함수를 메모이제이션하고 재사용할 수 있도록 하는 Hook
• 주로 부모 컴포넌트부터 자식 컴포넌트로 전달되는 콜백 함수를 최적화 함
• 이벤트 핸들러 함수가 자주 재생성되는 경우 : useCallback을 사용하면 함수가 처음 생성될 때 한 번만 생성, 나중에는 동일한 함수 인스턴스를 재사용
• 하위 컴포넌트에 props로 전달되는 함수가 자주 재생성되는 경우 : props로 함수를 전달할 때 함수를 재사용하여 하위 컴포넌트의 재랜더링 방지

3) React 컴포넌트 생명주기에 대해서 설명해주세요.
생명주기 : 컴포넌트가 생성되고 사용되고 소멸될 때까지 일련의 과정
라이프 사이클 이벤트 : 생명주기 안에서 특정 시점에 자동으로 호출되는 메서드
라이프 사이클 이벤트 분류

• 마운팅 이벤트 : React element를 DOM 노드에 추가할 때 발생, 한번만 실행
• 갱신 이벤트 : 속성이나 상태가 변경되어 React element를 업데이트할 때 발생, 여러 번 실행
• 언마운팅 이벤트 : React element를 DOM에서 제거할 때 발생, 한번만 실행