[2023 신입부원 심화 스터디] 이정욱 #5주차 React.js ~ 섹션2 컴포넌트 제작

컴포넌트 만들기 

컴포넌트란 리엑트에서 화면에 UI 요소 중 가장 작은 단위를 Compoenent라고 한다.

컴포넌트는 class component와 function component 두가지 방식이 있다.

 

우리가 진행할 방식은 class component 방식이다.

 

class component 의 특징

• class 키워드를 사용
• Component 클래스를 상속받아 사용한다.
• render() 메소드를 꼭 사용해야한다.

// import logo from './logo.svg';
import { Component } from "react";
import "./App.css";

class Subject extends Component {
  render() {
    return (
      <headr>
        <h1>WEB</h1>
        world wide web!
      </headr>
    );
  }
}

class TOC extends Component {
  render() {
    return (
      <nav>
        <ul>
          <li>
            <a href="1.html">HTMl</a>
          </li>
          <li>
            <a href="2.html">HTMl</a>
          </li>
          <li>
            <a href="3.html">HTMl</a>
          </li>
        </ul>
      </nav>
    );
  }
}

class Content extends Component {
  render() {
    return (
      <article>
        <h2>HTML</h2>s HTML is Hyper Text Markup Langauge
      </article>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
    );
  }
}

export default App;

다음과 같이 작성해주면 Subject, TOC, Content 라는 이름의 컴포넌트를 생성하여 App 에 사용해주었다.

 

Props

html에서 a태그의 href와 같은 속성처럼 compnent에도 사용자가 정의하여 사용할수 있는props 라는 것이 있다.

// import logo from './logo.svg';
import { Component } from "react";
import "./App.css";

class Subject extends Component {
  render() {
    return (
      <headr>
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </headr>
    );
  }
}

class TOC extends Component {
  render() {
    return (
      <nav>
        <ul>
          <li>
            <a href="1.html">HTMl</a>
          </li>
          <li>
            <a href="2.html">HTMl</a>
          </li>
          <li>
            <a href="3.html">HTMl</a>
          </li>
        </ul>
      </nav>
    );
  }
}

class Content extends Component {
  render() {
    return (
      <article>
        <h2>{this.props.title}</h2>
        {this.props.desc}
      </article>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!"></Subject>
        <TOC></TOC>
        <Content
          title="HTML"
          desc="HTML is Hyper Text Markup Language"
        ></Content>
      </div>
    );
  }
}

export default App;

Content 컴포넌트 안에 보면 {this.props.title} 이러한 형식으로 내용이 정의되어있다.

그 뒤에 Content 컴포넌트를 사용할 때 title="" 과 같이 태그의 속성을 사용하듯이 하면 해당 내용이 입력된다.

 

현재는 App.js에 모든 컴포넌트를 넣어둔채로 index.js에서 App.js를 끌어와 샤용하고있다.

//index.js
import App from './App';

그러나 유지보수와 가독성을 위해서 Component를 분리해준다.

 

src디렉토리에 components라는 디렉토리를 생성해준뒤 그곳에 TOC.js와 같이 컴포넌트를 담을 js 파일을 생성해준뒤 각각 컴포넌트들을 분리해 준다.

 

import { Component } from "react";

class Content extends Component {
  render() {
    return (
      <article>
        <h2>{this.props.title}</h2>
        {this.props.desc}
      </article>
    );
  }
}

export default Content;

다음과 같이 컴포넌트를 분리하여 작성해줄 때 마지막에 export default (컴포넌트명) 을 써주어야 외부에서 해당 Component를 사용할수 있게된다.

 

import { Component } from "react";
import TOC from "./components/TOC";
import Content from "./components/Content";
import Subject from "./components/Subject";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!"></Subject>
        <TOC></TOC>
        <Content
          title="HTML"
          desc="HTML is Hyper Text Markup Language"
        ></Content>
      </div>
    );
  }
}

export default App;

이것이 컴포넌트가 분리된후의 App.js의 모습이다.

위의 import를 통해 각 component들을 사용하였다.