이 랩에서는 React 의 컴포넌트라는 기본 개념을 배우게 됩니다. 컴포넌트는 독립적이고 재사용 가능한 코드 조각입니다. JavaScript 함수와 동일한 목적을 수행하지만, 독립적으로 작동하며 화면에 렌더링될 HTML(JSX 를 통해) 을 반환합니다. 간단한 "함수형 컴포넌트"를 만드는 데 집중할 것입니다.
별도의 파일에 새 컴포넌트를 만들고, 내보낸 다음, 메인 App 컴포넌트 내에서 가져와 렌더링할 것입니다.
이 단계에서는 첫 번째 React 컴포넌트를 생성합니다. 코드를 체계적으로 관리하고 재사용성을 높이기 위해 각 컴포넌트를 자체 파일에 배치하는 것이 일반적인 관행입니다. Hello라는 이름의 컴포넌트를 위한 새 파일을 만들 것입니다.
먼저 개발 환경을 준비해 보겠습니다. 프로젝트 파일은 my-app 디렉토리에 이미 생성되어 있습니다. 이 디렉토리로 이동하여 필요한 종속성을 설치하고 개발 서버를 시작해야 합니다.
WebIDE 에서 터미널을 열고 (Terminal > New Terminal 메뉴 사용 가능) 다음 명령을 하나씩 실행합니다.
cd my-appnpm installnpm run dev -- --host 0.0.0.0 --port 8080마지막 명령을 실행하면 개발 서버가 시작됩니다. LabEx 인터페이스의 Web 8080 탭을 클릭하여 실행 중인 애플리케이션을 볼 수 있습니다. 이 랩 전체에서 이 탭으로 전환하여 변경 사항을 확인할 수 있습니다.
왼쪽의 WebIDE 파일 탐색기에서 my-app/src 디렉토리로 이동합니다. src 폴더를 마우스 오른쪽 버튼으로 클릭하고 "New File"을 선택합니다. 새 파일의 이름을 Hello.jsx로 지정합니다.
이제 새로 생성된 my-app/src/Hello.jsx 파일에 다음 코드를 추가합니다. 이 코드는 간단한 함수형 컴포넌트를 정의합니다.
function Hello() {
return <h1>Hello from the Hello component!</h1>;
}이 코드를 살펴보겠습니다.
function Hello(): 이것은 표준 JavaScript 함수입니다. React 에서 함수형 컴포넌트는 단순히 JavaScript 함수입니다. 관례적으로 컴포넌트 이름은 항상 대문자로 시작합니다.return <h1>...</h1>;: 함수는 JSX 를 반환합니다. JSX(JavaScript XML) 는 JavaScript 의 구문 확장으로, HTML 과 매우 유사하게 보입니다. UI 가 어떻게 보여야 하는지를 설명하는 데 사용됩니다.이 단계에서는 Hello 컴포넌트를 애플리케이션의 다른 부분에서 사용할 수 있도록 만들 것입니다. 이를 위해 Hello.jsx 파일에서 내보내야 합니다.
JavaScript 모듈에는 명명된 내보내기 (named exports) 와 기본 내보내기 (default exports) 의 두 가지 주요 유형이 있습니다. 이 랩에서는 파일이 하나의 항목만 내보낼 때 컴포넌트에 흔히 사용되는 기본 내보내기를 사용할 것입니다.
my-app/src/Hello.jsx 파일 끝에 다음 줄을 추가합니다.
export default Hello;이제 my-app/src/Hello.jsx 파일 전체는 다음과 같이 보일 것입니다.
function Hello() {
return <h1>Hello from the Hello component!</h1>;
}
export default Hello;이 export default 문은 Hello 함수를 이 파일의 기본 내보내기로 만들어 다른 파일에서 가져올 수 있도록 합니다.
이 단계에서는 Hello 컴포넌트를 메인 애플리케이션 컴포넌트인 App.jsx로 가져와 사용할 수 있도록 할 것입니다.
WebIDE 파일 탐색기에서 my-app/src/App.jsx 파일을 찾아 엽니다.
Hello 컴포넌트를 사용하려면 먼저 가져와야 합니다. my-app/src/App.jsx 파일의 맨 위, App 함수 정의 앞에 다음 import 문을 추가합니다.
import Hello from "./Hello.jsx";이 줄은 JavaScript 에게 Hello.jsx 파일 (같은 디렉토리에 있으므로 ./ 사용) 의 기본 내보내기를 가져와 Hello라는 변수에 할당하도록 지시합니다.
import 를 추가한 후 my-app/src/App.jsx 파일의 상단은 다음과 같이 보일 것입니다 (다른 import 는 약간 다를 수 있습니다).
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Hello from './Hello.jsx';
function App() {
// ... rest of the file이 단계에서는 App 컴포넌트 내에서 Hello 컴포넌트를 렌더링할 것입니다. 컴포넌트를 가져온 후에는 일반 HTML 태그처럼 JSX 내에서 사용할 수 있습니다.
my-app/src/App.jsx 파일에서 App 함수 내의 return 문을 찾습니다. 기존 코드는 Vite 의 기본 내용입니다. 이 모든 것을 새 컴포넌트로 교체할 수 있습니다.
기본 내용을 제거하고 대신 <Hello /> 컴포넌트를 렌더링하도록 App 함수를 수정합니다.
App 함수는 다음과 같이 보여야 합니다.
function App() {
return (
<>
<Hello />
</>
);
}여기서 <Hello />는 Hello 컴포넌트를 렌더링하는 방법입니다. <>와 </>는 Fragment 라고 하며, DOM 에 추가 노드를 추가하지 않고 자식 목록을 그룹화할 수 있게 해줍니다.
이제 my-app/src/App.jsx 파일 전체는 다음과 같이 보일 것입니다.
import Hello from "./Hello.jsx";
import "./App.css";
function App() {
return (
<>
<Hello />
</>
);
}
export default App;참고: 명확성을 위해 사용되지 않는 import 와 상태 로직을 제거했습니다.
이 단계에서는 작업 결과를 확인할 것입니다.
my-app/src/Hello.jsx와 my-app/src/App.jsx 모두에서 모든 변경 사항을 저장했는지 확인하세요. 파일을 저장하려면 Ctrl+S 또는 Cmd+S를 누르면 됩니다.
소개에서 시작한 Vite 개발 서버는 Hot Module Replacement (HMR) 을 사용합니다. 이는 파일 변경을 자동으로 감지하고 전체 페이지를 다시 로드할 필요 없이 브라우저에서 애플리케이션을 업데이트한다는 것을 의미합니다.
LabEx 인터페이스의 Web 8080 탭으로 전환하세요. 이제 페이지에 "Hello from the Hello component!"라는 텍스트가 표시되어야 합니다. 이 내용은 새로 만든 Hello 컴포넌트에서 렌더링된 것입니다.
변경 사항이 보이지 않으면 브라우저 탭의 주소 표시줄에 있는 새로고침 버튼을 클릭해 보세요.
축하합니다! 첫 번째 React 컴포넌트를 성공적으로 생성, 내보내기 및 렌더링했습니다!
이 실습에서는 React 애플리케이션에서 컴포넌트를 생성하고 사용하는 기본적인 워크플로우를 배웠습니다. 이러한 모듈식 접근 방식은 React 개발의 핵심 원칙입니다.
다음과 같은 작업을 성공적으로 수행했습니다.
Hello.jsx) 에 새로운 함수형 컴포넌트 생성export default를 사용하여 컴포넌트를 애플리케이션의 다른 부분에서 사용할 수 있도록 함import를 사용하여 컴포넌트를 메인 App.jsx 파일로 가져옴<Hello />) 을 사용하여 가져온 컴포넌트 렌더링컴포넌트를 생성, 내보내기 및 가져오는 이 패턴은 크고 유지보수 가능한 React 애플리케이션을 구축하는 데 필수적입니다.
