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

웅 윙크 채고

• 리액트가 없다면 🤔💭

만약 코드가 65만 줄, 65억 줄이 된다면 코드를 한 눈에 알아볼 수 없다..😢
→ 헉❗ 이 코드를 한 태그로 만들 수 있었으면 좋겠다.. ⇒ 이게 바로 리액트 💻

ex) <Subject></Subject> 

 

 

• 컴포넌트 만들기 → 어지러웠던 코드를 정리정돈해주는 것이라고 생각하면 쉽다🧹
  • 주의할 점: 컴포넌트를 만들 때,  항상 최상위 태그로 묶여있어야 한다.
    ex) 시맨틱 태그 사용하기
  • 참고할 점: 이 코드는 js 코드가 아니다 → 그러므로 콘솔창에 복붙해서 실행해도 실행되지 않는다.

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

class Subject extends Component { {/* 컴포넌트를 만드는 기본 틀 */}
  render() {
    return (
      <header> {/* 시맨틱 태그처럼 최상위 태그로 묶여 있어야 한다. */}
        <h1>WEB</h1>
        world wide web!
      </header>
    );
  }
}

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

 

• props
  • 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.

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

class Subject extends Component {
  render() {
    return (
      <header>
        {/* props 사용 */}
        <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;

 

• React Developer Tools
  • 웹 페이지에서 개발자 모드를 켜서 react를 클릭하면 react를 분석할 수 있다. → props의 값도 실시간으로 변경할 수 있다.
• Component 파일로 분리하기
  1. component라는 폴더를 만든다
  2. 그 안에 컴포넌트 파일을 각각 하나씩 만든다.
  3. 그리고 app.js에 아래의 코드를 삽입한다. 

import Subject from “components/Subject”;