[React.JS] 강좌 7편 Component LifeCycle API


이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]

 

이번 강좌에서는 React.js 컴포넌트의 LifeCycle API 에 관하여 배워보겠습니다.

LifeCycle API는, 컴포넌트가 DOM 위에 생성되기 전 후 및 데이터가 변경되어
상태를 업데이트하기 전 후로 실행되는 메소드 들 입니다.

이 메소드를 왜 쓰겠어.. 쓸일이 있겠어.. 라고 생각 하실 수 있는데,
가끔 이를 사용하지 않으면 해결 할 수 없는 난관에 가끔 부딪치기도 때문에
잘 알아뒀다가 필요 할 때 사용하는것이 좋습니다.

강좌 6-2 편에서도 전화번호부를 구현 할 때, 인풋박스에 기본값을 전달 해 줄때와,
자원낭비를 줄이기 위하여 코드를 최적화 할 떄 LifeCycle API 가 사용되었답니다.

1. 시작하기

이번 강좌는 편의를 위해 jsfiddle 위에서 작업을 해보도록 하겠습니다.

F12키를 눌러 개발자 도구를 열은 후 아래 작업물의 버튼을 눌러보세요.

컴포넌트를 생성 할 때는 constructor -> componentWillMount -> render -> componentDidMount 순으로 진행됩니다.

컴포넌트를 제거 할 때는 componentWillUnmount 메소드만 실행됩니다.

컴포넌트의 prop이 변경될 때엔 componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate-> render -> componentDidUpdate 순으로 진행됩니다.

이 예제에는 없지만 state가 변경될 떄엔 props 를 받았을 때 와 비슷하지만 shouldComponentUpdate 부터 시작됩니다.

2. 정리

LifeCycle API를 정리하면 다음과 같습니다.

screenshot-from-2016-12-10-00-21-26

3. 자세히 알아보기

위 메소드들이 어떤 역할을 하는지 이름만 봐도 대충 유추 할 수 있지만.. 자세히 알아봅시다.

constructor

constructor(props){
    super(props);
    console.log("constructor");
}

생성자 메소드로서 컴포넌트가 처음 만들어 질 때 실행됩니다.
이 메소드에서 기본 state 를 정할 수 있습니다.

componentWillMount

componentWillMount(){
    console.log("componentWillMount");
}

컴포넌트가 DOM 위에 만들어지기 전에 실행됩니다.

render

컴포넌트 렌더링을 담당합니다.

componentDidMount

componentDidMount(){
    console.log("componentDidMount");
}

컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드입니다.
이 안에서 다른 JavaScript 프레임워크를 연동하거나,
setTimeout, setInterval 및 AJAX 처리 등을 넣습니다.

componentWillReceiveProps

componentWillReceiveProps(nextProps){
    console.log("componentWillReceiveProps: " + JSON.stringify(nextProps));
}

컴포넌트가 prop 을 새로 받았을 때 실행됩니다.

prop 에 따라 state 를 업데이트 해야 할 때 사용하면 유용합니다.
이 안에서 this.setState() 를 해도 추가적으로 렌더링하지 않습니다.

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState){
    console.log("shouldComponentUpdate: " + JSON.stringify(nextProps) + " " + JSON.stringify(nextState));
    return true;
}

prop 혹은 state 가 변경 되었을 때, 리렌더링을 할지 말지 정하는 메소드입니다.

위 예제에선 무조건 true 를 반환 하도록 하였지만, 실제로 사용 할 떄는 필요한 비교를 하고 값을 반환하도록 하시길 바랍니다.

예: return nextProps.id !== this.props.id;

JSON.stringify() 를 쓰면 여러 field 를 편하게 비교 할 수 있답니다.

componentWillUpdate

componentWillUpdate(nextProps, nextState){
    console.log("componentWillUpdate: " + JSON.stringify(nextProps) + " " + JSON.stringify(nextState));
}

컴포넌트가 업데이트 되기 전에 실행됩니다.

