[React] rerendering의 조건

d3를 사용해서 작업을 하다 보니, 데이터가 업데이트 됨에 따라서 화면을 갱신해야 할 일이 생겼다. 그런데 의도대로 되지 않아서 리액트의 렌더링 조건을 다시 찾아볼 겸 아래의 내용을 정리해 보았다.

 

 

1. state의 변경이 있을 때

유동적인 데이터를 저장하기 위해서는 state라는 것을 사용하고, 이것을 업데이트 해주기 위해서 setState 라는 메서드를 사용한다. 이것을 사용해서 값이 바뀔 경우 감지하고 리렌더링이 실행된다.

 

2. 새로운 prop이 들어올 때

전달 받은 props 값이 업데이트 되면 리렌더링이 실행된다.

 

3. 부모 컴포넌트가 렌더링이 될 때

값이 업데이트 되지 않더라도 부모 컴포넌트가 리렌더링이 되면 같이 리렌더링이 된다.

 

4. shouldComponentUpdate에서 true가 반환될 때

각 컴포넌트에서는 shouldComponentUpdate라는 메소드를 가지고 있는데, 이는 state나 props로 받은 값이 변경될 때 true가 된다. 이로 인해 리렌더링이 시작되는데, 이를 막고 싶다면 false로 설정해 줄 수 있다.

 

5. forceUpdate가 실행될 때

강제로 렌더링을 시켜주는 메서드다. 그러나 성능에 문제가 될 수 있기 때문에 권장하지는 않는다.

 

문제 해결 (?)

문제는 버블 차트에 뿌려지는 데이터들은 바뀌는데, 버블 차트의 자체적인 <모양>은 바뀌지 않았다. 안에 내용들만 바뀌는데, 문제는 데이터가 상황마다 달라서 (버튼을 누를 때마다 동작하는 것이라서) 데이터가 많을 때도 있고 적을 때도 있다. 그에 따라 유동적으로 d3 버블차트가 화면에 다시 그려져야 하는데 d3 특성상 componentDidmount로 첫 렌더링 시에 박아버려서 그 이후로 props 값이 바뀌어도 모양 자체는 다시 바뀌지 않는 문제 같았다.

 

이러한 조건을 찾아보고 마지막 수단인 forceUpdate까지 사용을 해 봤음에도 불구하고 버블 차트는 바뀌지 않았다. 그래서 해결 방법은 할 수 없이 조건에 따른 (5개정도였으니) 버블차트들을 모두 먼저 만들어 두고, 조건에 따라서 display 속성을 주어 그때그때 보여주는 형식으로 동작을 처리했다. 더 좋은 효율적인 방법이 있었을 것 같은데 시간이 넉넉하지 않아서 다른 방법으로 해결하지 못한 것이 아쉽다. 다음에 리팩토링을 할 때 조금 더 괜찮은 방법이 있을지, d3를 조금 더 살펴보고 생각해 봐야겠다.

 

 

참고글

(번역) React는 컴포넌트를 언제 다시 리렌더링 할까요?