🔗 생활코딩 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>
    );
  }
}