[React.js] 컴포넌트(Component) 만들기

 

컴포넌트란

UI 재사용을 위해 개별적인 여러조각으로 나눈 것으로

소프트웨어의 재사용성을 높이고 유지보수를 용이하게 하는 기술

 

※ 자세한 내용 참고

https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React

 

간단한 컴포넌트 작성법 - JavaScript 함수 이용

class Sample extends Component { // 컴포넌트 만들기
  render() {
    return ( // 하나의 최상위 태그로 시작
    <h1> Hello </h1>
    );
  }
}

 

사용 예제

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

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

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

export default App;

▷ App.js

▶ <header> 태그 부분을 Subject 컴포넌트로 만들어서 작성

▶ React를 통해 웹 브라우저상에서는 <Subject> 태그 부분이 <header> 태그로 보임

※ 이러한 코드는 javascript에 html문법을 사용하는 것으로 JSX로 작성한 것

 

컴포넌트의 속성 표현법 - props 이용

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

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!"></Subject>
      </div>
    );
  }
}

export default App;

▷ App.js

▶ <Subject> 태그에 title과 sub 속성을 추가

▶ React의 props를 이용하여 객체인자를 받을 수 있음

▶ 리팩토링 !

 

컴포넌트 파일로 분리

- 다른 파일에서도 컴포넌트를 이용할 수 있도록 따로 파일을 분리

import { Component } from 'react';

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

export default Subject;

▷ Subject.js

 

import './App.css';
import { Component } from 'react';
import Subject from './components/Subject'; // Subject.js 파일 가져오기

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!"></Subject>
      </div>
    );
  }
}

export default App;

▷ App.js

▶ Subject.js 파일을 import하여 사용할 수 있음(파일 위치 주의)

▶ 다른 react 파일에서도 Subject 컴포넌트를 사용할 수 있음

 

* 생활코딩 React-11.1, React-11.2, React-12, React-14  강의 기반으로 작성됨