YoonStudyNote

우선 이러한 클래스들이 만약 하나의 js파일에 천개 만개 이상이 들어간다고 상상해봅시다. 매우 복잡해 질 것입니다. 그래서 할 작업은, 각각의 컴포넌트들을 분해해서 작성해 보는겁니다. 1. SRC폴더 안에 components 폴더를 만드는 것입니다. TOC.js파일을 만들고 기존에 App.js파일 안에있는 TOC 소스코드를 긁어옵니다. 그런데 문제가 발생할겁니다. 다음의 문제인데요, 컴파일이 되지않는겁니다. 이것을 해결하기위해서는 import해야할 것이 있습니다. 이뜻은 Componenet라는것을 로딩하는 코드가 없다는 뜻입니다. 2. 파일안에 import해줍니다. 그럼 이뜻은 react라는 라이브러리에서 Component라는 클래스를 로딩한것입니다. Component 단어 앞에 React라는 단어는 꼭..

구글에서 검색후 React Developer Tools를 다운받습니다. 그리고 새로운창을 띄워서 F12를 누르고 옆에 가면 React 로고와 함께 Component가 있습니다. 이곳에 보면 실제 react 소스코드의 모습을 확인 할 수 있습니다. 또한 내용도 수정할 수 있게 됩니다.

다음과 같이 Subject를 두번입력하면 그냥 똑같은것이 두번출력됩니다. 이부분에 대해서 react는 아쉽게 생각하게 됩니다. 이것을 해결하기위해서 props를 이용하게 됩니다. 하단 링크에서 참고하세요! ko.reactjs.org/docs/components-and-props.html Components and Props – React A JavaScript library for building user interfaces ko.reactjs.org 확인해보면 props사용방법을 알 수 있게 됩니다. 이제는 이 개념을 본인이 만든 소스코드에 접목 시켜보겠습니다. 이부분을 바꿔보도록 하겠습니다. Subject 클래스와 App클래스의 변경사항을 쉽게 비교하기 위해서 잠시 Subject클래스를 밑에 내렸습니..

우선 왼쪽부분에 html코드가 완성된 코드라고 봅니다. 그리고 header태그 영역을 컴포넌트로 만들고자 합니다. 그럼 클래스를 선언해야하는데, 클래스의 이름을 Subject라고 하고 Component를 상속받게합니다. 그리고 밑에 render()은 함수인데, function render()라고 선언하지않아도 같은 기능을 하게 업데이트 되었습니다. return안에 header태그를 넣어줍니다. 그럼 header태그는 컴포넌트로 만들어 진것인데, 이것을 사용하려면 Subject태그를 내가 원하는 위치에 사용하면 되는것입니다. 브라우저에서 어떻게 보이는지 볼까요? 보면 header태그는 App클래스 div태그 안에 들어있는것을 보실 수 있습니다. 신기한것은 웹브라우저는 react의 존재를 모릅니다. 왜냐하면..