KimSangLab

LifeCycle API는 컴포넌트가 브라우저에 나타날때, 사라질때, 업데이트 될때 호출되는 API를 말한다. 

1. constructor

  => 컴포넌트가 새로 만들어 질때 호출되는 함수 

2. componentWillMount

  => 컴포넌트가 화면에 출력되기 직전에 호출되는 함수. v16.3 에서는 해당 API가 deprecated 됨.

3. componentDidMount

  => 컴포넌트가 화면에 출력될때 호출되는 함수. 외부 라이브러리 연동 및 데이터 요청등에 주로 사용.

4. componentWillReceiveProps 

  => 새로운 props를 받게 되었을때 호출. 주로 state -> props에 따라 변해야 하는 로직을 작성함. 새로 받게될 props는 nextProps로 조회 가능 하며 this.props는 변경전 값임. 

5. componentWillUnmount

  => 등록한 이벤트 제거 및 사용한 라이브러리 dispose등 호출하는데 이용함.

1. props 

  => 부모 컴포넌트가 자식 컴포넌트에게 주는 값. 자식 컴포넌트는 받아온 props 값 수정 불가 

  => 받아온 값은 this. 키워드를 통해 확인 가능함.

  => static defaultProps 를 통해 기본 props 설정 가능 

2. state 

  => 컴포넌트 내부에서 선언하며 내부에서 값 변경 가능함. 

  => state = { 변수 : 값} 형태로 선언함.

  => state 값을 변경하고 싶은 경우 this.setState 를 사용. 해당 함수를 거치면 컴포넌트가 렌더링 되도록 설계 되어 있음.

1. let / const 

  => const 로 변수를 정의하면 해당 변수에는 값을 재할당 할 수 없다. 

  => let 또는 var로 선언된 변수는 재할당 가능하며, let으로 선언된 변수는 선언된 블록에서만 사용 가능하다.

2. 모듈 불러오기 

  => 컴포넌트와 자바스크립 모듈을 내보내기 위해 CommonJS 모듈 문법을 주로 사용 하지만 ES6 모듈 문법에서는 export 와 import 문법을 사용한다.

  => import Component from 'Path'

       class MyComponent extends Component{

      .....

      } 

       export default MyComponent;

3. 비 구조화 

  => react는 import 할때 리액트 객체 자체가 넘어 온다. 

    import React from "react";

    let Component = React.Component; 를 아래 문법으로 대체할 수 있다. 

  => import React, {Component} from "react";