React

• facebook
• component(컴포넌트): 사용자 지정 태그
  1. 가독성
  2. 재사용성
  3. 유지보수
• Coding
• Run
• Deploy

Coding

• 생성된 component 모두 index.html
  들어가도록 초기 설정 되어있음
• 이를 수정하기 위해서는 src 폴더 파일을 수정하여 반영시킬 수 있음
• 그 중에서 엔트리 파일, 지니 파일은 index.js

javascript 수정

ReactDOM.render(
  <React.StrictMode>
    <App />
    // 사용자 정의 component 모음 -> 실제 구현은 App.js 에서 이루어진다

  </React.StrictMode>,
  document.getElementById('root')
  // index.html id='root' div  내용을 받는다
);

• 그래서 App.js
  수정하면 반영된다

css 수정

• import 컴포넌트이름 from 파일이름(확장자명 생략 가능 ex) .js)
• import './App.css'
  js 파일에 위와 같은 css 파일이 import 있다면 App이라는 디자인을 넣는다고 생각하면 된다

Deploy(배포하는 법)

• create-react-app 개발환경은 파일의 무게가 상당히 무거운 편이다
• 개발환경 실행이 아닌 프로덕션 모드의 어플리케이션을 만들때(build 할때)
  npm run build
  build 폴더
  이 안에서의 파일은 실제 파일 내의 공백과 같은 부분을 모두 제거한다(불필요한 용량을 없애기 위해), 그래서 육안으로 알아하기 어렵다.
• 실제로 서비스할 때는 build 안에 있는 파일을 써야한다

Component

• Public 폴더는 npm run 했을때 파일을 찾는 루트

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

class Subject extends Component {
  render(){ // function 붙지만 클래스 함수안에서는 생략 가능
    return (
      // 컴포넌트를 만들때는 하나의 최상위 태그로만 시작해야한다
      <header> 
        <h1>WEB</h1>
        world wide web!    
      </header>
    );
  }
}

class Content extends Component{
  render(){
    return(
      <article>
            <h2>HTML</h2>
            HTML is HyperText Markup Language.
        </article>
    );
  }
}

class TOC extends Component{
  render(){
    return(
      <nav>
        <ul>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">Javascript</a></li>
        </ul>
     </nav>
    );
  }
}


// 컴포넌트를 만드는 코드
class App extends Component{
  // 'react' 가 가진 Component 를 상속해서 App 이라는 새로운 클래스를 만드는 것이다
  // 그 새로운 클래스에 render 라는 메소드가 존재한다
  render(){
    return(
      <div className="App">
        <Subject></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
    ); 
  }
}
// 해당 코드는 유사 자바스크립트 이다(자바스크립트가 아니다)
// html tag 문법에 맞게 사용하는 것이 아닌 그대로 가져다 쓴다
// 페이스북에서 만든 jsx 언어로 이용해 코드작성하면 create-react-app 으로 js 으로 변경해준다 


export default App;

props

• {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 = 'WEB' sub='world wide web!'></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
    ); 
  }
}

component 파일로 분리하기

• import React, (Component) from 'react';
  react 라는 라이브러리에서 component 라고 하는 클래스를 로딩
  앞쪽 React 부분은 react 활용시 필수적인 부분으로 여김
• export default 컴포넌트_이름
  어떤 요소를 외부에서 사용할 수 있게 허용하는가

State

• props: 사용자가 component 이용하는 입장에서 중요한것
• state: props 값에 따라 내부 구현에 대해 필요한 값

컴포넌트의 기본적인 동작을 바꾸고 싶을 때
사용자에게 props를 제공하고 component 조작 가능
component 내부적으로 사용하는 것들이 state
철저하게 격리시켜 양쪽의 편의성에 모두 도모하는 것

• 어떤 컴포넌트가 실행될때 render 라는 함수보다 먼저 실행되면서
  그 컴포넌트를 초기화시켜 주고 싶은 코드는
  constructor, super 안에 코드를 작성한다

class App extends Component{
  constructor(props){ // 초기화를 담당
    super(props);
    this.state ={
      subject:{title:'WEB', sub:'world wid web'}
    }
  }
  render(){
    return(
      <div className="App">
        <Subject 
        title = {this.state.subject.title} // this 활용
        sub={this.state.subject.sub}>
        </Subject>
        <TOC></TOC>
        <Content title='HTML' desc='HTML is HyperText Markup Language.'></Content>
      </div>
    ); 
  }

• state 라는 내부정보를 활용하고
  자식한테 전달할 때는 props 활용하고