React 학습 여정 - Day 2
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *초보 개발자에게 React 기초 개념(JavaScript, JSX, 컴포넌트, Props)을 설명하며 중간 난이도**의 학습 내용 제공
핵심 요약
- JavaScript(JS): 웹 동적 기능 구현을 위한 스크립팅 언어로,
console.log()
와 같은 기본 문법 사용 가능 - JSX:
JavaScript XML
로 React에서 HTML 태그를 JS 파일 내부에 직접 작성할 수 있는 문법 - SPA/MPA 차이점: SPA는 단일 페이지에서 동적 업데이트, MPA는 각 요청마다 새로운 페이지 로딩 (예: Gmail vs Amazon)
- React 컴포넌트: 함수형 또는 클래스형으로 작성하며,
props
를 통해 부모 → 자식으로 데이터 전달 가능
섹션별 세부 요약
1. JavaScript 기초
- 스크립팅 언어로 웹 페이지에 동적 기능 추가
let name = "React Learner"; console.log("Welcome " + name);
와 같은 문법 사용- 웹 페이지가 정적 상태로 유지될 수 있음
2. JSX 문법
- JSX는 HTML 태그를 JS 내부에 작성할 수 있는 XML-like 문법
- 예시:
const element =
Hello, React!
; - JS와 JSX 차이: JS는 순수 스크립팅, JSX는 React UI 설계에 특화
3. SPA vs MPA
- SPA: 단일 HTML 페이지 로딩 후 리로드 없이 동적 업데이트 (예: Gmail)
- MPA: 링크 클릭 시 새로운 HTML 페이지 로딩 (예: Amazon)
- SPA는 빠른 로딩 속도를 제공하지만, MPA는 전통적인 웹사이트 구조
4. React 컴포넌트
- 컴포넌트는 JSX를 반환하는 재사용 가능한 코드 블록
- 함수형 컴포넌트 예시:
```javascript
function Welcome() { return
Hello from React Component!
; }```
- 규칙: 컴포넌트 이름은 대문자로 시작, 단일 부모 요소 반환,
props
는 읽기 전용
5. `
- JavaScript 비활성화 시 노출되는 콘텐츠를 포함
- 예:
6. `node_modules` 폴더
- npm/yarn 설치한 라이브러리 저장소
npm install
실행 시 자동 생성되며, .gitignore에 추가하여 GitHub에 업로드 금지
7. 빈 Fragment (`<> `)
- 단일 부모 요소 반환을 위해
대신 사용
- 예:
<>
Hello
8. Props 개념
- props는 부모 → 자식 컴포넌트로 데이터 전달
- 예:
```javascript
function Welcome(props) { return
Hello, {props.name}!
; }```
props
는 읽기 전용으로 직접 수정 불가
결론
- SPA/MPA 선택은 성능과 사용자 경험에 따라 결정
- 함수형 컴포넌트 사용 시
props
를 통해 데이터 전달 node_modules
를.gitignore
에 추가하여 코드 관리 효율화- JSX와 JS 차이점 명확히 이해하여 UI 설계 최적화