mount vs render

React:

리액트에서 mount 와 render의 차이

 

| 시작하기전

 

• 리액트로 개발을 하면서, redner()메소드가 불리는 렌더가 되는것과 컴포넌트가 mount 된다는 개념의 차이점이 나는 모호하게 잡혀있었다.

• 그래서 개발을 하던 중,state가 바뀌어 render가 다시 될때 특정 액션을 해줘야 할때 render 되기전에 다시 컴포넌트가 mount 되기전에 componentWillMount (deprecated 되었으니 이제는 사용 xxx ㅠㅠ) 쪽에서 해주려 했었다..ㅠ 

• 리덕스 state를 활용하지 않고 react의 state 변경시에 액션을 잡으려 해서 componentWillRecieveProps 주기를 쓰지않고 (지금까지는 리덕스를 주로 활용해왔으므로, 리덕스의 state는 props로 들어오므로 주로 이주기를 항상 활용했었다), 그러나 이번에는 react의 state 변화를 catch하려다가 지금까지 잘못잡혀있던 개념을 잡은것이다.

 

|결론

• 컴포넌트가 mount되는 것과 render가 되는것은 다르다!, 맨터음 컴포넌트가 렌더될때는 component가 mount 되지만, 다시 props나 state가 변경 되어 render될때는 mount가 되지 않는다!

• react의 state나 props 변화가 있을때는 렌더될때 컴포넌트가 다시 마운트 되는 게 아니므로, shouldComponentUpdate(nextProps, nextState) 나, componentWillRecieveProps(nextProps) 쪽에서 그 변화를 감지해 관련 작업을 해줘야하는것이다.