[JavaScript 문법] 43일차: React 기초

React란?

React는 Facebook에서 개발한 사용자 인터페이스 구축을 위한 JavaScript 라이브러리입니다. React는 컴포넌트 기반 아키텍처를 사용하여 UI를 구성하고, 상태 관리 및 효율적인 렌더링을 지원합니다. React의 주요 개념으로는 컴포넌트, props, state 등이 있습니다.

컴포넌트

컴포넌트는 React 애플리케이션의 기본 단위로, 독립적이고 재사용 가능한 UI 요소입니다. 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉩니다.

함수형 컴포넌트

함수형 컴포넌트는 JavaScript 함수를 사용하여 컴포넌트를 정의합니다. 함수형 컴포넌트는 props를 인수로 받아 JSX를 반환합니다.

예제: 함수형 컴포넌트

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

ReactDOM.render(<Welcome name="John" />, document.getElementById('root'));

클래스형 컴포넌트

클래스형 컴포넌트는 ES6 클래스를 사용하여 컴포넌트를 정의합니다. 클래스형 컴포넌트는 render 메서드를 통해 JSX를 반환합니다.

예제: 클래스형 컴포넌트

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

ReactDOM.render(<Welcome name="John" />, document.getElementById('root'));

props

props(properties)는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. props는 읽기 전용이며, 자식 컴포넌트는 props를 수정할 수 없습니다.

예제: props 사용

function Greeting(props) {
  return <h1>Good {props.timeOfDay}, {props.name}!</h1>;
}

ReactDOM.render(<Greeting timeOfDay="morning" name="John" />, document.getElementById('root'));

상태 관리

state는 컴포넌트의 내부 상태를 관리하는 객체입니다. state는 컴포넌트 내부에서 변경될 수 있으며, 상태가 변경되면 컴포넌트가 다시 렌더링됩니다.

클래스형 컴포넌트에서의 상태 관리

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

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

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

ReactDOM.render(<Counter />, document.getElementById('root'));

함수형 컴포넌트에서의 상태 관리

함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 관리합니다.

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

ReactDOM.render(<Counter />, document.getElementById('root'));

React 개발 도구 설정

React 애플리케이션을 개발하기 위해 Create React App을 사용하여 개발 환경을 설정할 수 있습니다.

예제: Create React App 사용

1. Create React App 설치 및 프로젝트 생성

npx create-react-app my-app
cd my-app
npm start

2. 디렉토리 구조

my-app/
  ├── node_modules/
  ├── public/
  ├── src/
  │   ├── App.css
  │   ├── App.js
  │   ├── App.test.js
  │   ├── index.css
  │   ├── index.js
  │   ├── logo.svg
  │   └── serviceWorker.js
  ├── .gitignore
  ├── package.json
  ├── README.md
  └── yarn.lock

3. 기본 파일 설명

• index.js: React 애플리케이션의 진입점
• App.js: 기본 컴포넌트
• index.css: 글로벌 스타일

결론

React는 컴포넌트 기반 아키텍처를 사용하여 사용자 인터페이스를 구축하는 강력한 라이브러리입니다. 이번 글에서는 React의 기본 개념, 컴포넌트, props, 상태 관리, 그리고 개발 도구 설정에 대해 배웠습니다. 다음 글에서는 Vue.js 기초에 대해 알아보겠습니다.

다음 글에서 만나요!