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

[yujinnieOhh]

https://react-todo-23rd-iota.vercel.app

1. Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?

Virtual-DOM은 실제 브라우저 DOM의 구조를 모방한 가벼운 자바스크립트 객체이다.
상태가 변경될 때마다 실제 DOM을 직접 조작하는 것은 브라우저의 레이아웃 재계산과 리페인트를 반복적으로 유발하여 성능 비용이 크다. 리액트는 상태가 변하면 먼저 메모리상의 Virtual-DOM에 변경 사항을 적용한 뒤 이전 상태의 Virtual-DOM과 비교하며, 실제로 변경된 부분만 파악하여 실제 DOM에 일괄적으로 반영한다.
Virtual-DOM을 사용하면 불필요한 DOM 조작을 최소화해 화면 렌더링 성능을 크게 최적화할 수 있다. 또한, 개발자가 직접 복잡한 DOM 조작 메서드를 다룰 필요 없이 UI 상태를 선언적으로 관리할 수 있어 개발 생산성과 유지보수성이 향상된다.

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

리액트는 부모 컴포넌트가 렌더링되면 자식 컴포넌트도 리렌더링되는 것이 기본 동작이며, 이를 방지하기 위해 캐싱기법을 제공한다.
React.memo(): 컴포넌트 자체를 캐싱한다. 자식 컴포넌트가 전달받는 props가 변경되지 않았다면 해당 컴포넌트의 리렌더링을 건너뛴다.
useMemo(): 연산된 '결과 값'을 캐싱한다. 무거운 계산 로직이 있을 때, 의존성 배열에 등록된 값이 변하지 않는 한 이전 결과값을 그대로 재사용한다.
useCallback(): '함수' 자체를 캐싱한다. 컴포넌트가 렌더링될 때마다 함수가 재생성되는 것을 막아준다. 특히 자식 컴포넌트에 콜백 함수를 props로 넘길 때 함수의 참조값이 바뀌어 자식 컴포넌트가 불필요하게 리렌더링되는 것을 방지하기 위해 주로 사용한다.

3. React 컴포넌트 생명주기에 대해서 설명해주세요.
   컴포넌트의 생명주기는 크게 생성, 업데이트, 제거 3단계로 이루어진다. 현재 표준으로 사용하는 함수형 컴포넌트에서는 주로 useEffect 훅을 활용해 이 생명주기를 관리한다.
   Mount (마운트): 컴포넌트가 브라우저에 처음 나타나는 단계이다. useEffect(() => { ... }, [])와 같이 의존성 배열을 비워두면, 컴포넌트가 처음 렌더링될 때 단 한 번만 로직이 실행되며 보통 초기 데이터 패칭 등에 사용된다.
   Update (업데이트): state나 props가 변경되어 컴포넌트가 다시 렌더링되는 단계이다. useEffect(() => { ... }, [value])처럼 배열에 특정 상태를 넣으면, 해당 값이 변경될 때마다 내부 로직이 재실행된다.
   Unmount (언마운트): 컴포넌트가 화면에서 완전히 사라지는 단계이다. 불필요한 메모리 누수를 막기 위해 useEffect 내에서 return () => { ... } 형태의 클린업(Cleanup) 함수를 작성하여, 설정해둔 타이머를 끄거나 이벤트 리스너를 해제하는 작업을 수행한다.