Engineering

JavaScript Class/모듈 및 React 핵심 개념

JavaScript Class/모듈 및 React 핵심 개념 학습 내용을 정리한 백필 노트입니다.

이 글은 2025년 학습 기록을 블로그 형식으로 정리한 백필 노트입니다.

JavaScript Class, Import, Export 문법

Class (클래스): 객체를 생성하기 위한 설계도.
- 정의: class 키워드를 사용하며, constructor 메서드로 객체 생성 시 초기 속성을 설정합니다.JavaScript
```
class Human {
    constructor(name) { // 생성자
        this.name = name;
    }
    speak() { // 메소드
        console.log(`${this.name}이(가) 말합니다.`);
    }
}
```
- 사용: new 키워드를 사용하여 클래스의 인스턴스(객체)를 생성합니다.JavaScript
```
const person = new Human("김철수");
person.speak(); // "김철수가(가) 말합니다."
```
- 상속 (확장): extends 키워드를 사용하여 다른 클래스의 속성과 메서드를 물려받습니다. super()를 사용하여 부모 클래스의 constructor를 호출해야 합니다.JavaScript
```
class 김철수 extends Human {
    constructor() {
        super("김철수"); // 부모 클래스 생성자 호출
    }
    speak() { // 메소드 오버라이딩(재정의)
        console.log(`${this.name}이(가) 크게 말합니다.`);
    }
}
```
- Getter/Setter: get과 set 키워드를 사용하여 속성 값을 읽거나 쓸 때 특정 동작을 수행하도록 할 수 있습니다.
Module (모듈): 코드를 여러 파일로 분리하여 관리하는 기능.
- 내보내기 (export): 다른 파일에서 사용할 수 있도록 변수, 함수, 클래스를 외부로 공개합니다.JavaScript
```
export const MAX_SPEED_LIMIT = 120;
export function createVehicle(...) { ... }
export class Vehicle { ... }
```
- 가져오기 (import): export된 모듈을 다른 파일에서 불러와 사용합니다.JavaScript
```
import { MAX_SPEED_LIMIT, createVehicle, Vehicle } from './vehicle.js';
```

React 시작하기

Chapter 1. React 소개

정의: 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리.
핵심 개념:
- 컴포넌트 (Component): UI를 구성하는 독립적이고 재사용 가능한 부품. (레고 블록 비유)
- 선언적 UI (Declarative UI): "무엇을" 보여줄지 선언하면, React가 데이터 변경에 따라 "어떻게" 그릴지 알아서 처리합니다.
- 가상 DOM (Virtual DOM): 변경 사항을 메모리상의 가상 DOM에서 먼저 계산 후, 실제 DOM에는 최소한의 변경만 적용하여 성능을 최적화합니다.
프로젝트 생성: 터미널에서 npx create-react-app 프로젝트명 명령어로 프로젝트를 생성하고, npm start로 개발 서버를 실행합니다.

Chapter 2. React 컴포넌트 I: 함수형 컴포넌트

정의: JavaScript 함수 형태로 작성하는 가장 기본적인 React 컴포넌트.
주요 규칙 및 문법:
- 컴포넌트 이름은 반드시 대문자로 시작해야 합니다.
- JSX: JavaScript 내에서 HTML과 유사한 문법을 사용하여 UI를 작성합니다.
  - 반드시 하나의 최상위(루트) 요소로 감싸서 반환해야 합니다. (<div> 또는 Fragment <>...</>)
  - JavaScript 변수나 표현식은 중괄호 {} 안에 작성합니다.
  - HTML의 class 속성은 className으로 작성합니다.
- 모듈화: export default 컴포넌트명;으로 컴포넌트를 내보내고, import 컴포넌트명 from './경로';로 다른 파일에서 가져와 사용합니다.

Chapter 3. React 컴포넌트 II: Props

