[React] 컴포넌트 제작

Study. React

컴포넌트 제작

[React Developer Tools]

📌질문하고 검색하는 것을 스스로 하는 것이 중요함

 

📢React 홈페이지 버전을 16.8로 맞춰야 함

📎React Developer Tools 바로 가기 링크: chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related

React Developer Tools

 

📌위 툴을 사용해서 관리자 모드로 들어가서 Components로 들어가면 아래처럼 내가 만든 앱의 component를 보여줌

📌props에서 실시간으로 내용을 변경할 수도 있음

 

[Component 파일로 분리하기]

📌하나의 파일 안에 다수의 Component가 들어가 있으면 복잡함

📌다른 파일에서는 App.js에 있는 Component를 가져다 쓰기 어려움

 

 

📌src폴더에서 components라는 디렉터리를 추가하고 안에 TOC.js, Content.js, Subject.js, Aside.js 파일을 추가

 

📌TOC.js, Content.js, Subject.js, Aside.js 파일 안에 Component 관련 에러를 없애기 위해 아래 코드를 작성하여 import

import React, { Component } from 'react';

 

📌App.js에서 TOC, Content, Subject, Aside 클래스들을 복사하여 각각의 js 파일에 붙여 넣기를 해주고 각 파일 아래에 외부 파일을 연결하기 위한 export를 해준다. (아래 코드 참고)

📌export를 이용하여 Aside.js를 가져다 쓰는 쪽에서 Aside라는 클래스를 가져다 쓸 수 있게 됨

export default Aside;

 

📌연결이 완료 된 TOC.js 파일의 전체 코드는 이러함

import React, { Component } from 'react';
import App from '../App';

class Aside extends Component{
    render(){
      return(
        <aside>
          <button>hello</button>
        </aside>
      )
    }
  }
export default Aside;

 

📌나머지 Content.js, Subject.js 파일도 클래스명과 export명을 올바르게 바꿔준다.

 

📌마지막으로 App.js파일 맨 상단에 아래 코드와 같이 분리된 파일을 import 하여 연결해준다.

import TOC from "./components/TOC";
import Content from "./components/Content";
import Subject from "./components/Subject";
import Aside from "./components/Aside";

 

📌결론: 파일을 분리하면 코드는 줄어들고 결과는 똑같아서 효율적

 

 

📎강의-생활코딩: opentutorials.org/module/4058/24737

 

💡[컴포넌트 제작] 파트가 끝났다.

파일 분리하는 방법이 복잡하다고 생각하지만 반복해서 연습하면 금방 익숙해질 것 같다.

다음 파트도 열심히 들어보겠다.

하띵💪