[생활코딩! React 리액트 프로그래밍]
지난 글을 통해 컴포넌트를 마스터 했습니다. 그동안 고생했다는 의미에서
선물을 하나 드리려고 합니다.
뭔가를 공부할때 제가 굉장히 중요하게 생각하는 요소가 몇가지 있습니다.
이런 요소를 챙길수 있다면 해당 주제를 마스터 한 것이라고 생각합니다.
첫 번째는 우리가 알고자 하는 것에 대한 특성을 누군가가 잘 정리정돈한 설명서를
볼 줄 아는 것 입니다. 이책의 주제와 관련해서는 reactjs.org가 그것입니다.
이를 스펙이라고도 하고, 이를 나타내는 표현은 다양합니다.
문제는 이러한 사용설명서는 너무 장황하거나 너무 빈약할 수 있다는 점 입니다.
그럴 때 필요한 내용을 찾을 수 없는 상황이 생깁니다. 이 경우 우리는
과학자가 되어야 합니다. 여러 가설을 세우고 여러가지 도구를 이용해
그러한 가설을 확인하고 결론을 내리는 과정을 통해 우리가 스펙만으로 알 수 없는
사항을 스스로 알아내는 능력이 필요합니다.
어떤 주제를 학습하기 위한 가장 중요한 도구는 이 두가지 입니다.
- 설명서를 볼 줄 아는것
- 현재 상태를 측정하고 분석 하는 것
이 두가지가 핵심입니다. 그런데 이 두가지 만으로 공부를 해나가기에는 너무 많은
시간이 걸리고 약간 특별한 능력이 필요합니다. 가장 중요한 능력은 인내심 입니다.
저는 이를 촉진할 수 있는 굉장히 중요한 촉매는 질문하는 것과 검색하는 것 이라고
생각합니다.
정보기술이 고도로 발전하면서 이 두가지가 엄청나게 중요한 세상이 됐습니다. 저는
이것들을 스스로 할 수 있게 되면 스스로 학습할 수 있다고 생각합니다.
그러면 현재 상태를 알아낼 수 있는 도구를 선물로 드리겠습니다.
https://chrome.google.com/webstore
그러고나서 좌측 상단의 검색 창에서 'React Developer Tools'를 검색해서 들어가보면확장 프로그램을 크롬 브라우저에 추가할 수 있는 화면이 나타납니다.
여기서 [chrome에 추가]버튼을 눌러 확장 프로그램을 설치합니다.확장 프로그램을 설치한 다음, 브라우저를 완전히 닫았다가 다시 열면 더 안전하게실습할 수 있습니다. 확장 프로그램을 설치하면 크롬 브라우저의우측 상단에 아이콘이 추가 됩니다.
크롬 개발자 도구를 실행한 다음 [Elements] 탭을 보면 앞에서 구현한 Subject 컴포넌트인 <header>이하 부분을 볼수 있습니다. 그런데 크롬 개발자 도구에 나타나는 태그들은 실제 브라우저가이해하는 태그이고 우리가 작성한 자바스크립트 코드 자체는 나타나지 않습니다.
개발을 하는 도중에 경우에 따라서는 실제 물리적을 태그가 아니라 리액트상에서의컴포넌트를 보고 싶을 때가 있습니다. 이러한 경우에 사용할 수 있는[Components]라는 탭이 앞에서 설치한 확장 프로그램에 의해 개발자 도구에추가 되어 있습니다.
실제 태그를 보고 싶을 때는 [Elements] 탭을 쓰면 되지만, 리액트 코드를 분석할 때는[Components] 탭을 쓰면 이렇게 컴포넌트들을 볼 수 있습니다.예를 들어 Subject 컴포넌트를 클릭해서 보면 우측에 컴포넌트의 props를 볼 수 있고각 값이 무엇인지도 볼 수 있습니다. 또한 원한다면 이 값을 변경해 볼 수도 있습니다.값을 변경하면 그 내용이 바로 반영되어 브라우저에 표시 됩니다.