Props in React

• Props == Properties
• Component가 가지는 속성

• Component에서 변동되지 않는 데이터를 다룰 때 사용

  • 컴포넌트란 reusable한 작은 UI 구성 요소

const element = <Welcome name="Sara" />;

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

//위 Welcome 은 function Welcome이고
//name="Sara"는 {props.name}이다.

• props는 component를 사용할 때 설정해주면 된다.

State in React

• Component의 상태이며, 유동적인 데이터를 다룰 때 사용
• 객체의 형태
• Stateful한 컴포넌트를 사용할때는 React.Component 사용

    class StateExample extends React.Component {
       constructor(props) {
          super(props);

          this.state = {
             header: false
         };
       }

• setState 는 비동기 함수

props & state diff

parent component에 의해 값이 변경됨 > props

component 내부에서 변경됨 > state

Life Cycle in React

• React Component들의 말 그대로 생명 주기
• Components들이 실행, 업데이트 및 삭제되는 과정
• 내장 method
• constructor, componentDidMount, render, componentDidUpdate, componentWillUnmount

• constructor()

  • constructor(props)
  • state를 구현하지 않았거나, 메소드 바인딩하지 않았다면 constructor를 구성하지 않아도 됨
  • constructor는 mount되기 전에 실행됨.?
  • 리액트 컴포넌트 하위에 constructor를 구현하려면 꼭 super(props) 작성해야함.아니하면 this.props === undefined

• React Constructor 사용 이유 두가지

  • local State
  • EventHandler 바인딩