백엔드(Spring) 중심으로 프로젝트를 진행해왔지만,
막학기 졸업 프로젝트2를 개인 프로젝트로 진행 해야 한다.
웹 서비스를 처음부터 끝까지 구현하려면
프론트엔드 역량도 필요하다고 느꼈고, 그 시작으로 React를 공부하기로 결심 했다.
복학 전 한 학기 동안 집중적으로 학습하기 위해
소학회 프론트엔드(React) 파트에 지원했다.
소학회에서 시작부터 8주간은 스터디를 진행하는데
이번 기수는 해당 교재를 기반으로 스터디를 진행하며,
8주간의 학습 내용을 기록해보려 한다.
Node.js 설치 여부 확인
Vite를 사용하려면 Node.js가 필요하므로,
터미널에서 아래 명령어로 설치 여부를 확인했습니다.
% node -v
% npm -v
node -v: Node.js 버전 확인npm -v: npm(Node Package Manager) 버전 확인
Vite로 리액트 프로젝트 생성
그럼 이제, 프로젝트를 생성해 보겠습니다
% npm create vite@latest
프로젝트 생성 시 교재와 동일하게 React + TypeScript 템플릿을 선택했다.
리액트 프로젝트 실행
% npm run dev로 프로젝트 실행하기
처음 실행하면, 기본 실행화면이 이렇게 뜰 겁니당
생성한 프로젝트의 구조
Vite로 프로젝트를 생성하면 아래 그림처럼 기본 폴더와 파일 구조가 자동으로 생성됩니다
Tip : scaffolding
Vite와 같은 도구를 사용해 프로젝트의 기본 구조와 설정 파일을 자동으로 생성하는
과정을 스캐폴딩(scaffolding) 이라고 합니다. 이를 통해 복잡한 환경 설정을 직접 하지 않고도
명령어 한 줄로 리액트 애플리케이션의 기본 틀을 빠르게 만들 수 있습니다.
test : Hello, React! 띄우기
src/main.tsx랑 src/App.tsx를 아래처럼 수정하면
// src/main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
// import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)// src/App.tsx
export default function App(){
return (
<div> Hello, React!</div>
)
}
성공입니당 🎉
React 기본 실행 흐름
npm run dev실행- Vite가
index.html을 로드 index.html이main.tsx를 불러옴main.tsx가App.tsx를 렌더링- 화면에 React 컴포넌트가 출력
React 기본 구조
프로젝트에 있는 여러 폴더와 파일 중에서 애플리케이션을 실행하는 데 특히 중요한 파일은
package.json, index.html, main.tsx , App.tsx
package.json
package.json 파일은 프로젝트의 핵심 설정파일
index.html
터미널에서 npm run dev 명령어를 입력해 개발 서버를 실행하면
Vite 개발 서버는 내부적으로 index.html 파일을 자동으로 로드합니다.
이 파일 안에는 리액트 애플리케이션을 실행하는 데 필요한 최소한의 HTML 구조가 들어 있음
main.tsx
index.html 파일에서 <script src="/src/main.tsx">로
main.tsx 파일을 불러오면 그때부터 리액트 코드가 실행됨
main.tsx 파일은 리액트 애플리케이션을 초기화하고 구성하는 역할을 함
App.tsx
리액트 파일 중 첫 글자가 대문자로 시작하고 확장자가 .tsx나 .jsx인 파일을 컴포넌트라고 합니다.
일반적으로 확장자 앞에 붙은 이름을 사용해 해당 컴포넌트 파일을 저장합니다.
예를들어 App.tsx 파일은 App 컴포넌트라고 합니다
소학회 1주차 과제
- Vite로 리액트 프로젝트 생성,
- JSX로 간단 자기소개 페이지 구현
function Profile() {
return (
<section>
<h1>자기소개</h1>
<p>안녕하세요 저는 소프트웨어융합학과 22학번 정유진입니다</p>
</section>
)
}
type InfoProps = {
label: string
value: string
}
function Info({ label, value }: InfoProps) {
return (
<p>
<strong>{label}</strong>: {value}
</p>
)
}
function Skills() {
const skills = ['Java', 'Springboot','Python','React','Javascript', 'TypeScript']
return (
<ul>
{skills.map(skill => (
<li key={skill}>{skill}</li>
))}
</ul>
)
}
export default function App() {
return (
<main>
<Profile />
<Info label="관심 분야" value="Frontend / Backend" />
<Info label="학습 도구" value="Vite + React / springboot" />
<h4>기술 스택</h4>
<Skills />
</main>
)
}코드 설명
App 컴포넌트는 최상위 컴포넌트이고,
- Profile 컴포넌트로 기본 소개를 보여주고
- Info 컴포넌트를 여러 번 사용해 정보 영역을 구성하고
- Skills 컴포넌트로 기술 스택을 출력했습니다.
→ 3개의 하위 컴포넌트
[1] Profile 컴포넌트 - 정적인 UI
: 자기소개 제목과 간단한 소개 문장을 담당합니다.
section태그로 하나의 루트 요소를 유지했고- JSX 기본 규칙에 맞게 단일 루트로 반환
[2] Info 컴포넌트 + props 설명
Info 컴포넌트는
label과value를 props로 받아서
같은 형태의 정보를 재사용할 수 있도록InfoProps타입을 정의해서
props의 타입을 명확히 지정
→ 관심 분야, 학습 도구 같은 정보를 같은 컴포넌트로 반복해서 렌더링 가능
[3] Skills 컴포넌트
: 배열 데이터를 JSX에서 렌더링하는 방식을 사용
skills배열을 선언하고map함수를 이용해<li>목록으로 변환- JSX 안에서 JavaScript 표현식을 사용하기 때문에 중괄호
{}를 사용했습니다. - 또한 리스트 렌더링 시
key속성을 지정해야 한다는 JSX 규칙에 따라 각li에key를 추가했습니다.
* key는 React가 변경된 요소를 효율적으로 추적하기 위해 사용하는 고유 식별자이다.
여기까지 1장 끝났고,
2장.JSX개요 까지 1주차 스터디라 다음 편에서 2장 개념 정리 진행하겠습니다
