🎥 생활코딩 YouTube

1. 리액트가 없다면

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

2. 컴포넌트 만들기

1) 컴포넌트 생성

• JSX
  -유사 JavaScript 임
  -React는 JSX를 JavaScript Code로 변환하는 역할을 함
  -Facebook에서 JavaScript의 불편함을 제거하여 만든 언어
• CLS명은 대문자로 시작
• CLS내에 소속되는 함수는 앞에 function을 생략할 수 있음
• 컴포넌트는 하나의 최상위 태그를 포함해야 함

2) 컴포넌트 사용

//App.js

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

//해당 CLS를 컴포넌트라고 칭함
class Subject extends Component { 
  render() { 
    return ( 
      <header>
        <h1>WEB</h1>
        world wide web!
      </header>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject>
      		⭐//이부분에 위에서 Return한 코드가 입력됨
        </Subject>
      </div>
    );
  }
}

export default App;

3. props

🔗 Components and Props - React

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

• {this.props. -}이러한 형식으로 구성됨

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="React" sub="For UI"></Subject>
      </div>
    );
  }
}

4. React Developer Tools

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

• 브라우저에 맞는 확장 프로그램 설치
  🔗 Chrome - React Developer Tools
• 개발자 도구에 생성된 React 탭에서 React 컴포넌트를 확인할 수 있음
  👉 이러한 도구를 사용하여 문제가 생겼을 때 스스로 확인할 수 있는 능력🔺

5. Component 파일로 분리하기

1) 파일 생성

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

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

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

2) 파일 사용

//src/App.js
import React, { Component } from 'react';
import './App.css';
//⭐Subject 컴포넌트 불러오기
import Subject from "./components/Subject";

class App extends Component {
  render() {
    return (
      <div className="App">
        ⭐<Subject title="React" sub="For UI"></Subject>
      </div>
    );
  }
}

export default App;