<목차>
- 리액트의 가상 돔
- useEffect의 실행 순서
- 리스트 렌더링에서 key 존재의 이유
1. 리액트의 가상 돔
- Virtual DOM
- 애플리케이션의 성능을 향상
- 모든 UI를 다시 그리는 것이 아니라 변경된 부분만 실제 DOM과 비교하여 필요한 최소한의 변경만을 실제 DOM에 반영하기 때문에 불필요한 DOM 조작을 줄이고 성능을 향상
- 여러 변경 사항을 한꺼번에 수집하고 실제 DOM에 적용하기 전에 변경 사항을 배치 처리함으로 레이아웃 충돌과 같은 비효율적인 처리를 최소화하며 페이지의 리렌더링을 효과적으로 관리
- 안정성 향상
- 개발자가 DOM을 직접 조작하지 않기 때문에 코드가 더 간단하고 예측이 가능하다. 버그 발생 가능성을 줄인다.
- 사용자 경험 개선
- UI 일관성 유지
- 데이터의 일관성과 신뢰성을 유지하는데 도움
- 복잡한 인터페이즈와 동적인 상호 작용이 많은 애플리케이션 개발에 유용
가상 돔이란?
- DOM의 경향화 된 복사본
- 컴포넌트의 상태가 변경될 때마다 전체 UI를 리렌더링 하는 대신 필요한 최소한의 변경만을 실제 DOM에 적용
Q. 리액트에서 가상 돔을 사용하는 이유에 대해 설명해주세요.
2. useEffect의 실행 순서
- 초기 렌더링 또는 리렌더링 발생
- 처음 마운트 될 때 해당 컴포넌트 렌더링
- 컴포넌트의 상태나 속성의 변경으로 인해 컴포넌트가 리렌더링된다.
- 화면 업데이트
- 렌더링 함수가 JSX를 반환 -> React는 이를 기반으로 가상 DOM 업데이트
- 변경 사항이 결정되면 React는 실제 DOM을 최신 상태로 업데이트 = 사용자 인터페이스 갱신
- useEffect 실행
- 모든 DOM 업데이트가 완료되고 화면이 갱신된 후 useEffect 내부 코드 실행
- 모든 렌더링이 완료된 후
- DOM 조작이나 데이터 fetchin과 같은 추가적인 사이드 이펙트를 안전하게 수행할 수 있음
- 클린업 함수
- 의존성 배열을 갖고 이 배열 내의 값들 중 하나라도 변경되면 useEffect의 실행 전에 클린업 함수 호출
- 주로 리스너 해제, 타이머 취소 등 리소스 정리 작업
- 컴포넌트가 언마운트될 때도 클린업 합수가 호출되어 마지막 정리 수행
- 의존성 배열의 영향
- 선택적으로 의존성 배열에 의해 조건부로 제어
- 의존성 배열에 지정된 변수들 중 하나라도 변경되면, 해당 useEffect는 다시 실행
- 배열이 존재하나 비어있으면 컴포넌트가 마운트 될때 한번만 실행되고 컴포넌트가 언마운트될 때만 클린업 함수가 실행된다. 이는 클래스 컴포넌트의
componentDidMount와componentWillUnmount라이프사이클 메서드와 유사한 행동
Q. useEffect의 실행 순서를 컴포넌트 라이프 사이클에 관련지어 설명해주세요.
3. 리스트 렌더링에서 key 존재의 이유
- 리스트를 렌더링할 때
key는 각 요소를 구별하는 식별자 역할 - 리액트가 렌더링할 요소들의 변화를 효율적으로 감지하고 처리하는데 도움
- 성능 최적화
- 리스트의 요소가 업데이트되거나 재배치될 때, 리액트에게 어떤 요소가 변경, 추가 또는 제거되었는지를 빠르게 알아차리게 해주는 역할
- 유니크하고 일관된 값 덕분에 DOM의 각 노드를 일일이 비교하며 업데이트하지 않아도 됨 => 속도 향상, 불필요한 렌더링을 제외시킴
- 안정적인 상태 유지
- 키가 없거나 잘못되면 리액트가 요소를 정확하게 식별하지 못해 예상치 못하게 전파될 수 있음
key값이 유니크해야하는 이유
- 각 요소의 정체성 유지
- 오류 방지
- 같은 값이라면 리액트는 이를 같은 요소로 간주할 수 있음 => 예상치 못한 렌더링 오류나 상태관리 문제 야기
- 인덱스를 사용해도 주의 필요. 순서가 변경되더라도 리액트가 요소의 정체성을 잘못 판단하게 만들 수 있기 때문
Q. 리액트의 리스트 렌더링에서 key는 왜 넣어줄까요? 그리고 key 값이 유니크해야 하는 이유는 뭘까요?
정리정돈을 잘하는 개발자가 꿈