React 실습-basic 1: Component 생성, 분리

재로미·2021년 9월 1일
0

React

목록 보기
2/4
post-thumbnail
post-custom-banner

Component 만들기

리액트에서 component는 자바스크립트 함수와 유사하다고 생각할 수 있다. 여기에 'props' (properties)를 입력으로 받아서 리액트 element를 반환하는 형태로 동작한다.

어떤 test.html을 만들어서 다음과 같이 구상해본다고 가정하자

<!-- test.html -->
<html>
  <body>
    <header>
      <h1>Review react basic</h1>
      <p>written by Jerome</p>
    </header>
    <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>
    <article>
      <h2>Basic React</h2>
      <p>welcome to this page programmed using React</p>
    </article>
  </body>
</html>

지금은 단순해 보이지만, 만약 header 안에 다른 태그들이 더 들어가서 코드의 길이가 엄청 길어진다고 극단적으로 생각해본다면? 분명 위 코드는 가독성이 떨어지고 유지보수하기 힘들 것이다.

React는 이런 요소들을 잘게 쪼개어 component라는 재사용 가능한 요소로 만드는 것을 제공한다. class 형으로 React component를 작성하면 다음과 같이 만들 수 있다.

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

// props 속성은 아래 App 클래스에서 어떻게 작용하는 지 보자. 
class Title extends Component{
  render() {
    return (
      <header>
        <h1>{this.props.title}</h1>
        <p>{this.props.sub}</p>
      </header>
    );
  }
}

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>
    );
  }
}

class Content extends Component{
  render() {
    return (
      <article>
        <h2>Basic React</h2>
        <p>welcome to this page programmed using React</p>
      </article>
    );
  }
}

class App extends Component {
  render() {
    return(
      <div className="App">
        <Title title="Review react basic" sub="written by Jerome"></Title>
        <TOC></TOC>
        <Content></Content>
      </div>
    );
  }
}
// 이렇게 만든 App 이라는 컴포넌트를 외부에서 가져다 쓸 수 있게 export 하겠다 하는 것
export default App;

위 코드에서 Subject 클래스에 주목해보자. "this.props.title" 이런식으로 중괄호 안에 감추어 놓고 App 클래스에서 <Subject title="_" sub="_">식으로 사용하고 있다. 이렇게 하는 것을 컴포넌트에 property를 설정한다 라고 하며 property를 지정한 것과 안 한 것을 위 코드로 구분 할 수 있다.

이렇게 나눈 컴포넌트를 컴포넌트 별로 파일을 분리 할 수 있는데, 각 클래스명을 파일명으로 하는 js/jsx 파일을 만들고 이 컴포넌트가 다른 곳에서 사용될 수 있게 마지막에 export default App;을 넣어주며, App 클래스에서 나눈 파일들의 컴포넌트를 import 하면 된다.

이를 위해 컴포넌트들을 관리하는 'components' 폴더를 따로 만들고, 여기에서 파일을 생성하여 형성할 수 있는 react 앱구조는 다음과 같다.

// App.js
import React, { Component } from 'react';
import TOC from './components/TOC';
import Content from './components/Content';
import Title from './components/Title';
import './App.css';

class App extends Component {
  render() {
    return(
      <div className="App">
        <Subject title="Review react basic" sub="written by Jerome"></Subject>
        <TOC></TOC>
        <Content subject="Basic React" desc="welcome to this page programmed using React"></Content>
      </div>
    );
  }
}

export default App;
// components/Title.js
import React, { Component } from 'react';

class Title extends Component {
  render() {
    return (
      <header>
        <h1>{this.props.title}</h1>
        <p>{this.props.sub}</p>
      </header>
    );
  }
}

export default Title;
// components/TOC.js
import React, { 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>
    );
  }
}
// components/Content.js
import React, { Component } from 'react';

class Content extends Component {
  render() {
    return (
      <article>
        <h1>{this.props.subject}</h1>
        <p>{this.props.desc}</p>
      </article>
    );
  }
}

export default Content;

TOC 클래스는 props를 사용하지 않고 그냥 파일을 분리시켰는데, 여기서 부터는 state 개념이 들어가게 되므로 다음 포스트에서 마저 실습하면서 알아가보자.

profile
정확하고 체계적인 지식을 가진 개발자 뿐만 아니라, 가진 지식을 사람들과 함께 나눌 수 있는 계발자가 되고 싶습니다
post-custom-banner

0개의 댓글