[React] 리액트 컴포넌트(Component)제작, 인스턴스 속성(props)의 사용법, React Developer Tools

1. 컴포넌트(Component) 제작

---

리액트로 만들어지는 앱을 이루는 최소한의 단위로 공식 문서를 보면 자바스크립트의 함수 역할을 맡은 존재와 같다.

컴포넌트는 React의 Component 객체를 상속하는 클래스를 생성해서 export하는 App에 태그화 하여 작성하면 클래스의 html 코드를 구현할 수 있다.

 

 

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

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

class Subject extends Component{
  render(){
    return (
      <header>
        <h1>WEB</h1>
        World Wide Web
      </header>
    );
  }
}
class Menu extends Component{
  render(){
    return(
      <ul>
      <li>Node.js</li>
      <li>Java</li>
      <li>Python</li>
    </ul>

    );
  }
}

export default App;

 

1-2. 컴포넌트(Component) 파일로 분리

---

폴더를 새로 생성후 새 파일을 만들어서 컴포넌트를 넣어 분리하여 사용하면 가독성이 좋아진다. 

그 때, 꼭 들어가야하는 요소는 아래와 같다.

 

클래스에서 상속하는 리액트 클래스를 불러와주고 

import React, { Component } from 'react';

내보내고자 하는 클래스를 default로 설정

  export default Menu;

 

import React, { Component } from 'react';

class Menu extends Component{
    render(){
      return(
        <ul>
        <li>Node.js</li>
        <li>Java</li>
        <li>Python</li>
      </ul>
  
      );
    }
  }

  export default Menu;

 

 

2. Props 활용

---

 

<class 형식>  {this.props.값을 넣을 속성 이름}

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

class App extends Component {
  render(){
    return (
      <div className="App">
        <Subject name="1" desc="this is one"></Subject>
        <Subject name="2" desc="this is two"></Subject>
        <Menu></Menu>
      </div>
    );
  }
}

class Subject extends Component{
  render(){
    return (
      <header>
  <h1>WEB - {this.props.name}</h1>
        World Wide Web - {this.props.desc}
      </header>
    );
  }
}

 

<function 형식>  함수의 인자값으로 props를 받고 {props.값을 넣을 속성 이름}

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

class App extends Component {
  render(){
    return (
      <div className="App">
        <Subject name="1" desc="this is one"></Subject>
        <Welcome name="1"></Welcome>
        <Subject name="2" desc="this is two"></Subject>
        <Welcome name="2"></Welcome>
        <Menu></Menu>
      </div>
    );
  }
}

function Welcome (props){
    return <p>Welcome to WEB {props.name}</p>
  
}
class Subject extends Component{
  render(){
    return (
      <header>
  <h1>WEB - {this.props.name}</h1>
        World Wide Web - {this.props.desc}
      </header>
    );
  }
}

 

 

app.js에서 props에 들어가는 값을 따로 설정하지 않았을 경우, 컴포넌트 내에서 기본값을 설정하여 이를 출력하도록 설정할 수 있다.

기본값 설정의 형태 : render함수 앞에 static defaultProps = { } 추가

import React, { Component } from 'react';

class Subject extends Component{
  static defaultPorps = {
    title : 'just Subject'
  }  
  render(){
      return (
        <header>
    <h1><a>{this.props.title}</a></h1>
         {this.props.desc}
        </header>
      );
    }
  }

  export default Subject; 

 

3. React Developer Tools(디버깅을 위한 툴)

---

크롬의 웹스토어에서 React Developer Tools를 검색하여 확장프로그램 설치

 

리액트를 적용한 페이지에서 개발자도구를 키면 리액트의 컴포넌트 상세 정보를 알 수 있는 페이지가 생긴다.

참조한 생활코딩 URL :

https://opentutorials.org/module/4058/24737