[React] Component

728x90

생활코딩 리액트 편을 보고 작성된 게시글입니다.

* public directory

create react app에서 npm run start시 파일을 찾는 다큐먼트 root

다음과 같은 웹을 만든다고 하면,

REACT 를 사용했을 때	REACT를 사용하지 않을 때

여러 줄을 하나의 줄로서 표현하여 간결해지며 유지보수가 좋아짐

그럼 실제로 오른쪽과 같은 웹을

3가지의 태그를 생성하여 오른쪽으로 변경해도 똑같은 기능을 하도록 만들어보자

Component만들기

주의!

1. 컴포넌트의 이름 첫글자는 대문자
2 . 컴포넌트는 항상 하나의 최상위 태그로 시작해야함

1 ) App.js 파일에 원하는 컴포넌트 이름으로 컴포넌트를 만들어줌

class 컴포넌트명 extends Component{

	render(){ return( 컴포넌트에 해당하는 내용 ); }

}

2 ) 만들어진 컴포넌트를 App 컴포넌트 안에 삽입

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

웹브라우저는 리액트라는 기술을 알 수 없기 때문에

리액트가 최종적으로 웹브라우저가 알아 들을수 있는 html코드를 넘겨주기 위한 수단으로 App컴포넌트를 사용

즉, 이렇게 하면 실제 웹에서는 <HeadSub></HeadSub>라는 것을 모르지만 그 내용으로 번역하여 들어가게됨

실제 우리가 사용하고 있는 언어는 js가 아닌 jsx(페이스북에서 개발자의 편의를 이용하여 개량한 js같은 것..) 이를 실제 js문법과는 엄밀히 따지면 다르기 때문에 js로 번역하여 들어가야함

실제 웹에서의 모습

BodySub와 ArticleSub도 같은 방법으로 만들어 준 뒤 App 컴포넌트 안에다가 넣어줌

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


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

//주로 목차는 TOC라고 많이 함
class BodySub 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 AriticleSub extends Component{
  render(){
    return(
      <article>
        <h2>HTML</h2>
          HTML is HyperText Markup Language
      </article>
    );
  }
}

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

        <BodySub></BodySub>

        <AriticleSub></AriticleSub>
        
      </div>
    );
  }
}

export default App;

최종 결과

정리정돈의 개념

컴포넌트의 이름에 집중하고 전체는 간결하게 볼 수 있는 엄청난 장점이 있음

다른 앱이나 사이트에 동일한 태그를 이용하면서 재사용성을 높일 수도 있음

Props

" 다른 앱이나 사이트에 동일한 태그를 이용하면서 재사용성을 높일 수도 있음 "

이 부분을 컴포넌트의 장점으로 뽑기에는 항상 같은 값을 내보내므로 재사용성이 떨어짐

같은 컴포넌트를 쓰면 같은 내용이 들어간다면 재사용성이 떨어짐	이런식으로 같은 컴포넌트를 사용해도 변경이 가능하다면 재사용성이 뛰어나게 될 것임

사용자 코드에 따라 다른 값을 출력하도록 만들면 어느 누구가 어느 프로그램에 컴포넌트를 가져다 쓰든 재사용성이 높아질 것

이때 props를 사용

다른 js에 존재하는 태그들 처럼 속성값을 줄 수 있음 !

{this.props.속성값 이름}

컴포넌트 태그에 속성값과 prop를 사용하는 모습

AriticleSub도 바꾼 모습

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



class BodySub 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 AriticleSub extends Component{
  render(){
    return(
      <article>
        <h2>{this.props.title}</h2>
          {this.props.desc}
      </article>
    );
  }
}


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


class App extends Component {
  render(){
    return (
      <div className="App">
        <HeadSub title="WEB1" sub="world wide web"></HeadSub>
        <HeadSub title="WEB2" sub="world wide web2"></HeadSub>
        <BodySub></BodySub>
        <AriticleSub title="HTML" desc="HTML is HyperText Markup Language."></AriticleSub>



      </div>
    );
  }
}

export default App;

추가)

React Developer Tools

Chrome webstore에서 다운 받을 수 있습니다.

개발자 모드에 추가된 기능을 부여함

Component분리하기

App.js라는 파일 내에 컴포넌트가 매우 많이 존재한다면? 관리하기 어려움

컴포넌트를 분리해놓으면 가져다 쓰기가 더 편리함

src folder내에 components라는 폴더 생성

내부에 컴포넌트의 이름을 가진 js파일을 생성해준 뒤 코드를 옮겨줌

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>
      );
    }
  }
  
  export default TOC; //외부에서 사용을 허용

그 뒤 App.js에 TOC.js 를 import

App.js

import React, { Component } from 'react';
import './App.css';
import TOC from "./components/TOC"; //추가된 부분



//(다른 코드 중략)

class App extends Component {
  render(){
    return (
      <div className="App">
        <HeadSub title="WEB1" sub="world wide web"></HeadSub>
        <HeadSub title="WEB2" sub="world wide web2"></HeadSub>
        <TOC></TOC>
        <AriticleSub title="HTML" desc="HTML is HyperText Markup Language."></AriticleSub>



      </div>
    );
  }
}

export default App;

이렇게 하면 App.js에 TOC 컴포넌트가 존재하지 않아도 사용가능함

나머지 컴포넌트에도 적용

결과)

나눠진 파일들

Subject.js

import React, { Component } from 'react';

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


export default Subject; //외부에서 사용을 허용

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>
      );
    }
  }
  
  export default TOC; //외부에서 사용을 허용

Content.js

import React, { Component } from 'react';

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


  export default Content; //외부에서 사용을 허용

App.js

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



class App extends Component {
  render(){
    return (
      <div className="App">
        <Subject title="WEB1" sub="world wide web"></Subject>
        <Subject title="WEB2" sub="world wide web2"></Subject>
        <TOC></TOC>
        <Content title="HTML" desc="HTML is HyperText Markup Language."></Content>



      </div>
    );
  }
}

export default App;

App.js에 존재하던 컴포넌트를 서로 다른 파일로 옮기므로서 찾기 쉽고 관리도 편리해짐!

(기능은 같음)

참고영상

생활코딩 리액트

React 10. 리액트가 없다면
React 11.1. 컴포넌트 만들기1
React 11.2. 컴포넌트 만들기2
React 12. props
React 13. React Developers Tools
React 14. Component 파일로 분리하기

youtu.be/QG4RxNHz-bc

728x90

'Frontend > React' 카테고리의 다른 글

[React] Create기능 구현 (0)	2020.11.18
[React] Event (0)	2020.11.18
[React] State (0)	2020.11.17
[React]기초용어 + build (0)	2020.11.17
[React] 개발환경 만들기 (0)	2020.11.17

IagreeBUT

[React] Component

Component만들기

Props

Component분리하기

'Frontend > React' 카테고리의 다른 글

티스토리툴바

[React] Component

Component만들기

Props

Component분리하기

'Frontend > React' 카테고리의 다른 글

'Frontend/React' Related Articles

티스토리툴바