React 학습 Day 2: JavaScript, JSX, Components, Props, SPA/MPA

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 설계 최적화