Chapter03. 리엑트 디버깅

<< 학습 목표 >>

1. 리엑트 디버깅 툴을 설치할 수 있다.

2. XX

---

내가 만든 프로그램이 항상 내가 의도한대로만 동작하면 너무 좋겠지만 대부분은 내가 의도한대로 동작하지 않음

그래서 어디에 문제가 있는지 찾는 과정을 디버깅(debugging)이라고 함

 

디버깅을 하는 고전적이면서 기본적인 방법은 코드 사이 사이에 분기점을 출력하는 것임

Chapter02에서 마지막에 실습했던 주소록 컴포넌트에 분기점을 출력하는 코드를 넣어보자

( 실제 입력하지는 말고 보기만 하기 )

 

위와 같이 console.log 를 사용해 파악하고 싶은 분기점 마다 출력문을 넣어 두면 어디서 문제가 생기는지 파악할 수 있음

소스코드가 간단할 때는 이와 같이 출력문으로 디버깅을 할 수 있지만 일반적인 상황에서는 소스코드가 간단하지 않으므로 출력문으로 디버깅하는데는 한계가 있음

 

보통 개발툴에서는 디버깅툴까지 제공하지만 vs code는 별도로 디버깅툴을 제공하지 않음

vs code에 디버깅툴을 설치할 수도 있지만 우리는 웹 브라우저에 리엑트 디버깅툴을 설치하자

---

Edge(엣지) 브라우저를 사용할 경우 리엑트 디버깅 툴이 자동으로 설치되지만 어떤 상황에 의해서 설치가 안됬거나 다른 브라우저를 사용해서 설치가 안된 경우가 있으므로 리엑트 디버깅 툴을 설치하는 방법을 알아보자

리엑트 디버깅 툴을 설치하는 방법은 엣지, 크롬 브라우저만 설명함

혹시 다른 브라우저를 사용하는 사람은 두 브라우저 중 하나를 설치하자

 

<< 엣지 브라우저에 리엑트 디버깅 툴 설치 >>

---

브라우저 오른쪽 상단에 ... 메뉴(1) 클릭 -> 확장(2) -> [ Mircrosft Edge 추가 기능 웹 사이트 열기 ] (3) 클릭

만약 이미 다른 확장 프로그램이 설치되 있어 아래의 3번과 다른 메뉴라면 [ Mircrosoft Edge 추가 기능 열기 ] (4) 클릭

 

추가 기능 사이트 내 [ react developer tools ] 검색(1) -> 리엑트 디버깅 툴 [ 다운로드 ] (2) -> [ 확장 추가 ] (3)

---

 

<< 크롬 브라우저에 리엑트 디버깅툴 설치 >>

---

브라우저 오른쪽 상단에 ... 메뉴(1) 클릭 -> 도구 더보기(2) -> 확장 프로그램(3)

 

왼쪽 상단에 메뉴 버튼(1) 클릭 -> 메뉴 내 하단에 [ Chrome 웹 스토어 열기 ] (2)

 

chrome 웹 스토어 페이지 내 [ react developer tools ] 검색(1) -> 리엑트 디버깅툴(2) 클릭 -> 

 

리엑트 디버깅툴 chrome에 추가(1) -> 확장 프로그램 추가(2)

---

---

이제 엣지나 크롬을 닫고 Chapter02 에서 만든 주소록 컴포넌트를 웹 페이지에 출력하자

( 만약 특정 컴포넌트를 출력하자 라는 말이 기억나지 않으면 https://codingaja.tistory.com/75 전 글 다시 보고 오기 )

 

웹 페이지 내에서 F12 를 눌러 개발자 모드를 열어보자

개발자 모드를 보면 이제 Components(1), Profiler(2) 탭이 보임

이 탭은 리엑트 웹 페이지에서만 보이는 것

 

개발자 모드를 연 상태에서 F5 키를 눌러 페이지를 새로고침 하자

이제 Components 탭에 다음과 같이 페이지를 구성하고 있는 컴포넌트들이 보임

 

이제 이를 통해서 문제가 생겼을 때 상태를 확인할 수 있음

---

디버깅 얘기가 나온 김에 마지막으로 Chapter02 에서 만들었던 주소록 컴포넌트에서 발생하는 문제를 해결하고 마무리 하자

 

Components 탭은 현재 페이지를 구성하고 있는 컴포넌트들을 확인할 수 있는 탭임

그외에 다른 문제들은 Console 탭(1)에서 확인할 수 있음

 

Console탭을 보면 지금 다음과 같이 빨간색 글씨로 출력된 문장이 있는데 Warning 으로 시작하므로 경고 메세지임

심각한 오류는 아니므로 현재 페이지가 제대로 보이지만 경고 메세지도 뜨지 않게 해주는게 좋음

 

이 경고 메세지는 map을 사용할 때 태그를 반환한다면 그 태그에 key 를 넣어줘야한다는 것임

 

이 경고 메세지를 따라 AddressList 컴포넌트 코드로 가서 다음과 같이 key를 추가하자

 

키를 추가해야하는 이유는 리엑트가 컴포넌트를 빠르게 랜더링하기 위해 필요한 요소임