1. Basic

📄 JSX

• React는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리다. 하나의 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 것을 가능케하는 프레임워크다
• React에서 HTML을 표현할 때 JSX를 사용한다
• 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데 빌드 시 Babel에 의해 자바스크립트로 변환된다
• 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다

---

클래스형 컴포넌트 vs 함수형 컴포넌트

• 리액트를 사용하여 프론트 개발을 할 때 두 가지 방법으로 컴포넌트를 선언할 수가 있다 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다
• 컴포넌트는 반드시 하나의 최상위태그만 사용해야 한다
• 이 강좌에선 클래스형 컴포넌트를 사용하여 강의를 진행한다

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

class App extends Component() {
  render() {
    return (
      <div className="App">

      </div>
    );
  }
}
export default App;

// function type
import React, { useState } from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
    
    </div>
  );
}
export default App;

---

export & import

• export 내보낼 값
  • 하나의 파일 내에서 여러 변수 또는 클래스 등을 내보낼 때 사용
    
    
• export default 내보낼 값
  • 하나의 파일 내에서 단 하나의 변수 또는 클래스 등을 내보낼 때 사용
    
    
• import 가져올 값 from ./파일이름 (같은 위치에 있는게 아니면 경로도 써준다)
  • 선택된 파일에서 선택된 코드를 가져올때 사용
  • export로 내보내진 값을 가져올 땐 {가져올 값}을 중괄호로 감싸서 불러와야 한다

---

props

• 부모 컴포넌트가 자식 컴포넌트에게 주는 값 (읽기전용)
• 자식 컴포넌트에서는 props를 받아오기만하고 받아온 props를 직접 수정할 수 없다
  • 부모 컴포넌트 : <컴포넌트이름 props이름 = “값” />
  • 자식 컴포넌트 : {this.props.props이름}

// 예시
// 부모 컴포넌트
class App extends Component {
  render() {
    return (
      <div className="App">
      // <컴포넌트이름(Subject) props이름(title)="값(WEB)" />
        <Subject title="WEB" sub="world wide web!" />
      </div>
    );
  }
}

// 자식 컴포넌트
class Subject extends Component {
  render() {
    return (
      <header>
        <h1>{this.props.title)</h1>  // WEB
        {this.props.sub}  // world wide web!
      </header>
    );
  }
}

---

state

• 컴포넌트 자신이 가지고 있는 값으로 변경할 수 있다 (setState() 함수사용)
• 컴포넌트가 실행될 때 constructor 함수가 있으면 reder함수보다 먼저 실행되면서 초기화를 담당한다
• 초기화시켜주고 싶은 코드는 constructor 안에다가 코드를 작성한다
• 리액트에서는 props의 값이나 state 값이 바뀌면 해당되는 컴포넌트의 render함수가 호출됨에 따라서 그 render함수 하위에 있는 컴포넌트의 render함수도 다시 호출된다

// 예시
class App extends Component {
  constructor(props) {  // props를 사용하기 위해 필요
    super(props);
    
    this.state= {  // state값 초기화
      subject:{title:'WEB', sub:'World Wid Web'}
    }
  }
  render() {
    return (
      <div className="App">
        // state 값을 Subject라는 컴포넌트의 props의 값으로 줬다
        <Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub}
        />
      </div>
     );
  }
}

---

key

• 각각의 리스트의 항목들은 key라고 하는 props를가지고 있어야 한다
• 리액트가 내부적으로 필요해서 요청하는 것
• 각각의 목록을 다른것들과 구별할 수 있는 식별자를 key={식별자} 적어주면 된다

// 예시
// 부모 컴포넌트
class App extends Component {
  constructor(props) {
    super(props);
    this.state= {
      contents:[
        {id:1, title:'HTML', desc:'HTML is ...'},
        {id:2, title:'CSS', desc:'CSS is ...'}
      ]
    }
  }
  render() {
    return (
      <div className="App">
        <TOC data={this.state.contents} />
      </div>
     );
  }
}

// 자식 컴포넌트
class TOC extends Component {
  render() {
    let lists = [];
    let data = this.props.data;
    let i = 0;
    while(i < data.length) {
      lists.push(<li key={data[i].id}><a href=
      {'/content/'+data[i].id}>{data[i].title}</a><li>);
	  i++;
	}
    return (
      <nav>
        <ul>
      	  {lists}
        </ul>
      </nav>
    );
  }
}