③ 컴포넌트 제작

🔗 생활코딩 React

1. 리액트가 없다면

• 리액트를 사용하는 이유
  : 태그를 이름으로 재사용할 수 있어서, 대량 생산이 가능하고 가독성이 높다.

2. 컴포넌트 만들기

1) 컴포넌트 생성

// App.js
class Subject extends Component {	// 클래스명은 대문자로 시작
  render(){	// 클래스 안에 소속되는 함수는 앞에 function 생략 가능
    return (
      <header>	// 컴포넌트는 하나의 최상위 태그를 포함해야 함
          <h1>WEB</h1>
          world wide web
      </header>
    );
  }
}

• JSX
  - JavaScript 문법의 확장
  • React는 JSX를 HTML로 변환하는 역할

2) 컴포넌트 사용

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

3. props

🔗 Components and Props

• 태그의 재사용성을 높이기 위한 속성

class Subject extends Component {
    render(){
      return (
        <header>
          <h1>{this.props.title}</h1>	// 현재 태그의 title 속성(props) 값
          {this.props.sub}	// 현재 태그의 sub 속성 값
        </header>
      );
    }
}
class App extends Component {
    render() {
      return (
        <div className="App">
          <Subject title="WEB" sub="world wide web!"></Subject>
          <Subject title="React" sub="For UI"></Subject>
        </div>
      );
    }
}

💡
오 대박인 걸,,, 신세계....
역시 새로운 거 배우는 건 재밌다.

4. React Developer Tools

• 공부할 때 중요한 요소

  1. 설명서를 볼 줄 아는 것
     : 너무 장황하거나 단순한 문제
  2. 가설을 세우고 확인하고 결론을 내리는 것
     : 스스로 알아내는 능력

🔗 React Developer Tools

• 브라우저에 맞는 확장 프로그램 설치
• 개발자 도구에 생성된 React 탭에서 React 컴포넌트를 확인할 수 있음

  👉 문제가 생겼을 때 스스로 확인할 수 있는 능력!

5. Component 파일로 분리하기

1) 파일 생성

// src/components/Subject.js
import React, {Component} from 'react';	// React 코드를 쓴다면 필수!

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

export default Subject;	// Subject 컴포넌트 내보내기

2) 파일 사용

// App.js
import React, {Component} from 'react';
import Subject from "./components/Subject"	// Subject 컴포넌트 불러오기
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>
      </div>
    );
  }
}