정의: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위한 속성. 읽기 전용이며, 자식 컴포넌트에서 직접 수정할 수 없습니다.
데이터 흐름: 데이터는 항상 위에서 아래로(부모 → 자식) 흐릅니다.
사용법:
- 전달 (부모): <자식컴포넌트 prop이름="값" /> 형태로 속성을 추가하여 전달합니다.
- 사용 (자식):
  - 함수의 매개변수로 props 객체를 받아 props.prop이름으로 접근합니다.
  - 객체 비구조화 할당을 사용하여 { prop이름 } 형태로 바로 받아 간결하게 사용할 수 있습니다.
  - { prop이름 = '기본값' } 형태로 Props가 전달되지 않았을 때의 기본값을 설정할 수 있습니다.

Chapter 4. React 상태 관리 I: useState

정의: 컴포넌트 내부에서 시간이 지남에 따라 변할 수 있는 데이터.
useState 훅(Hook): 함수형 컴포넌트에서 상태를 관리하게 해주는 도구.
문법: const [상태변수, 상태업데이트함수] = useState(초기값);
핵심 규칙:
- 상태는 직접 수정해서는 안 됩니다 (예: count++ (X)).
- 상태를 변경하려면 반드시 상태 업데이트 함수를 호출해야 합니다 (예: setCount(count + 1)).
- 이전 상태 값에 의존하여 상태를 업데이트할 때는 함수형 업데이트를 사용하는 것이 안전합니다 (예: setCount(prevCount => prevCount + 1)).

Chapter 5. React 상태 관리 II: 폼 다루기

제어 컴포넌트 (Controlled Component): <input>, <textarea> 등 폼 요소의 값을 React의 state로 제어하는 방식.
핵심 패턴:
1. useState로 폼 입력 값을 저장할 상태를 만듭니다.
2. 폼 요소의 value 속성을 상태 변수와 연결합니다. (value={state})
3. onChange 이벤트 핸들러를 연결하여, 사용자가 입력할 때마다 event.target.value로 최신 값을 읽어와 상태 업데이트 함수(setState)를 호출합니다.
폼 제출: <form> 태그의 onSubmit 이벤트 핸들러를 사용하며, 핸들러 함수 내에서 **event.preventDefault()*를 호출하여 페이지가 새로고침되는 기본 동작을 막는 것이 중요합니다.

Chapter 6. React 이벤트 처리

이벤트 핸들러: 사용자의 행동(클릭, 입력 등)에 반응하여 실행되는 함수.
문법: JSX 요소에 on이벤트명={핸들러함수} 형태로 연결합니다. 이벤트명은 카멜 케이스(onClick, onChange)로 작성합니다.
이벤트 객체: 핸들러 함수는 자동으로 **이벤트 객체(event)**를 인자로 받으며, 이를 통해 이벤트 관련 상세 정보(event.target.value 등)에 접근할 수 있습니다.
합성 이벤트 (Synthetic Event): 브라우저 간의 이벤트 처리 방식 차이를 없애고 일관된 인터페이스를 제공하는 React의 이벤트 시스템입니다.

Chapter 7. React 컴포넌트 구조화

개념: 복잡한 UI를 기능별로 작고 재사용 가능한 컴포넌트로 분리하고, 이를 조합하여 전체 애플리케이션을 구성하는 방식입니다.
계층 구조: 컴포넌트들은 부모-자식 관계를 형성하며, 데이터는 Props를 통해 위에서 아래로 흐릅니다.
CSS 모듈: [컴포넌트명].module.css 형식의 파일로 컴포넌트별 독립적인 스타일을 적용할 수 있습니다. import styles from './스타일파일.module.css';로 불러온 후 className={styles.클래스명} 형태로 사용합니다.
실습 요약: 하나의 ProfileCard 컴포넌트를 CardHeader, CardBody, CardFooter라는 세 개의 자식 컴포넌트로 분리하고, App 컴포넌트에서 ProfileCard에 데이터를 Props로 전달하여 조립하는 과정을 통해 컴포넌트 구조화와 재사용성을 학습합니다.