[React] - [처음 만난 리액트] - 19. State and Lifecycle, 클래스 컴포넌트 예제 ((실습) state 사용하기)

🧹 두서없이 적는 쉬운 정리

1. State는 리액트 컴포넌트의 변경 가능한 데이터.

2. Class 컴포넌트의 생성자에서는 추후 사용할 데이터를 state에 넣어서 초기화한다.

3. state를 업데이트하기 위해 setState() 함수를 사용.

4. 클래스 컴포넌트에서 컴포넌트의 생명, 인생, 죽음을 의미하는 함수를 사용할 수 있다.
(componentDidMount(), componentDidUpdate(), componentWillUnmount()

5. map() 함수를 사용시 엘리먼트를 구분하기 위하여 key 값을 필수적 넣어야 한다.

 

 

(자세한 내용은 아래 참고)

 

 

---

 

 

😊 실습 시작

클래스 컴포넌트로 스테이트 와 생명주기 함수를 직접 사용해 보도록 하자

 

 

🧑🏻‍💻 Notification 컴포넌트 생성

Notification 리액트 클래스 컴포넌트를 하나를 생성한다.

Notification 컴포넌트 속에 state 외에 아무런 데이터도 가지고 있지 않다.

 

🧑🏻‍💻 NotificationList 컴포넌트 작성

동일한 폴더 속에 Notification를 목록으로 보여주는 NotificationList 컴포넌트 생성

 

state를 선언하고 사용하는 부분을 보면

처음 생성자에서 notifications []라는 이름의 빈 배열을 state에 넣었다.

 

이처럼 생성자에서는 추후 사용할 데이터를 state에 넣어서 초기화한다.

 

또한 생명주기 함수 중 하나인 componentDidMount() 함수에서는

자바스크립트의 setInterval() 함수를 사용하여 1초마다 정해진 작업을 수행.

 

이 작업은 미리 만들어둔 알림 데이터 배열인 reservedNotifications로부터

알림 데이터를 하나씩 가져와서 state에 있는 notifications 배열에 넣고 업데이트하는 것.

 

(주목) state를 업데이트하기 위해 setState() 함수를 사용.

 

 

📺 실행

js 파일을 수정 후 실행

 

 

처음에는 화면에 아무것도 보이지 않다가

매초 알림이 하나씩 추가되는 것을 확인

 

 

 

개발자 도구에 여러 엘리먼츠 탭에 매초 엘리먼트가 하나씩 생기는 것을 확인할 수도 있다

 

 

🧑🏻‍💻 클래스 컴포넌트 생명주기 함수 사용

Notification 컴포넌트의 박 생명주기 함수들을 사용해 보자

3가지 의 생명주기 함수들이 호출될 경우 콘솔의 로그를 남기도록 코드를 작성.

이 함수들은 컴포넌트가 마운트 된 이후, 컴포넌트가 업데이트된 이후

컴포넌트가 원마운트 되기 전에 호출될 함수들이다.

(componentDidMount(), componentDidUpdate(), componentWillUnmount())

 

이후 크롬 개발자 도구에서 콘솔 탭을 확인해 보면 방금 작성한 로그들을 볼 수 있다

하지만 이렇게 하면 로그가 중복되어 구분이 힘들다.

 

 

로그의 id 가 함께 나오게 하기 위해 각 알림 객체에 id를 넣는다

그리고 Notification 컴포넌트의 전달할 props에 key와 id 추가한다.

여기서 key는 엘리먼트를 구분하기 위한 고유의 값이니

map() 함수를 사용할 때에는 필수적으로 들어가야 한다

 

그렇지 않으면 경고 메시지가 출력된다.

 

Notification 컴포넌트의 로그를 id와 함께 출력하도록 수정

문장을 묶을 때 그냥 따옴표가 아닌 역 따옴표를 사용한 것에 유의.

( $를 사용할 때는 역 따옴표를 사용해야 한다.)

 

수정한 이후 브라우저에서 콘솔로 그를 다시 확인해 보면

이 화면과 같이 순서대로 로그가 나오는 것을 볼 수 있다.

컴포넌트가 마운트 될 때와 업데이트될 때 로그가 출력되고 있다.

그런데 우리가 사용한 3가지 생명주기 함수 중 componentWillUnmount() 로그가 보이지 않는다

 

그 이유는 모든 컴포넌트가 Mount(출생)는 되었지만  Unmount(죽음) 되지 않았기 때문

Unmount 로그를 보기 위해 알림 추가가 모두 끝나면 배열을 비우도록 수정한다.

수정한 다음에 다시 브라우저에서 콘솔 로그를 확인.

 

먼저 이 화면처럼 Mount(), Update() 순으로 로그가 나오고

이후에 모든 컴포넌트에 대한 Unmount() 로그가 나오는 것을 볼 수 있다.

 

 

 

---

 

 

🕵🏻 마무리

이번 강의에서는 리액트에 State와 생명주기에 대해서 배웠다

그리고 실습을 통해서 실제로 컴포넌트의 State와

클래스 컴포넌트의 생명주기 함수()들도 사용해 보았다

 

State는 컴포넌트 Props와 함께 리액트에서 가장 중요한 개념 중 하나이기 때문에 꼭 완벽하게 이해하자

 

생명주기 함수는 현재 거의 사용하지 않는 클래스 컴포넌트의 기능이기 때문에 꼭 알고 있을 필요는 없지만

리액트 컴포넌트가 생성되어 Mount 되고 Update를 거쳐 Unmount 되기까지의 흐름은

여전히 중요한 부분이니 확실히 이해하고 넘어가자

 

 

 

 

 

 

위 내용은 '소플' 님의 '처음 만난 리액트' 영상을 참고하여 작성되었습니다.