[React] Rerendering(리렌더링)

리액트를 공부하다보면, 효율성이라는 단어를 빼놓을 수가 없는 것 같다. 저번에 정리했던 DOM에서의 가상 돔도 그렇고, 어떤 한 개념을 공부할 때마다 그 개념이 효율적이게 도와준다고 하는 것이 많다는것이다.

나는 전에 이런 질문을 받은 적이 있다. '리렌더링이 뭔지 아시나요?'

이 글을 보는 여러분들은 무슨 대답을 하겠는가?

나는 그때는 부끄럽지만 리렌더링이 그냥 렌더링을 다시한다는 거 아닌가? 이렇게 생각했었다.

사실 말 뜻은 그렇다. 하지만, 질문의 의도가 과연 진짜 뜻을 물어보는 것이었을까?

이때 모든 질문에 답을 개떡같이 한 나는 집에 와서 차분히 다 적어놨었다. 그리고 다시 공부하면서 채워나가기 시작했다.

리렌더링은 무엇인지 근본부터 알아야하며, 왜 이걸 알아야하는지, 어디에서 이 개념이 쓰이는 건지 등 내가 얼마나 진심으로 사용하고 느꼈던 바를 곁들여서 말해야했다.

두번 다시 같은 실수를 반복하지 않기 위해서 이렇게 정리해보려고한다.

이래서 진짜 경험이 중요하다 생각했다. 좋은 경험이든 나쁜 경험이든 교훈을 느끼는 것 같다.

 

이번에 이 리렌더링을 찾아보다가 정리를 잘 해놓은 블로그가 있길래 참고해서 작성하였다.

---

여기서 컴포넌트와 render함수를 사용해서 설명을 계속하기 때문에 계속 컴포넌트와 렌더함수에 대해서 짚고 넘어가겠다!

컴포넌트

부품이라고 볼 수 있다.

버튼, 텍스트 박스 등의 요소들을 컴포넌트로 정의해서 공장처럼 UI를 설계할 수 있다. 이는 재사용이 용이하게 만들어주며, 무엇보다 컴포넌트 내에 생김새 및 작동방식을 정의해준다.

Render 함수

UI를 나타낼 때 눈에 보이는 화면을 구성해주는 렌더링이 필요하다.

리액트에서는 render함수가 그 역할을 한다.

render함수는 컴포넌트가 어떻게 생겼는지 정의하고, 뷰의 구성과 작동 방식에 대한 정보를 지닌 객체를 반환한다.

---

초기 렌더링

render함수로 컴포넌트의 정보를 이용해 화면을 구성(렌더링)한다.

렌더링이 되면, render함수가 반환한 객체의 정보를 이용하여 문자열 형식의 html 코드를 반환해서 특정 DOM에 주입한다.

 

1. 컴포넌트 정의
2. 컴포넌트의 정보를 이용해 렌더링
3. 문자열 형식 html 코드 반환
4. DOM요소에 주입

리렌더링

리액트에서 뷰를 업데이트 할 때를 리렌더링한다고 한다. 이것은 전에 DOM 개념을 공부했던 것을 여기에 접목시키면된다! 리렌더링을 하면, 뷰를 변형시키는 것으로 보이나 사실 render함수로 인해 새로운 요소로 갈아끼워지는 것이다. 

데이터를 업데이트했을 때, 컴포넌트는 render함수를 재차 호출해서 새로운 뷰를 생성한다. 이것은 DOM을 계속 새로 갈아야하는 것과 같은 것처럼 과도한 사용으로 효율성이 굉장히 떨어진다. 이를 리액트에서 가상 DOM을 사용해서 최종적으로 변한 부분만 DOM에 적용하듯이, 이전에 생성한 컴포넌트 정보와 다시 렌더링한 정보를 비교해 최소한의 연산으로 DOM트리를 업데이트하게 된다고 보았다.

 

정리하면,

1. 데이터의 업데이트
2. 업데이트된 데이터를 이용한 render함수의 리렌더링
3. 이전의 컴포넌트, 리렌더링된 컴포넌트의 차이 비교
4. 바뀐 요소들만 DOM에 반영

---

리렌더링을 하는 상황

• 자신의 state 값 변경
• 부모 컴포넌트의 리렌더링
• 자신이 전달받은 props 값 변경
• 강제 업데이트(forceUpdate) 실행시