처음 React를 사용할 때 App.js와 index.js의 개념도 모른 채 시작을 했었다.

styled-component와 react-router, react-query 등을 사용하기 위해 import문을 작성해야 했는데 도무지 어떤 파일에 작성해야 하는지 모르고 헤매던 몇 주 전의 내가 생생하다 🥹

그 날의 나를 되돌아보며 간단히 개념을 정리하는 시간!

Index.js

index.js 파일은 React 애플리케이션의 진입점(entry point)이며, React DOM을 초기화하고 애플리케이션을 실제로 렌더링하는 역할을 담당한다. 초기화와 렌더링을 담당하는 부분이기에 일반적으로 Router, GlobalStyled, react-query와 같은 전역적인 구성 요소는 이곳에서 관리된다.

App.js

App.js 파일은 컴포넌트를 불러와 애플리케이션의 레이아웃을 구성하고, 불러온 컴포넌트를 조합해 화면에 렌더링하는 역할을 담당한다. 상태(State) 관리나 이벤트 핸들링을 처리할 수도 있다.

전역 구성 요소 정의에 대한 고민

두 파일은 이렇게 쓰임새가 다르기 때문에 내가 처음 React를 사용하면서 했던 고민은 다음과 같이 정리할 수 있다.

• App.js는 애플리케이션의 주요 컴포넌트와 관련된 로직을 담고 있으므로, 이곳에서 전역 구성 요소를 정의하면 주요 로직과 전역 설정이 혼재하여 코드를 이해하기 어려워질 수 있다.
• App.js에 전역 구성 요소를 넣으면, 해당 구성 요소를 다른 컴포넌트에서 재사용하기가 어렵다. 예를 들면 다른 컴포넌트에서 라우팅을 사용하려면 App.js를 가져와야 한다.
• App.js에 전역 구성 요소를 포함하면 매번 App.js가 렌더링될 때마다 전역 구성 요소도 함께 초기화된다. 하지만 index.js에 넣어주면, 전역 구성 요소는 한 번 초기화되고 재렌더링 시에는 다시 초기화할 필요가 없다.

고민에 대한 결론

이렇게 코드의 가독성과 유지 보수성, 재사용성과 성능에 영향을 주므로 Router, GlobalStyled, react-query와 같은 전역 구성 요소를 index.js에 넣는 것이 좋다! 😊