생활코딩 React 강의 (3) - 컴포넌트, 다른 파일로 컴포넌트 분리하기

리액트가 없다면 코드를 그대로 다 html문서에 작성해야 한다. 코드가 많아질수록 한 눈에 구조를 보기 힘들다.

이럴 때 리액트를 사용하면 컴포넌트의 이름으로 간단하게 html 문서를 구성할 수 있게 되어 구조를 확인하는데 편하다.

 

Component

pure html

react

Subject, TOC, Content라는 Component로 문서의 구조를 한 눈에 볼 수 있다.

각 Component가 정의된 App.js파일은 다음과 같이 만들 수 있다.

import React, { Component } from 'react';
import './App.css';
 
class Subject extends Component {
  render() {
    return (
      // 하나의 최상위 태그로 만들어져야 한다.
      <header>
            <h1>{this.props.title}</h1>
            {this.props.sub}
        </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>{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>
        <Subject title="REACT" sub="For UI"></Subject>
        <TOC></TOC>
        <Content title="HTML" desc="HTML is hypertext markup language."></Content>
      </div>
    );
  }
}
 
export default App;

class (이름) extends Component {
  render() {
    return ( (내용) );
  }
}

형태는 위와 같다. 이름은 첫 문자를 대문자로 지어야 한다.

그리고 return 안의 내용은 하나의 최상위 태그 안에 내용이 들어있어야 한다.

 

Component는 아래와 같은 형태로 만들 수도 있다.

(참고 https://ko.reactjs.org/docs/components-and-props.html)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

* 리액트는 우리가 컴포넌트를 사용해서 만든 코드를 긴 html로 변환해서 전달하기 때문에 브라우저는 html문서가 리액트로 만들어졌는지 아닌지 알지 못한다.

App.js에서 만드는 컴포넌트는 완벽한 자바스크립트의 문법을 따르지 않는다. 원칙적으로 만든다면 return 안의 문자열은 ""로 감싸줘야 하며, 그 안의 특수문자도 따로 처리해줘야 하지만 create-react-app에서는 html 문서의 코드를 그대로 복사-붙여넣기 해서 집어넣으면 된다. 페이스북에서 사용하는 유사 JS언어인 JSX로 우리가 코드를 쓰면, create-react-app이 js로 바꿔준다.

 

Component의 props

Component의 내용을 props에 따라 다르게 표시할 수 있다.

HTML 태그 안에 title, sub과 같이 다른 조건을 명시할 수 있다.

HTML 태그에서는 attribute(요소)라고 부르는데 react에서는 props라고 한다.

props를 이용해 같은 component도 다양하게 사용할 수 있다.

 

props를 component 안에서는 {this.props.(props이름)}으로 사용한다.

 

Component 분리하기

Component가 많아지면 각각 다른 파일에 저장하는 것이 관리하기가 쉽다.

src 폴더 안에 components라는 폴더를 새로 만들어 component 파일들을 저장한다.

Content 라는 Component를 따로 component.js에 분리한 모양이다.

크게 세 부분으로 나눠진다.

1. import React, { Component } from 'react';
2. 컴포넌트 내용
3. export default 컴포넌트이름

1. 컴포넌트를 만들기 위한 필수적인 코드이다.

리액트 앱으로부터 { Component }라는 객체를 import 해온다.

 

2. 컴포넌트의 내용이다. 

 

3. 컴포넌트를 다른 파일에서 import해서 사용할 수 있도록 export해줘야 한다.

 

위와 같이 파일을 만들고 나면 Content 컴포넌트를 사용할 파일에서는 import를 해줘야 한다.

import 컴포넌트이름 from "파일 경로"

위의 긴 App.js 안에 있던 컴포넌트를 파일로 분리해서 다시 App.js를 작성하면 아래와 같이 짧게 표현할 수 있다.

import React, { Component } from 'react';
import TOC from "./components/TOC"
import Subject from "./components/Subject"
import Content from "./components/Content"
import './App.css';
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!"></Subject>
        <Subject title="REACT" sub="For UI"></Subject>
        <TOC></TOC>
        <Content title="HTML" desc="HTML is hypertext markup language."></Content>
      </div>
    );
  }
}
 
export default App;
 

 

참고한 페이지

 

생활코딩 react 강의

10. 리액트가 없다면

11.1 컴포넌트 만들기 1

11.2 컴포넌트 만들기 2

12. props

14. Component 파일로 분리하기

https://www.youtube.com/watch?v=QG4RxNHz-bc&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=10