[새싹x코딩온] 웹 개발자 부트캠프 과정 11주차 회고(1) | 리액트 state, props

1. 이번 목표:
    리액트 시작, State와 Props에 대해 알아보자

 

2. 배운 내용 요약

📌 리액트(React)란?
리액트(React)는 페이스북(Facebook)에서 개발한 UI 라이브러리.
사용자 인터페이스(User Interface)를 만들기 위해 사용. 주로 싱글 페이지 애플리케이션(SPA) 개발에 많이 사용되며, 컴포넌트 기반(Component-Based) 아키텍처를 통해 UI를 효율적이고 재사용 가능하게 구성할 수 있다.

 

리액트 주요 특징

1. 컴포넌트 기반 아키텍처

리액트는 컴포넌트(Component) 단위로 UI를 나누어 개발.
컴포넌트는 재사용 가능하며, 각각의 컴포넌트는 독립적으로 동작.
컴포넌트 기반 개발은 코드의 가독성과 유지보수성을 높임.

 

2. 가상 돔(Virtual DOM)

리액트는 가상 DOM을 사용하여 효율적인 UI 업데이트를 지원.
가상 DOM은 실제 DOM의 사본을 메모리에 유지하고, 상태가 변경되면 이를 비교하여 필요한 부분만 업데이트.
이를 통해 렌더링 성능이 향상됨.

3. 단방향 데이터 흐름(One-Way Data Binding)

리액트는 데이터가 부모에서 자식으로 단방향(One-Way)으로 흐름.
데이터 흐름이 명확하고 디버깅이 쉽다.
필요에 따라 상태 관리 라이브러리(예: Redux, Context API 등)를 통해 데이터 관리를 더욱 효율적으로 할 수 있다.

4. 선언형 프로그래밍(Declarative Programming)

리액트는 선언형 프로그래밍 방식을 사용하여 UI를 구성.
개발자는 "어떻게 그릴지"가 아닌 "무엇을 그릴지"에 집중할 수 있다.
이를 통해 코드가 더 직관적이고 이해하기 쉬워짐.

5. JSX(JavaScript XML)

리액트는 JSX 문법을 사용.
JSX는 JavaScript 내에서 HTML과 유사한 코드를 작성할 수 있도록 도움.
JSX는 기존 HTML 문법보다 더 강력하며, JavaScript의 모든 기능을 사용할 수 있다.

function App() {
  return <h1>Hello, React!</h1>;
}​

6. 훅(Hooks)

리액트 v16.8부터 도입된 기능.
함수형 컴포넌트에서도 상태 관리와 라이프사이클 기능을 사용할 수 있다.
주요 훅:
    useState – 상태 관리
    useEffect – 사이드 이펙트 관리
    useContext – 전역 상태 관리

7. SPA(Single Page Application) 개발에 최적화

리액트는 SPA 개발에 최적화되어 있어 페이지 전환 시 전체 페이지 리로드 없이 필요한 부분만 업데이트.
이를 통해 사용자 경험(UX)이 향상됨.

 

리액트 프로젝트 생성

1. Create React App(CRA) 사용 방법 (가장 기본적인 방법)

1-1. 설치 사전 준비

• 최신 버전의 Node.js가 설치되어 있어야 한다.
• npm(Node Package Manager) 또는 yarn 사용 가능.

1-2. 리액트 프로젝트 생성 명령어

npx create-react-app 프로젝트명

npx create-react-app my-react-app

💡 npx는 npm 5.2+ 및 Node.js 8.2+ 이상에서 기본 제공.

 

 

1-3. 프로젝트 폴더로 이동

cd my-react-app

 

1-4. 개발 서버 실행

npm start

 

개발 서버가 실행되면 http://localhost:3000에서 리액트 애플리케이션을 확인할 수 있다.

 

Props와 State(Class형 & Function형 컴포넌트)

1. Props와 State

React에서 props와 state는 컴포넌트 간의 데이터 전달과 상태 관리를 위해 사용하는 핵심 개념.

 

Props (Properties)

• 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터.
• 컴포넌트 간의 데이터 전달에 사용.
• 읽기 전용(Immutable)으로, 자식 컴포넌트에서 props를 직접 수정할 수 없다.

State

• 컴포넌트 내부에서 관리되는 동적 데이터.
• 컴포넌트의 상태가 변경되면 자동으로 리렌더링.
• Mutable하며, 컴포넌트 내에서 변경 가능.

 

Class형 컴포넌트에서의 Props와 State

Props 사용 예시

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Welcome;

• Welcome 컴포넌트는 부모로부터 name이라는 props를 전달받아 화면에 출력.
• this.props를 통해 props에 접근할 수 있다.

State 사용 예시

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

• Counter 컴포넌트는 state를 통해 count 값을 관리.
• this.state를 통해 state에 접근하며, this.setState를 사용하여 state를 업데이트.
• 버튼을 클릭하면 increment 함수가 호출되어 count 값이 증가.

 

Function형 컴포넌트에서의 Props와 State (Hooks 사용)

Props 사용 예시

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Welcome;

• Function형 컴포넌트에서는 props를 함수의 매개변수로 받아 사용다.
• 간단하고 직관적인 문법으로 Class형 컴포넌트보다 코드가 짧음.

State 사용 예시 (useState 사용)

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

• Function형 컴포넌트에서는 useState Hook을 사용하여 state를 관리.
• useState는 배열을 반환하며, 첫 번째 요소는 state 값, 두 번째 요소는 state를 업데이트하는 함수.
• 버튼 클릭 시 increment 함수가 호출되어 count 값이 증가.

 

Props와 State의 주요 차이점

	props	state
정의	부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터	컴포넌트 내부에서 관리되는 동적데이터
변경 여부	읽기 전용(Immutable)	변경 가능(Mutable)
사용 목적	컴포넌트 간 데이터 전달	컴포넌트 상태 관리
접근 방법	this.props (Class형) / props (Function형)	this.state (Class형) / useState (Function형)

 

 

 

 

3. 회고

드디어 내가 오래토록 해왔던 리액트 시간이다! 저번 프로젝트 때 컴포넌트 개념을 사용하지 못 해서 약간 답답했는데 컴포넌트와 여러 훅들을 활용할 수 있게 돼 매우 반갑고 기쁘다!
하지만 2차 프로젝트에서도 나는 프론트가 아닌 백을 선택할거기 때문에... 복습 개념으로 수업 잘 듣고 과제 열심히 해서 제출해야겠다!
얼른 강의 다 듣고 리액트를 활용해서 프로젝트 진행이 됐으면 좋겠다.