React에서 렌더링을 두 번 하는 이유

 

리액트로 개발을 하다보면 렌더링을 두 번 하는 것을 확인할 수 있습니다.
왜 렌더링을 두 번씩이나 하는지 궁금해서 검색해보니, Strict Mode 때문이라는 걸 알 수 있었습니다.
그럼 Strict Mode가 뭐길래 이렇게 개발자를 귀찮게 하는걸까요?

 

 

 

Strict Mode

 

 

Strict Mode란 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. 개발 모드에서만 활성화되며, 프로덕션 모드에서는 영향을 끼치지 않습니다.
Strict Mode를 고려하는 것은 너무 귀찮은 일인데, 그럼 Strict Mode를 주석 처리해서 두 번 호출하지 않도록 설정하면 끝나는 일일까요?

정답은 아니오 입니다. 왜 그러한지를 이해하려면 리액트의 철학을 이해해보면 쉽습니다.
하단은 글쓴이가 이해를 돕기 위해 생각한 이야기입니다.

 

 

 

왜 두 번이나 호출할까?

 

리액트는 상태를 그리는 라이브러리입니다.
렌더링 할 때에 영향을 주는 것은 오직 상태뿐이고, 상태가 바뀌지 않는 이상 리액트는 몇 번을 렌더링하더라도 똑같은 뷰를 반환합니다.
이것을 순수한 계산 (Pure Calculation) 이라고 합니다.

그런데 개발자의 실수 등으로 인해 useEffect에서 상태를 바꾸는 행위를 하기 시작했습니다.
useEffect는 렌더링 이후에 부가적으로 해야할 일 (Side Effect) 을 처리하는 것이지 상태를 바꾸는 훅이 아니죠.
그러니 useEffect를 몇 번 호출하건 항상 같은 결과를 반환해야 합니다. 본래 의도대로라면요.

렌더링 횟수에 따라 상태 값이 바뀌는 일이 잦아지고, 사람들이 실수를 하기 시작하니,
리액트에서 개발자들이 실수하지 않도록 Strict Mode에서는 두 번 실행하는 것입니다.

 

 

 

앞으로 무조건 두 번씩 호출할거야. 여러 번 호출했다고 렌더링하는 결과가 달라져선 안 돼.
네가 만약 잘못 개발했다면 값이 파바밧 바뀌는 것이 눈에 보일거야.

 

 

이런 의도입니다. 개발 시의 오류를 잡기 위해서라도 Strict Mode의 설정을 끄지 마시고,

Strict Mode가 적용된 상태에서 올바르게 코드 짜는 습관을 기르는 것이 좋을 것 같다는 의견입니다.

 

 

 

 

 

참고자료

참고자료1

참고자료2