React Component

React.createElement

React.createElement() 는 리액트에서 제공하는 함수다.
JSX 라는 쉬운 문법이 존재하지만 그 원리는 React.createElement 에 있으므로

이 함수를 배울 필요가 있다.

React.createElement 에는 3가지 인자가 들어간다
Type / props / ...children

Type
태그 이름 문자열 | 리액트 컴포넌트 | React.Fragment

props
리액트 컴포넌트에 넣어주는 데이터 객체

...children
내용 혹은 자식 요소

type에 html 태그를 문자열로 넣어주고 자식요소가 있으면 ...children 에 넣어준다.

React.createElement('div',null,'안녕하세요')

다만 내용이 조금만 복잡해져도 React.createElement() 안에 또 React.createElement()
를 써야 되기 때문에 JSX 로 쉽게 표현을 해준다.

state

state - 컴포넌트 내부에 존재하는 데이터로 상태를 의미한다.

선언방법

• state 는 constructor 함수 안에다 this.state 를 선언 하는 방법이 있고,
• 컴포넌트 내용에 바로 선언하는 방법이 있다. state ={}

state 는 직접 변경하지 않고 setState() 함수를 사용한다.
이유는 직접 변경을 하면 리액트에서 인식하지 못하고 render가 동작하지 않기때문에 화면이 바뀌지 않는다. setState를 사용 하고 자동으로 최적화 까지 하는 리액트의 방식에 어긋난다.

제어방법

• 새로운 객체로 할당

click = (() => {
  this.setState({
    count : this.state.count +1
  })
})

• 변수에 넣고 리턴

 click = (()=>{
  this.setState((pre)=>{
    const newState = {count:pre.count +1}
    return newState
  })
})

props

props - 컴포넌트 외부에서 컴포넌트에게 전달해주는 데이터.

추가방법

• 컴포넌트 옆에 추가
  • 인라인 방식으로 직접 삽입 하거나
  • 위에 함수로 빼서 불러온다.
    
    
• 기본값 프롭스
  • 컴포넌트.defaultProps={} 를 사용한다 (클래스,함수)
  • static defaultProps={} 를 사용한다 (클래스)

EventHandling

• 카멜케이스로만 사용한다.
• 이벤트에 연결된 자바스크립트 코드는 함수다.
• 실제 DOM 요소에만 사용 가능하다
  • 컴포넌트에 사용하면 프롭스로 전달된다.

보통 인라인 요소에 직접 작성하기보다는 따로 빼서 작성하는데
2가지 방법이 있다.

• 메서드로 함수를 만든다음, 생성자 함수를 만들고 바인드 함수로 연결하는 방법

this.click =this.click.bind(this)

• 생성자 함수 없이 메서드를 화살표 함수로 사용 하는 방법

라이프사이클

라이프 사이클은 컴포넌트가 생성된후 소멸할때까지의 삶을 의미한다.

16.3 이전까지는 아래와 같은 형태를 띤다.

초기화 - 마운팅 - (if props | states 가 업데이트될경우) 업데이트 - 언마운팅

16.3 이후의 라이프 사이클

• 생성자
  ComponentWillMount -> getDerivedstateFromProps

• 업데이트
  componentWillReceiveProps -> getDerivedStateFromProps
  componentWillUpdate -> getSnapshotBeforeUpdate