React - props, state, life cycle

React는 html, css, javascript를 묶어서 만들기 쉽게 해주는 프론트엔드 라이브러리 입니다.

React를 사용하면, 좀 더 직관적이고, 재사용성이 높은 코드를 작성할 수 있습니다.
HTML DOM 관리가 쉬워집니다.

React에 들어가기에 앞서, 우리는 Javascript ES6에 대해 알 필요가 있습니다. React가 Javscript ES6문법을 사용하기 때문입니다. 3가지 정도가 핵심인데요, 지금부터 알아보도록 하겠습니다.

ES6

1. 변수를 선언할 때, ES6에서는 var(함수단위 변수)뿐만 아니라 let(블록단위 변수), const(블록단위 상수)를 사용한다.

2. Class 키워드를 사용한 객체 생성과 상속.
   ES6에서는 객체를 만드는 데에 Class키워드를 사용한다.
   (클래스를 만들어 인스턴스를 생성한다. 상속을 구현한다.)
   component를 만드는 데에 Class키워드를 사용한다.

3. Arrow Function
   function키워드를 사용하지 않고도 함수를 간단히 구현할 수 있다.
   () => {}
   여기서 중요한 것은 this이다.
   화살표 함수는 자신만의 this 값을 가지고 있지 않다. 그래서 바깥 메소드 정의로부터 this값을 보존하길 원할 때, 다루기 쉽다. this값은 고정된다.

나머지...
ES6 MDN을 참고하세요!

JSX

자바스크립트의 확장 문법이다.
1.반드시 하나의 엘리먼트로 감싸야 한다.(html tag를 사용한다.)
2. 내부에 javascript code를 적용할 땐, { }안에 작성한다.

const element = JSX(string도 아니고 HTML도 아니다.)(javascript 확장 문법이다.);
ReactDOM.render(렌더링할 HTML Tag, 렌더링할 위치 정하기(상위 태그))

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);


// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};
//These objects are called “React elements”.
내부적으로 이 단계를 거쳐 변환된다.

Elements

Elements는 React apps의 가장 작은 단위 블록이다.
//React elements are immutable. Once you create an element, you can’t change its children or attributes.
React elements는 변경불가한다. 일단 한 번 만들어지면 자식들과 속성들을 바꿀 수 없다.

Components

components는 javascript function이다.
UI를 독립적이고 재사용성이 높은 조각들로 나눈 것이다.

// Function components
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
// 사용자 정의 태그도 사용할 수 있다.
const element = <Welcome name="Sara" />;
ReactDOM.render(element, document.getElementById('root'));

// Class Components
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}