[React] 컴포넌트 제작

클래스형 컴포넌트 작성(클래스 문법, 단축키rcc)

class Subject extends Component { // 리액트의 Component라는 클래스를 상속받아 App이라는 클래스 생성
  render() { // 클래스소속 함수는 function키워드를 안씀
    return ( // JSX코드 작성하는 부분. 최상위태그는 하나여야 함.
      <header>
        <h1>WEB</h1>
        world wide web!
      </header>
    );
  }
}

props 사용

props : JSX에서 attribute 역할을 하는 부분. 부모컴포넌트에서 선언되고, 자식컴포넌트에서 {this.props."propsname"}의 형태로 사용함.

// 자식컴포넌트
class Content extends Component {
  render() {
    return ( // props사용
      <article>
      	<h2>{this.props.title}</h2>
        {this.props.desc}
      </article>
    );
  }
}

// 부모 컴포넌트
class App extends Component {
  render() {
    return ( // props저장
      <div className="App">
        <Subject></Subject>
        <TOC></TOC>
        <Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
      </div>
    );
  }
}

React developer tools

태그들을 컴포넌트로 보고싶을때 구글 익스텐션에서 React developer tools 사용. 개발자 도구에서 elements탭 대신 react탭으로 보기.

컴포넌트 분리하기

App컴포넌트와 App컴포넌트의 하위 컴포넌트들을 한 파일에 작성하면 다른 위치에서 하위 컴포넌트들에 접근하기 어려워짐. 이에 src디렉터리 하단에 components디렉터리를 생성해 따로 관리해줌. rcc단축키로 쉽게 작성할 수 있지만 아직 익숙하지 않으니 상세한 과정 작성.
1. src 하위에 components 디렉터리 추가
2. "컴포넌트명.js"파일 생성
3. 컴포넌트 복사
4. 상위에 import React, { Component } from 'react';
5. 하위에 export default TOC;
6. App.js에서 import TOC from "./components/TOC";

생활코딩 : 컴포넌트 제작