[리액트] 리액트 왕초보 ! 처음 공부하는 리액트 알아보기

갑자기 리액트라니요. 

아무리 중소기업이고 아무리 시키는 거 다 해야 한다지만 이번엔 또 리액트를 해야 한다니요. 

 

그래도 다행히 이건 바로 개발 들어가는건 아니고 (다른 것들은 냅다 운영에 던져졌었음) 다음 프로젝트부터 쓴단다. 

다음 프로젝트가 들어오기 전까지 내가 여기 남아있을진 모르겠지만. ... 

 

 

아무것도 모르니 일단 GPT 한테 리액트 기초좀 정리해 줘! 해서 얻은 글 시작! 

 

 

React란 무엇인가?

React는 Facebook(현재 Meta)에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위해 사용됩니다. React는 컴포넌트 기반의 아키텍처와 선언적(Declarative) 프로그래밍 방식을 통해 효율적이고 재사용 가능한 UI 개발을 가능하게 합니다.

React의 주요 특징

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

• React는 UI를 **컴포넌트(Component)**라는 독립적이고 재사용 가능한 코드 블록으로 나눕니다.
• 각 컴포넌트는 자신만의 상태와 동작을 가지며, 다른 컴포넌트들과 조합하여 UI를 구성합니다.

2. 가상 DOM(Virtual DOM)

• React는 가상 DOM을 활용하여 실제 DOM 조작의 비용을 최소화합니다.
• 상태(state)나 속성(props)이 변경되면, 변경 사항을 가상 DOM에 적용한 뒤 실제 DOM과 비교하여 필요한 부분만 업데이트합니다. 이를 통해 성능이 최적화됩니다.

3. 선언적 프로그래밍

• "어떻게 할지"를 명령형으로 작성하는 대신, "무엇을 할지"를 선언적으로 기술합니다.
• React는 선언적인 방식을 통해 코드 가독성과 유지보수성을 높입니다.

---

React의 동작 과정

React의 동작 과정을 간단히 정리하면 다음과 같습니다:

1. 렌더링(Rendering)
   • React 컴포넌트는 상태(state)와 속성(props)을 기반으로 UI를 렌더링합니다.
   • 컴포넌트는 JSX(JavaScript XML)를 반환하며, 이것이 HTML 구조처럼 보이는 코드로 작성됩니다.
2. 가상 DOM 생성
   • 컴포넌트 렌더링 시 가상 DOM 트리를 생성합니다.
3. 변경 감지(Diffing)
   • 상태나 속성이 변경되면, React는 이전 가상 DOM과 새로운 가상 DOM을 비교(Diffing)합니다.
4. 필요한 부분만 업데이트
   • 변경이 감지된 요소만 실제 DOM에 반영합니다.

---

React의 기본 문법

1. JSX

• JSX는 JavaScript 안에 HTML을 작성할 수 있는 문법입니다.
• JSX는 Babel을 통해 JavaScript 코드로 변환됩니다.

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

2. 컴포넌트 작성

• React에서는 함수형 컴포넌트와 클래스형 컴포넌트를 사용할 수 있습니다.

함수형 컴포넌트

function Greeting() {
  return <h1>Hello, World!</h1>;
}

클래스형 컴포넌트

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

3. Props(속성)

• 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용됩니다.

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

function App() {
  return <Welcome name="React" />;
}

4. State(상태)

• 컴포넌트 내부에서 동적인 데이터를 관리합니다.

함수형 컴포넌트에서의 State 관리 (Hooks 사용)

import React, { useState } from 'react';

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

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

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

import React, { Component } from 'react';

class Counter extends Component {
  constructor() {
    super();
    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>
    );
  }
}

5. 이벤트 처리

• React에서는 CamelCase로 이벤트 핸들러를 작성합니다.

function App() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click Me</button>;
}

---