이 메소드 안에서는 this.setState()사용하지 마세요 – 무한루프에 빠져들게 됩니다.

componentDidUpdate

componentDidUpdate(prevProps, prevState){
    console.log("componentDidUpdate: " + JSON.stringify(prevProps) + " " + JSON.stringify(prevState));
}

컴포넌트가 리렌더링을 마친 후 실행됩니다.

componentWillUnmount

componentWillUnmount(){
    console.log("componentWillUnmount");
}

컴포넌트가 DOM 에서 사라진 후 실행되는 메소드입니다.

 

마치면서..

이번 강좌는 꽤나 간단했군요

위 LifeCycle API 를 숙지해놓으면 앞으로 컴포넌트를 만들 때 도움이 될 거에요.

다음 강좌에선 컴포넌트 및 DOM element 에 reference 를 달아주는 ref 개념에대하여 알아보도록 하겠습니다.

liste

  • 이성필

    항상 잘 보고 있습니다~~!!

  • 최지웅

    좋은 강좌 감사드립니다. 많은 도움이 되네요! 오타가 있는 것 같은데, 2. 정리에서 component created -> constructor 이후 componentWill’Un’Mount가 아니라 componentWillMount가 되어야 할 것 같습니다.

    • ㅋㅋㅋㅋ 아맞다!
      저번에 오프라인세미나에서 이 이미지 사용했었는뎈ㅋ 진행중에 오타낸걸 발견했다는..

      조만간 수정하겠습니다.

  • Yoon Jae Park

    render () {
    this.props.grid.map.map((obj, index)=>{
    }
    }

    componentDidMount() {
    setInterval(()=>{
    this.props.onSetInitGridData();
    },5000);
    }
    let mapStateToProps = (state) => {
    retrun {
    grid: state.gird
    }
    }

    이런 구조에서 redux에서 this.props.onSetInitGridData(); redux 이벤트로 ajax 데이터 받아서 저기 grid 데이터를 받는데 redux 이벤트에서 ajax값 다 받은다음에 렌더가 됬으면 하는데 어떤식으로 변경해야될까요? 미들웨어를 써야하는건지.. 감을 못잡겠네요

  • jinhoyim

    아 벨로퍼트님 ㅠㅠ 그림 수정해주세요.
    그림 먼저 봤다가 한참을 헤맸어요. ㅋㅋ
    글을 먼저 봤어야 했는데…

    • 오늘 꼭 수정하도록 하겠습니다. 죄송합니다!!

      • jinhoyim

        엇 죄송이라뇨. ㅎㅎ 많은 도움이 되고 있습니다.

        • 업데이트 되었습니다 🙂

          • jinhoyim

            엇 componentDidUpdate 가 잘못 표시됐어요.

          • 이런…ㅋㅋㅋㅋ 또 실수를 조만간 수정하겠습니다 다이아그램그릴때마다 집중을 못하나봐요 ㅋㅋ

          • jinhoyim

            ㅋㅋ 인간미 넘치시네요.

  • hyobin

    진심으로 감사 드립니다.

  • cyk

    궁금한게있어요~
    state를 처음 세팅할때
    constructor 가 아닌
    다른 함수에서 선언 하려면 언제 하면 돼나요?

  • 한영수

    유익한 글 잘봤습니다!

  • moonti

    좋은 강의 감사합니다. 초보자에게 정말 도움이 많이 됩니다.!
    축복 받으실겁니다.

  • yikl1004@naver.com

    많은 도움 받고 있습니다. 감사합니다.

  • Hyun-gyu Kim

    질문있습니다! componentWillRecieveProps에서 this.setState()를 해도 추가적으로 렌더링하지 않는다는게 무슨 뜻인가요? this.setState를 해서, 변화된 prop을 state에 저장하는데 위에 글에서는 무슨뜻인지 이해가 잘 가지 않네요ㅠㅠ

  • wallyPuale

    리액트와 리액트네이티브를 이용하여 앱을 만드는중입니다.
    덕분에 많은 도움 받아갑니다.

    감사합니다.