State, 생명주기 함수 사용하기 실습 [처음 만난 리액트 #21]
6강. State and Lifecycle
State 사용하기 실습
1. VS Code로 create-react-app으로 만든 프로젝트 열기
2. chapter_06이라는 이름으로 폴더 생성
3. 만든 폴더에 Notification.jsx라는 이름의 파일을 새로 만들고, Notification이라는 이름의 리액트 클래스 컴포넌트를 만듦
표시된 constructor 부분을 보면 Notification 컴포넌트가 state에 아무런 데이터도 가지고 있지 않다는 것을 알 수 있음
4. 동일한 폴더에 NotificationList.jsx라는 이름으로 새로운 파일을 만들고, 코드를 작성
NotificationList 컴포넌트는 Notification 컴포넌트를 목록 형태로 보여주기 위한 컴포넌트
생성자에서 notifications라는 이름의 빈 배열을 state를 넣음
-> 생성자에서는 앞으로 사용할 데이터를 state에 넣어서 초기화
클래스 컴포넌트의 생명주기함수 중 하나인 componentDidMount() 함수에서는 자바스크립트의 setInterval() 함수를 사용하여 1000ms(1초)마다 정해진 작업을 수행
- 미리 만들어둔 알림 데이터 배열인 reservedNotifications로부터 알림 데이터를 하나씩 가져와서 state에 있는 notifications 배열에 넣고 업데이트
**
this.setState({
notifications: notifications,
});
▲ state를 업데이트 하기위해 setState 함수를 이용하고 있음
클래스 컴포넌트에서 state를 업데이트하려면 반드시 setState 함수를 사용해야 함!
5. 새로 만든 NotificationList 컴포넌트를 실제 화면에 렌더링하기 위해 index.js 파일 수정
NotificationList 컴포넌트를 import해서 ReactDOM.render 함수에 넣어주는 코드
6. 리액트 애플리케이션을 실행
VS Code의 상단 메뉴에서 Terminal > New Terminal 을 눌러 새로운 터미널을 실행시키고,
npm start 명령을 실행
처음에는 화면에 아무것도 안보이다가 매초 알림이 하나씩 추가되는 것을 확인할 수 있음
크롬 개발자 도구를 열어 elements 탭을 보면, 매 초 element가 하나씩 생기는 것을 확인할 수 있음
React Developer Tools 사용하기 실습
리액트 애플리케이션을 개발할 때에는 크롬 개발자도구의 elements 탭을 확인하는 것 보다, 리액트를 위해 별도로 개발된 React Developer Tools라는 도구를 이용하는 것이 더 좋음
구글에 React Developer Tools 검색 결과로 가장 상단에 나오는 링크를 클릭
React Developer Tools
Adds React debugging tools to the Chrome Developer Tools. Created from revision 47f63dc54 on 12/6/2022.
chrome.google.com
크롬에 추가 버튼을 눌러 React Developer Tools를 설치
설치가 완료되면, 기존에 우리가 보던 크롬 개발자 도구에 리액트 아이콘 모양으로 components와 profiler라는 새로운 앱이 생김
● components 탭을 눌러보면, 현재 화면에 존재하는 컴포넌트가 트리 형태로 보임
각 컴포넌트 별로 props와 state도 확인할 수 있음
- NotificationList 컴포넌트의 state에는 총 세 개의 알림 객체가 들어있음
● profiler 탭에서는 컴포넌트들이 렌더링되는 과정을 기록하여 각 단계별로 살펴볼 수 있음
이 기능을 이용하면 어떤 컴포넌트가 렌더링되었는지, 렌더링 시간이 얼마나 소요되었는지, 컴포넌트가 왜 다시 렌더링되는지 등을 확인할 수 있음
-> 이를 통해 불필요하게 렌더링되거나, 무거운 컴포넌트를 찾아서 최적화함으로써 리액트 애플리케이션의 성능을 향상시킬 수 있음
Lifecycle method 사용해보기 실습
세 가지의 생명주기함수들이 호출될 경우 콘솔에 로그를 남기도록 코드를 작성
이 함수들은 각각 컴포넌트가 Mount된 이후, 컴포넌트가 Update된 이후, 컴포넌트가 Unmount 되기 전에 호출됨
이후 크롬 개발자 도구에서 Console 탭을 확인하면, 방금 작성한 로그들을 볼 수 있음
로그가 중복되어 구분이 힘드므로 로그에 id가 함께 나오도록 하기 위해 각 알림 객체에 id를 넣어줌
Notification 컴포넌트에 전달할 props에 key와 id를 추가
- key: React element를 구분하기 위한 고유의 값
map 함수를 이용할 때에는 필수적으로 들어가야 함 (들어가지 않으면 경고 메세지를 출력)
Notification 컴포넌트의 log를 id와 함께 출력하도록 화면과 같이 수정
* 문장을 묶을 때 그냥 따옴표가 아닌 역따옴표(`)를 사용한 것에 유의
수정한 이후 브라우저에서 Console 로그를 다시 확인해보면 순서대로 로그가 나오는 것을 볼 수 있음
컴포넌트가 Mount 될 때와 Update 될 때의 로그가 출력
Unmount 로그를 보기 위해 NotificationList 컴포넌트에서 매 초 알림을 추가하는 부분에 알림 추가가 모두 끝나면 notifications를 비우도록 수정
수정한 이후 브라우저에서 Console 로그를 다시 확인해보면,
Mount, Update 로그가 순서대로 나오고
그 이후 모든 컴포넌트에 대해 Unmount 로그가 나옴