반응 | 애플리케이션 구조 파트 II

안녕하세요 개발자 여러분! 내 마지막 블로그에서 React 앱의 두 가지 기본 부분에 대해 자세히 알아봅니다.

1.node_modules
2.공공

오늘 우리는 애플리케이션 내에서 가장 중요한 폴더 중 하나인 src 에 대해 논의할 것입니다. "소스"의 줄임말인 src에는 나중에 빌드를 만드는 데 사용할 작업 파일이 포함되어 있습니다.

잠시 멈추고 빌드에 대해 조금 이야기해 봅시다. 빌드는 실행할 때 자산의 컴파일된 버전이 배치되는 곳입니다npm build. 이것이 사용자에게 전달될 것입니다. 빌드가 기본create-react-app 구조의 일부가 아니라는 점을 기억해야 합니다.

이제 src로 돌아가서 이 폴더는 다음과 같습니다.



App.css: 이 파일은 애플리케이션의 스타일을 결정합니다. App.css는 전역 스타일 파일입니다. create-react-app는 모든 자산을 처리하기 위해 webpack을 사용합니다. Webpack은 가져오기 개념을 JavaScript 이상으로 확장하는 사용자 지정 방법을 제공합니다. JavaScript 파일이 CSS 파일에 의존하고 다음과 같이 JavaScript에서 CSS를 가져와야 하는 경우:



이것이 이 CSS 파일이 전역인 이유입니다. 이 파일은 App.js에 추가될 때 전체 앱으로 내보내집니다.

또한 index.css는 더 깊은 수준으로 안내합니다. 기본적으로 이 파일에는 응용 프로그램의 기본 글꼴과 여백이 포함되어 있습니다. 이 파일에 대해 앱의 결합과 같이 생각할 수 있습니다.



React 앱의 경우 가장 좋은 방법은 모든 구성 요소를 해당 JS 및 CSS 파일이 포함된 자체 디렉터리에 두는 것입니다. App 구성 요소는 React 앱의 최상위 구성 요소이지만 글로벌 CSS에 App.css 또는 index.css를 사용하기 위한 사전 정의된 규칙은 없지만 App.css를 글로벌 CSS 파일로 사용하는 것이 좋습니다. 가장 많이 볼 것입니다.

이미 index.css에 대해 이야기하고 있는 것처럼 index.js에 대해 이야기해 보겠습니다.

제 지난 블로그에 있는 HTML 파일id-"root"의 매우 중요한 코드 줄을 기억하십니까? 음, 이 파일은 DOM의 루트 요소에 액세스합니다!

위에서 알 수 있듯이 render 메서드를 사용하여 React 애플리케이션을 렌더링합니다. 이 파일의 또 다른 중요한 부분은 App 파일에서 가져온 App 개체에 대한 참조입니다.

import App from './App';

이제 마지막 파일인 App.js 에 대해 이야기해 보겠습니다.

App.js(이 블로그의 두 번째 그림)는 시작 응용 프로그램에 있는 유일한 React 구성 요소입니다.

React를 사용하면 클래스 또는 함수의 두 가지 형식으로 구성 요소를 정의할 수 있습니다. 다음 블로그에서는 구성 요소에 대해 더 자세히 이야기하겠지만 이해해야 할 것은 구성 요소에서 실제로 응용 프로그램을 빌드하기 시작하는 곳이라는 것입니다. localhost:3000에서 볼 수 있는 모든 것은 App.js 안에 있습니다.

다음은 create-react-app 를 사용하는 첫 번째 React 앱의 기본 사항입니다. 다른 모든 파일은 애플리케이션의 이미지 및 테스트 파일과 같이 친숙합니다. 이 구조가 명확해지면 구성 요소를 구축하는 것이 정말 쉬울 것입니다. 저를 믿으세요. 구성 요소 폴더를 사용하여 코드가 얼마나 깔끔하게 보이는지 좋아하실 것입니다. 하지만 이에 대해서는 다음 주에 말씀드리겠습니다.

읽어주셔서 감사하고 새해 복 많이 받으세요!