생활코딩 react (13~14-React Developer Tools, Component 파일로 분리)

#13 React - 13. React Developer Tools

 

* chrome 플러그인으로 지원하는 react 개발자 도구

** 영상에서 설명하는 개발자도구 접근방법 (없어짐)

 - reactjs.org > community > tools > Debugging

 > React Developer Tools - Chrome, Fierfox, standalone app 지원

** 개선된 크롬 디버그 툴 제공

 - 관련 블로그 글 : https://ko.reactjs.org/blog/2019/08/15/new-react-devtools.html

 > https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en 

React Developer Tools

 

* 개발자 도구 사용

 - HTML 소스 확인 : Elements 탭

 - react 구조 확인 : Components 탭

 

* 영상에서는 Components 탭에서 html 소스를 기반으로 컴포넌트 정보가 표시되었지만, 개선된 개발자도구에서는 트리구조로 표시됨

- 화면 정보를 실시간으로 변경하거나, props 의 정보를 수정해가며 확인할 수 있음

(확인) Chrome 플러그인 React Developer Tools 설치 시 Elements, Components 탭이 보이지 않으면

 - Chrome > 설정 > 확장프로그램 > React Developer Tools > 세부정보

 > '파일 URL에 대한 액세스 허용' 항목 체크

 

#14 React - 14. Component 파일로 분리하기

 

* App.js 에 정의된 컴포넌트를 별도의 파일로 분리

** 참고

 - index.js 에서 <APP/> 테그로 선언한 컴포넌트를

   같은 경로의 App.js 파일로 구현된 기능으로 컴포넌트 적용

 > import App from './App'; 

** TOC 컴포넌트 분리

 - 폴더및 대상 소스파일 생성

 > /componets/TOC.js

 - 구현소스 이동 : App.js(TOC 소스) > TOC.js

 > Componet 사용을 위해 import 추가 : TOC.js

 > Toc 컴포넌트 참조를 위해 export 추가 : TOC.js

import { Component } from 'react';
class Toc extends Component{
    render(){
      return(
        <nav>
          <ul>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">JavaScript</a></li>
          </ul>
      </nav>
      );
    }
  }
  export default Toc;

 - 소스 이동에 따른 호출부 현행화

 > TOC 소스 위치 import 문 추가 : App.js

import Toc from './components/TOC';

* 이동 결과

* 나머지 컴포넌트 분리

 - Subject, Article

** 응용1 : refactor 를 이용한 추출

 - 코드블럭 : class 선언 영역

 - 마우스 우클릭 팝업메뉴 : Refactor [Ctrl+Shift+R]

 - Move to a new file

 - src/Subject.js 로 생긴 파일 이동 : src/componets/Subject.js

 - Update imorts for 'Subject.js'

 - Subject.js 파일에서 클래스명 선택 후 Refactor : Convert named export to default export

 

import './App.css'; import Toc from './components/TOC'; import React, { Component } from 'react'; import Subject from './components/Subject'; class Article extends Component{  ... } class App extends Component {   render(){   return (     <div className="App">     <Subject title="WEB1" sub="WWW!!"></Subject>     <Subject title="WEB2" sub="React JSX."></Subject>     <Toc></Toc>     <Article title="HTML" desc="HTML is HyperText Markup Loanguage."></Article>     </div>   );   } } export default App;

import React, { Component } from 'react'; export default class Subject extends Component {   render() {     return (       <header>         <h1>{this.props.title}</h1>         {this.props.sub}       </header>     );   } }

 - Article - Refactor : Convert named export to default export 없이 이동

import './App.css'; import Toc from './components/TOC'; import React, { Component } from 'react'; import Subject from './components/Subject'; import { Article } from './components/Article'; class App extends Component {   render(){   return (     <div className="App">     <Subject title="WEB1" sub="WWW!!"></Subject>     <Subject title="WEB2" sub="React JSX."></Subject>     <Toc></Toc>     <Article title="HTML" desc="HTML is HyperText Markup Loanguage."></Article>     </div>   );   } } export default App;

import React, { Component } from 'react'; export class Article extends Component {   render() {     return (       <article>         <h2>HTML</h2>         {this.props.desc}       </article>     );   } }

어라.. 에러가 나네.

 - 파일 이동 후 바로 새로고침을 하면 오류가 발생한다.

 > 호출파일과 이동파일을 다시 저장하면 빌드시간을 거쳐 다시 정상적으로 표시되는것 같다. ㅋ

 : Failed to compile

 Error : ENOENT :  no such file or directory, open '대상소스경로'