[코드잇 스프린트] 7주차 위클리 페이퍼

1. 리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요.

리액트에서 배열을 렌더링할 때 key를 지정해야 하는 이유는 두 가지가 있다.

 

1. 성능 최적화를 위해

2. 어떤 항목을 변경, 추가 또는 삭제했는지 식별하기 위해

 

하나씩 살펴보자.

 

1. 성능 최적화를 위해

배열의 각 항목을 렌더링할 때 리액트는 Virtual DOM을 사용하여 실제 DOM 업데이트를 최소화한다.

이때 리액트는 각 요소의 key를 비교하여 변경된 부분을 파악하는데, key가 없으면 리액트는 각 요소를 변경된 부분으로 인식하지 않고, 전체를 다시 렌더링 하게 되므로 성능에 부담을 줄 수 있다.

 

2. 어떤 항목을 변경, 추가 또는 삭제했는지 식별하기 위해

요소마다 key로 고유한 값을 지정해주어야 요소를 삭제, 추가하는 등 배열이 변경될 때 정확히 어떤 요소가 변화한 것인지 알 수 있다. 

 

주의할 점은 key는 고유해야 하기 때문에, key에  배열 인덱스 사용을 지양해야 한다. 
 
리액트에서는 props가 변경되면 컴포넌트를 재렌더링 한다. 
배열에서 list 요소를 추가, 삭제하면 재렌더링 되는데, index를 key prop으로 지정하게 되면 list 요소가 추가, 삭제가 이뤄질 때 인덱스가 변경되어 list의 모든 형제 컴포넌트가 재렌더링 될 수 있기 때문에 성능 저하가 일어날 수 있다. 

 

 

2. 리액트 생명주기(life cycle)에 대해 설명해 주세요.

생명주기란 앱이 실행되고 종료되는 과정을 특정 시점 별로 나눠둔 것을 말한다.

 

모든 React 컴포넌트는 라이프 사이클 이벤트가 있는데, 라이프 사이클 이벤트는 컴포넌트가 수행한 작업이나 앞으로 수행할 작업에 따라 특정 시점에 실행된다.

 

라이프 사이클 이벤트는 크게 세 가지로 구성되어 있다.

 

1) 마운팅(mounting) 이벤트

• React 엘리먼트(컴포넌트 클래스의 인스턴스)를 DOM 노드에 추가할 때 발생하며, 한 번만 실행된다.

2) 갱신(updating) 이벤트

• 속성이나 상태가 변경되어 React 엘리먼트를 업데이트할 때 발생하며, 여러 번 실행된다.

3) 언마운팅(unmounting) 이벤트

• React 엘리먼트를 DOM에서 제거할 때 발생하며, 한 번만 실행된다.

생명주기는 클래스형 컴포넌트에서만 사용할 수 있고, 함수형 컴포넌트에서는 사용할 수 없다. 

 

클래스형 컴포넌트의 라이프사이클 메서드로 사용되었던 constructor(), render(), ComponenDidMount(), componentDidUpdate(), componentWillUnmount()는 함수형 컴포넌트에서 아래와 같이 사용하고 있다.

 

분류	클래스형 컴포넌트	함수형 컴포넌트
Mounting	constructor()	함수형 컴포넌트 내부
Mounting	render()	return()
Mounting	ComponenDidMount()	useEffect()
Updating	componentDidUpdate()	useEffect()
UnMounting	componentWillUnmount()	useEffect()

 

생명주기 순서를 요약하면 다음과 같다.

1. 컴포넌트 호출 후 로드

2. 컴포넌트 내부 함수 수행 
- 데이터의 초기화 수행

3. return() 함수 실행

- 화면 렌더링 수행

4. useEffect() 실행

[조건부 수행]
5-1. useEffect() 실행 
- 컴포넌트의 '변화'가 발생하는 경우 수행

5-2. useEffect() 실행 
- 컴포넌트의 '소멸'이 발생하는 경우 수행