[2023 신입부원 심화 스터디] 김윤희 #5주차 - React.js 섹션 2. 컴포넌트 제작

1. 리액트가 없다면..

- 태그가 ,, 코드가 천만줄이라면 ? → 한눈에 코드가 안 들어와 !

- 코드상으로 simple! 하게 해주는 것 !

 

2.컴포넌트 만들기 1, 2

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

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

• App이라는 클래스를 만들고, Component라는 클래스를 상속받자 !
• render()라는 함수가 꼭 필요 !
• 컴포넌트는 하나의 최상위 태그로 시작해야한다 !

3.props

→ 컴포넌트의 속성을 표현 !

→ {this.props.title(원하는 값의 이름)}

     {this.props.sub}

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 App extends Component {
  render() {
    return (
      <div ClassName="App">
        <Subject title="WEB" sub="world wide web!"></Subject>
        <Subject title="React" sub="For UI"></Subject>
      </div>
    );
  }
}

export default App;

4.React Developer Tools

→ 개발자 도구에서 react의 tab이 추가됨 !

→ react 분석 시 사용할 수 있으며 원한다면 실시간으로 값을 변경할 수 있음 !

 

5.Component 파일로 분리하기

components라는 디렉토리 생성 → 컴포넌트 파일들을 생성 →

import Subject from “component/Subject”; 코드를 App.js 파일에 삽입 !