😏 Component

React app은 component로 만들어졌다. component는 재사용이 가능한 코드의 묶음 같은것으로 하나의 일을 수행한다. 그리고 그 일은 HTML을 re-rendering 하는 것을 의미한다.

• import React from 'react': 이 코드는 React라는 이름의 변수를 생성한다. 이렇게 생성한 변수는 JavaScrip object library를 불러오는 코드이다.(ex: React.createElement(), React.Component)

• import ReactDOM from 'react-dom: React와 관련이 있는 method를 불러오는 코드이며 'react-dom'은 DOM과 상호작용 할 수 있는 DOM에 특화된 method이다.(ex:ReactDOM.render())

• class YourComponentNameGoesHere extends React.Component {}: 사용자 지정 component의 class를 만들 때 사용하는 문법이다. 이 때 compolnent class의 이름은 UpperCamelCase로 작성해야 한다.(ex: MyComponentClass) 그 이유는 기존의 JSX element와 구분하기 위함이다.

🧐 Import/Export

React.js를 사용할 때 JavaScript 파일은 서로 다른 파일들에 기본적으로는 접근할 수 없는 상태이다. 당신이 만든 component들을 유기적으로 사용하기 위해서는 import/export 선언이 필요하다. import는 export와 항상 함께 사용된다.

[Named exports]

• import: import를 사용하려면 . 또는 / 형태의 file 경로를 입력해야하는데 그 때 뒤에 붙는 확장자 명은 생략이 가능하며(./NavBar.js → ./NavBar) import의 이름은 변수/함수/Class 이름으로 지정하고 {}를 사용해야 한다.

 import { NavBar } from './NavBar.js';
 import { NavBar } from './NavBar';

• export: export 선언은 다른 곳으로 code를 공유하는 것을 가능하게 해주며 export가 필요한 코드문 바로 뒤에 작성된다. 이때 export는 var, let, const, function, class 등 어떤 것도 가능하며 같은 파일에서 2개 이상의 export도 가능하다.

 export const alsoRan = 'TimeCube';

🙉 Render 함수

class를 생성할 때 class body 부분에는 render() method가 있어야 하고 ①method는 return을 꼭 포함해야 한다. 보통 return 문은 JSX 코드를 return 한다. render 함수는 class로 작성된 component가 수행하는 일을 정의한다.

class ComponentFactory extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

② render logic이 실행되기 전의 logic은 reder method 안에서 진행되어야 한다.

class Random extends React.Component {
  render() {
    // First, some logic that must happen
    // before rendering:
    const n = Math.floor(Math.random() * 10 + 1);
    // Next, a return statement
    // using that logic:
    return <h1>The number is {n}!</h1>;
  }
}

⁎잘못된 방식: render() 바깥의 변수 선언은 syntax error를 발생시킨다.

class Random extends React.Component {
  // This should be in the render function:
  const n = Math.floor(Math.random() * 10 + 1);

  render() {
    return <h1>The number is {n}!</h1>;
  }
};