리액트 렌더링 조건

리액트를 사용하는 이유 중 하나인 SPA(single page application)를 구현하기 위해서는

렌더링 조건을 알아야 원활하게 사용할 수 있는 것 같다.

 

쉽게 이용할 수 있는 조건은 아래와 같다.

1. state(상태) 변경이 있을 때

react 에서는 유동적인 데이터를 저장하기 위해 state를 사용한다.

react를 시작하면서 접하게 되는 useState 등이 이러한 상태라고 볼 수 있다.

useState를 통한 state 값을 변경하기 위해서는 setState()를 이용해야 react가 state의 변경을 감지할 수 있다.

- redux 등 전역 상태관리 라이브러리 또한 state 업데이트에 사용되기 때문에,

전역 상태가 변경되어도 리렌더링이 이뤄진다.

 

2. props값이 변경될 때

통상적으로 props값이 업데이트될 때도 렌더링이 이뤄지진다.

 

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

props 값이 업데이트가 이뤄지지 않더라도 부모 컴포넌트가 리렌더링 된다면 자식컴포넌트 역시 리렌더링된다.

 

 

이 외에 forceUpdate로 강제 리렌더링을 시키는 방법도 있으나, 지나친 리렌더링은 성능을 악화시킬 수 있다.

필요한 상태값을 적재적소에 업데이트를 시켜주는 것이 훨씬 더 나은 방법이라고 생각한다.

혹시 redux같은 전역 상태관리 라이브러리를 사용하는데, 원하는 렌더링이 이뤄지지 않는다면 액션함수 등 상태를 관리해주는 코드가 잘못 적용돼있지는 않는지를 먼저 확인해 보는 것이 좋을 것이다.