constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

render() 

, React가 dom 노드 또는 사용자가 정의한 컴포넌트를 만들도록 지시하는 React 엘리먼트이다.

배열과 Fragment.render()를 통하여 여러개의 엘리먼트를 반환한다.

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

위와 같으며 자세한 참고는 https://ko.reactjs.org/docs/fragments.html

Constructor()

메서드를 바인딩하거나 state를 초기화하는 작업이 없다면 해당 React 컴포넌트에는 생성자를 구현하지 않아도된다. React.Component를 상속한 컴포넌트의 생성자를 구현할땐 다른 구문에 앞서 super(props)를 호출해야한다. 그렇지 않다면 this.props가 생성자내에 정의되지않아 버그로 이어질 수 있다.

보통 두가지의 목적으로 사용될 수가 있다. 'this.state'에 객체를 할당하여 지역 'state'를 초기화 혹은 인스턴스에 '이벤트 처리' 메서드를 바인딩

또 생성자 내부에서 setState()를 호출하면 안된다. 컴포넌트내에 지역 state가 필요하다면 생성자 내의 this.sate와 초기값 state를 할당받는다.

constructor를 안 써도 되는가?

class 컴포넌트를 쓸땐 constructor를 안쓸 수도 있지만, 쓰면 더 코드를 이해하기쉽다.
그리고 또 안정적으로 코드를 쓸수 있다. (이벤트 구현시 더 유리하다. this와 bind)

Props ?

Props가 immutable 한것은 굉장히 중요하다..!
내부의 내용은 변할수가 없다..!
(바꿀수는 있지만 자식 컴포넌트에서 바뀌는 것이 아님..)
props는 부모 컴포넌트에서 전달받고, state는 컴포넌트 내부에서 다뤄진다.

import React from 'react';

export const Questions = (props) => {
	props = 'hello';
    return <div className ='questions'>{props.hello}</div>;
}

변화를 시키면, 리액트의 원칙을 지키지 않았기 때문에 데이터의 오류가 일어난다..
즉 지정한 것을 전체페이지에서 인식을 할 수있어야할텐데, 중간에 바꿔버리면
크나큰 차질을 빚을수 있다..

흐름이 맞냐 아니냐의 문제..
즉 props는 바꾸면안되고, immutable 해야한다.또, Props는 '읽기전용' 이며, 모든 React 컴포넌트는 자신의 props를 다룰때 반드시 순수함수처럼 동작해야한다.

props의 속성은 여러개 가질 수 있다.
(키와 밸류를 가지고있음)

그외..

자바스크립트로 '구조분해' 하여 할당해 줄 수 있다. 리액트의 특징이라기보단 자바스크립트의 특징에 가깝다. 그런점에서 중요함.

const hello = ({hello,world}) => {
	console.log(hello, world)
    }
 hello({
	hello : 'world',
    world : 'codeStates'
    })
 // 결과값. 
world codeStates 

"나의 새 트윗"이라는 문자열을 div태그 안쪽에 출력하려 했을때
문자열을 div 태그 안쪽에 출력하기위해선
props.children 속성을 만들었다. 공식문서에 규정됨

https://ko.reactjs.org/docs/components-and-props.html
'컴포넌트 추출 항목'

문득 궁금한것이 class일경우,  React.component에서 상속을 받아 생성자와 슈퍼에서
(Props)를 끌어다 쓰는듯 한데 이때 정확히 
Props는 React.component에서 무슨 값을 가져오는것일까요 ? 문득 궁금합니다.. 

socrative 오늘 정리하신것 있는지 물어보기! 

내 질문이었다. 하지만 공식문서에서 답을 찾아볼수 있었다.

https://ko.reactjs.org/docs/react-component.html

State ?

특징 ?

constructor 에서 this.state로 할당 할수 있음
setState에서 인자가 함수도있고 객체도 된다
setState 비동기로 작동이된다.
setState를 사용해야 컴포넌트가 새로운 값을 렌더링한다.
setState는 React LifeCycle의 핵심이다.
컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있다.

1. 직접 state를 수정할수가 없다.

// Wrong
this.state.comment = 'Hello';

대신, setState() 를 사용한다.

// Correct
this.setState({comment: 'Hello'});

this.state를 지정할 수 있는 유일한 공간은 바로 constructor이다.

2. state 업데이트는 비동기적일 수도 있다.

React는 성능을 위해 setState() 호출을 단일 업데이트로 한꺼번에 처리 할 수 있다.

this.props와 this.state가 비동기적으로 업데이트 될 수 있기 때문에 다음 state를 계산할때
해당 값에 의존해서는 안됨..

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

함수를 인자로 사용하는 다른 형태의 setState()를 사용한다. 업데이트가 적용된 시점의 props를
두번째 인자로 받아들임.

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

3. state 업데이트는 병합이 된다.

 constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

이렇게 다양한 독립변수를 포함할 수 있는데, setState() 호출로 이러한 변수들을 독립적으로 업데이트 할 수 있다.

  componentDidMount() {
   fetchPosts().then(response => {
     this.setState({
       posts: response.posts
     });
   });

   fetchComments().then(response => {
     this.setState({
       comments: response.comments
     });
   });
 }

4) 그외 질문

this.state를 할당할 수 있는 것은 constructor 뿐이다 ?

정답은 맞다.. 하지만 최근에 작동이 된지 얼마안되었다.
표준적으로 Constructor에서 작동하는것이 표준이다.

state = { 
hello : 'world', }

<FormattedDate date={this.state.date} />

FormattedDate 컴포넌트는 date를 자신의 props로 받을 것이고 이것이 Clock의 state로부터 왔는지, Clock의 props에서 왔는지, 수동으로 입력한 것인지 알지 못한다.

function FormattedDate(props) {
 return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}