React. 002

Props와 State / LifeCycle

Props

부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용된다.

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트를 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props”라고 합니다.

리액트공식문서참고

class MyName extends Component {

    static defaultProps = {

         name: ‘기본이름’

    }

    render(){

        return(

            <div>안녕하세요? 제 이름은 {this.props.name}입니다.</div>

        );

    }

}

함수형 컴포넌트

단순하게 Props만 받아와서 보여줄 때에 사용한다.

import React from 'react';

const MyName = ({ name }) => {

  return <div>안녕하세요! 제 이름은 {name} 입니다.</div>;

};

MyName.defaultProps = {

  name: 'jiin'

};

함수형 컴포넌트와 Class형 컴포넌트의 차이점은?

-> 함수형 컴포넌트엔 state 기능, lifecycle 기능이 빠져있다.

함수형 컴포넌트는 초기 마운트 속도가 미세하게 더 빠르며 불필요한 기능이 없기 때문에 메모리 자원을 덜 사용한다. 단순히 어떠한 값을 받아와서 보여주기만 하는 용도라면 함수형 컴포넌트로 만들어주도록 한다. 단, 컴포넌트 수가 방대하지 않을 경우엔 성능차가 그렇게 나지는 않는다. (이때의 이점은 컴포넌트를 간단하게 만들 수 있다는 점) 추후엔 컴포넌트를 만들 때 컴포넌트 기능과 어떻게 보여지는 지를 따로 따로 작업하게 된다. (presentational component / container component)

State

state는 컴포넌트 내부에서 변경할 수 있으며, 변경할 땐 언제나 setState라는 함수를 사용한다.

리액트공식문서참고

LifeCycle

컴포넌트가 브라우저 상에서 나타날 때, 업데이트 될 때, 사라질 때

중간 과정에서 뭔가의 작업을 하고 싶을 때에 사용한다.

리액트공식문서참고

Mounting  : 컴포넌트가 브라우저 상에 나타남

Updating : 컴포넌트의 props 혹은 state가 바뀌었을 때

Unmounting : 컴포넌트가 브라우저 상에서 사라짐

constructor

컴포넌트가 처음 브라우저 상에 나타날 때 가장 먼저 실행되는 함수

컴포넌트가 가질 state의 초기 설정, 미리 해야 하는 작업 처리

getDerivedStateFromProps

props로 받은 값을 state로 동기화 시키고 싶을 때

마운팅 과정에서, 업데이트 과정에서 모두 사용됨

render

어떤 DOM을 만들게 될지, 내부의 태그들은 어떤 값을 전달할지를 나타냄

componentDidMount

컴포넌트가 실제로 브라우저 상에 나타나는 시점

주로 이벤트를 listening한다던지 api를 요청

shouldComponentUpdate (중요)

컴포넌트가 업데이트 되는 성능을 최적화 하고 싶을 때 사용한다.

만약 부모컴포넌트가 리렌더링이 되면 자식컴포넌트들도 모두 렌더함수가 실행되도록 되어 있다. (일단 virtual DOM에 모두 그려둠)

렌더 작업이 불필요할 경우 virtual DOM에 렌더작업을 하지 않도록 한다.

getSnapshotBeforeUpdate

렌더링한 결과물이 브라우저 상에 나타나기 바로 직전

(ex:스크롤의 위치, 해당 DOM의 크기)

componentDidUpdate

업데이팅 작업을 마치고 컴포넌트가 업데이트 되었을 때

(ex:state가 바뀌면 어떤 작업을 하겠다고 정의)

componentWillUnmount

컴포넌트가 사라지는 과정에서 호출됨

리스너를 없애는 작업

componentDidCatch

에러 발생 시 버그를 잡아줌