[React] key Props를 사용하는 이유 & 리액트 생명주기

Q. 질문 1

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

 (코드잇 스프린트 위클리 페이퍼 #7)

 

A. key props

React 에서 map 을 사용하여 배열을 렌더링 할 때엔 key 를 써야 한다.

{options.map((option) => (
  <div key={option.label}>
	<MenuItem className="dropdown">{option.label}</MenuItem>
  </div>
))}

 

만약 key 를 쓰지 않을 경우 아래처럼 콘솔창에 key 가 있어야 된다고 경고가 뜬다.

key 없으면 경고

그렇다면 왜 key 를 써야할까?

 

엘리먼트에 안정적인 고유성을 부여

각 엘리먼트는 key 값을 통해 어떤 항목을 변경, 추가, 삭제할지 식별해준다.

그래서 엘리먼트의 고유성을 부여하기 위해서는 key 를 지정해야 한다.

 

그래서 key 값으로 식별을 하여 해당 엘리먼트에 안정적인 고유성을 부여해 렌더링을 효과적으로 해준다.

 

key 사용방법

key 값은 식별을 해줘야 하는 고유한 값이기 때문에 중복되어선 안된다.

 

그리고 map 메서드를 사용하면 매개변수로 index 도 사용할 수 있는데 key 값으로 index 값을 사용하는 것은 바람직하지 않다.

왜냐하면 데이터가 추가, 삭제 될 경우 index 가 바뀌기 때문에 권장하지 않는다.

 

Q. 질문 2

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

 (코드잇 스프린트 위클리 페이퍼 #7)

 

A. React 생명주기 - 클래스형

React 는 생명주기를 갖는다.

 

생명주기
컴포넌트가 생성되고 사용되어 소멸될 때까지의 과정

클래스형 React의 생명주기는 크게 마운트, 업데이트, 언마운트가 있다.

 

✨ 마운트 Mount

컴포넌트가 처음으로 실행되어 생성되는 단계이다.

 

1. constructor()

렌더링 되기 이전에 데이터를 바인딩하고, 초기화 한다.

 

2. render()

컴포넌트를 화면상에 렌더링 해준다.

 

3. componentDidmount()

화면이 렌더링 된 후이며, DOM 에 접근할 수 있게 되며

네트워크 요청과 같은 비동기 요청을 할 수 있게 된다.

 

✨ 업데이트 Update

컴포넌트의 상태가 변경되는 단계이다.

 

1. componentDidUpdate

컴포넌트 내에서 변화가 발생한 이후 호출되는 메서드이다.

 

 

✨ 언마운트 Unmount

컴포넌트가 화면에서 제거되는 단계이다.

 

1. componentWillUnmount()

컴포넌트가 DOM 에서 제거되기 직전에 호출되는 메서드이다.

 

이 밖에 다양한 메서드들이 존재한다.

 

A. React 생명주기 - 함수형

하지만 요즘은 클래스형 대신 함수형 React 를 사용하며

 

constructor() 는 함수형 컴포넌트 내부, render() 는 return() 으로

componentDidmount(), componentDidUpdate(), componentWillUnmount() 는 useEffect() 로 간편하게 사용된다. 

 

즉 함수형에서는 다음과 같은 생명주기를 가진다.

 

함수형 생명주기

1. 컴포넌트 내부 함수 수행

- 데이터 초기화

2. return() 실행

- 화면 렌더링

3. useEffect() 실행

- 렌더링 이후 실행

4. useEffect() 실행 

- 컴포넌트 내부의 값이 업데이트 될 때 실행

5. useEffect() 실행 
- 컴포넌트가 화면에서 사라질 때 실행