기초를 넘어서
이 핸드북에서는 기초를 다뤘습니다: 프로젝트 설정, 컴포넌트, JSX, 스타일링, props, state, 이벤트, 폼, 이펙트, 그리고 이들을 연결하는 hooks, 디자인을 동작하는 앱으로 전환하는 React 사고방식, 그리고 앱을 접근성 있게 유지하는 방법입니다. 이것이 라이브러리의 핵심이며, 실제로 동작하는 인터페이스를 만들기에 충분합니다. 이 핵심 외에 떨어져 있는 몇 가지 관심사가 있으며, 거의 모든 프로덕션 React 앱은 이들 중 일부 조합을 조만간 사용하게 됩니다. 이 장은 그 지도입니다: 각각이 무엇을 위한 것이고, 어디에 들어가고, 어디서 배울 것인지를 설명합니다.
라우팅
싱글 페이지 앱은 브라우저에서 모든 것을 렌더링하고 매번 서버에 새 페이지를 요청하는 대신 화면에 표시되는 내용을 바꿉니다. 이것이 빠르게 느껴지는 이유 중 하나이지만, 동시에 URL 입력, 뒤로 가기 클릭, 페이지 북마크하기 같은 브라우저의 일반적인 네비게이션이 뭔가가 이를 구축하지 않으면 작동할 것이 없다는 의미이기도 합니다. 라우팅은 바로 이 부분입니다: URL을 표시되어야 할 뷰에 매핑하고, 사용자가 이동할 때 주소 표시줄을 동기화하고, 전체 페이지 새로고침 없이 뒤로 가기 버튼을 작동하게 합니다. React Router는 이를 처리하기 위해 대부분의 React 앱이 선택하는 라이브러리입니다.
메타 프레임워크
React 자체는 인터페이스만 렌더링합니다. 라우팅에 대한 의견, 페이지가 나타나기 전에 데이터를 로드하는 방법, 또는 페이지가 브라우저에 도달하기 전에 서버에서 렌더링하는 방법에 대해 제공하지 않습니다. 거의 모든 프로덕션 앱이 필요로 하는 세 가지입니다. 메타 프레임워크는 React 위에 구축된 프레임워크로 이러한 누락된 부분을 제공하며, Next.js는 React 세계 대부분이 선택하는 것입니다. 이것이 대부분의 프로덕션 React 앱이 React 자체가 아닌 이유입니다: Next.js 또는 이와 유사한 것 내에서 실행되는 React입니다. 프레임워크의 종류는 메타 프레임워크를 더 깊이 있게 다루며, Next.js가 React와 어떤 관계가 있는지 포함합니다.
도구
이 부분은 이미 자체 장이 있습니다. React 프로젝트 설정에서는 이 핸드북 전체에서 사용된 JSX가 자체로는 유효한 JavaScript가 아닌 이유와 Vite가 어떻게 dev 서버를 실행하고, JSX를 즉석에서 컴파일하고, 배포할 때 모든 것을 최적화된 파일로 번들링하는지를 다뤘습니다. 이것이 이 지도에 포함된 이유는 여기의 모든 다른 항목 아래에 있기 때문입니다: 라우터, 메타 프레임워크, 배포 단계는 모두 빌드 도구가 이미 그 일을 하고 있다고 가정합니다. 기계를 다시 알고 싶을 때 설정 장으로 돌아가세요.
배포
앱이 빌드되면 배포할 곳이 필요합니다. 빌드 명령어인 Vite 프로젝트의 경우 vite build를 실행하면 평문 HTML, CSS, JavaScript 파일의 폴더가 생성됩니다: 앱의 정적 출력입니다. 그 폴더를 Netlify, Vercel, Cloudflare Pages 같은 호스트로 보내는 것이 앱을 인터넷에 올려서 다른 사람들이 사용하게 합니다.
여기서부터의 길
그것이 지도입니다: 뷰를 이동하는 라우팅, React가 남겨두는 것을 처리하는 Next.js 같은 메타 프레임워크, 설정 장의 Vite 빌드가 코드를 브라우저가 로드할 수 있는 파일로 변환하고, 결과를 온라인에 올릴 호스트입니다. 이 중 어느 것도 오늘 배워야 할 필요가 없습니다. 프레임워크 선택 및 학습은 Next.js 같은 부분을 추가할지 여부와 시기를 결정하고, 그 시간이 오면 선택지를 어떻게 저울질할지에 대한 안내입니다. 이 모든 것을 통과하는 가장 빠른 방법은 지금까지 왔던 것과 같은 접근 방식입니다: 작은 실제 프로젝트를 하나 만들어보세요. 만들 가치가 있는 것을 고르고, 이 핸드북의 기초에 기대고, 프로젝트가 실제로 필요로 할 때만 위의 부분을 가져오세요.
