[React] Class Component 내부 순차 실행 (in React 18) 1편

약 3달 만의 글, 그리고 짧은 근황

정말 오랜만에 블로그에 글을 남기게 되었다. 글또에서 그랬던 것처럼, 취업 후 첫 1달까지는 격주로 글을 업로드했다. 하지만 그 후로는 점점 늘어나는 업무에 따라가기 바빠 한동안 글을 쓰지 못했다.

 

그리고 글을 안 쓰게 된 시간이 길어질수록 '이래서 글을 써야 하는구나'라는 것을 깨달았다. 이번 글은 단순히 학습의 연장선이나 일상 공유가 아니라 업무를 하는 데 있어 반드시 정리가 필요하다고 느껴 작성했다.

 

'어?'

취업 후 1달이 지난 시점부터 본격적으로 전에 해보지 않은, 프론트엔드와 모바일 개발 업무도 맡게 되었다. 지금도 시간이 날 때마다 강의를 듣고 있고, 학습용으로 1인 사프도 시작해서 처음보다는 나아지긴 했지만, 여전히 이해가 가지 않는 내용들이 너무 많았다.

 

가장 이해가 가지 않았던 것은 '순차성'이었다. 그전까지 내가 주로 다뤘던 Java, C++의 경우 (하나의 클래스를 기준으로) 먼저 작성된 코드가 먼저 실행됐었기 때문에 '코드는 작성한 순서대로 실행된다'는 사실에 별 의구심을 품지 않았다.

 

물론 React로 개발했을 때도 마찬가지였다. 하지만 프론트엔드 업무를 시작하고 얼마 지나지 않아 이상한 점들을 발견할 수 있었다.

 

프로젝트 파악을 위해 이 기능 저 기능을 실행하던 중, 몇몇 페이지 간 전환에서 흰 화면이 보인다던가, 의도와 관계없는 반복적인 새로고침 등을 발견했다.

 

심지어 같은 클래스 내부의 컴포넌트 간 실행 순서도 보장되지 않았다. 버그를 해결하기 위해 문제가 발견된 클래스 내부 함수와 컴포넌트의 시작과 끝에 간단한 출력 로그를 작성한 결과, 실행할 때마다 로그 출력 순서가 일정하지 않다는 것을 발견했다.

 

같은 클래스 내부에서조차도 실행 순서가 일정하지 않으니 버그가 생기는 것은 당연했고, 버그가 생기니 테스트 환경 별로 다른 현상이 나타난 것은 당연한 일이었다.

 

'왜?'

결과적으로 앞선 문제점은 각 함수와 컴포넌트의 실행 여부를 판단하는 변수를 추가해서 해결할 수 있었다. 하지만 한 곳에서 문제를 해결하고 나니 다른 곳에서 동일한 문제가 반복해서 발생했다.

 

그래서 '이런 현상에 대한 근본적인 해결책이 있지 않을까?'라는 의구심이 생겼다.

 

[개발] JavaScript or TypeScript?

 

이전에 작성한 글 중에 'Callback, Promise, async/await 간 차이'를 정확하게 파악하지 못하고 끝을 맺은 글이 있는데, 공부를 하다 보니 이 내용과도 연관이 있는 것 같아 좀 더 정리를 해서 2편에 업로드할 계획이다!