[기초]React란 무엇인가?

React는 Facebook에서 개발하고 유지보수하는 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위해 사용됩니다. React는 컴포넌트 기반의 아키텍처와 가상 DOM(Virtual DOM)을 활용하여 효율적이고 유연한 UI 개발을 가능하게 합니다. 다음은 React에 대한 자세한 설명입니다.

 

1. React의 주요 특징

컴포넌트 기반 구조

• 컴포넌트(Component): React 애플리케이션은 독립적인 컴포넌트들로 구성됩니다. 컴포넌트는 재사용 가능하며, 각 컴포넌트는 자신만의 상태(state)와 생명주기(lifecycle)를 가질 수 있습니다.
• 재사용성: 컴포넌트를 만들어 재사용할 수 있으므로, 코드의 중복을 줄이고 유지보수를 쉽게 할 수 있습니다.

 

가상 DOM (Virtual DOM)

• Virtual DOM: React는 실제 DOM을 조작하기 전에 가상 DOM을 사용합니다. 가상 DOM은 실제 DOM의 가벼운 사본으로, 상태가 변경되면 React는 가상 DOM을 먼저 업데이트한 후, 실제 DOM에 최소한의 변경만 적용합니다.
• 효율성: 가상 DOM 덕분에 실제 DOM 조작이 줄어들어 성능이 향상됩니다. React는 변경 사항을 배치(batch)하여 효율적으로 업데이트합니다.

 

단방향 데이터 흐름

• 단방향 데이터 바인딩: React는 데이터가 한 방향으로만 흐릅니다. 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달됩니다. 이를 통해 데이터의 흐름을 예측 가능하게 하고, 디버깅을 용이하게 합니다.
• Props: 부모 컴포넌트는 자식 컴포넌트에 props(속성)를 통해 데이터를 전달합니다. props는 읽기 전용입니다.

 

---

2. React의 주요 개념

JSX (JavaScript XML)

• JSX: JavaScript 내에서 HTML을 작성하는 것처럼 보이는 문법입니다. JSX는 컴파일러에 의해 JavaScript로 변환됩니다. JSX를 사용하면 UI 구조를 직관적으로 작성할 수 있습니다.

const element = <h1>Hello, world!</h1>;

 

 

컴포넌트

• 함수형 컴포넌트: 단순히 props를 받아 UI를 반환하는 함수입니다. 상태를 가질 수 없지만, React 훅(Hooks)을 사용하여 상태를 추가할 수 있습니다.

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

 

• 클래스형 컴포넌트: React.Component를 상속받아 만들어지며, 상태(state)와 생명주기 메서드를 가질 수 있습니다.

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

 

 

상태(State)

• State: 컴포넌트 내에서 동적인 데이터를 다루기 위해 사용됩니다. state는 컴포넌트의 생명주기 동안 변경될 수 있으며, 변경될 때마다 컴포넌트는 다시 렌더링 됩니다.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  
  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

 

 

생명주기 메서드 (Lifecycle Methods)

• 생명주기 메서드: 클래스형 컴포넌트에서 컴포넌트가 생성되고, 업데이트되고, 제거되는 시점을 다루는 메서드입니다.
  • componentDidMount(): 컴포넌트가 마운트 된 직후 호출됩니다. 여기서 네트워크 요청을 하거나 타이머를 설정할 수 있습니다.
  • componentDidUpdate(prevProps, prevState): 업데이트가 일어난 직후 호출됩니다.
  • componentWillUnmount(): 컴포넌트가 언마운트되기 직전에 호출됩니다. 여기서 타이머를 정리하거나 구독을 해제할 수 있습니다.

 

이벤트 처리

• 이벤트 처리: React는 이벤트를 처리하는 방법을 제공하며, 이벤트는 camelCase로 작성됩니다.

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isToggleOn: true };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

 

---

3. React 훅 (Hooks)

React 훅은 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해 줍니다. 몇 가지 주요 훅은 다음과 같습니다.

 

useState

• useState: 상태를 선언하고 그 상태를 업데이트할 수 있는 함수를 반환합니다.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

 

useEffect

• useEffect: 함수형 컴포넌트에서 부수 효과(side effect)를 수행할 수 있습니다. 예를 들어, 데이터를 가져오거나 구독을 설정할 때 사용됩니다.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;

    return () => {
      // Cleanup code can go here
    };
  }, [count]);  // Only re-run the effect if count changes

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

---

4. React 사용 예시

React는 다양한 애플리케이션에 사용될 수 있습니다. 다음은 간단한 투두 리스트 애플리케이션의 예시입니다.

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    setTodos([...todos, inputValue]);
    setInputValue('');
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

 

React는 현대 웹 개발에서 널리 사용되는 강력한 라이브러리로, 다양한 유형의 프로젝트에 적용될 수 있습니다. React의 기본 개념을 이해하고 활용하면, 더 복잡하고 강력한 애플리케이션을 개발할 수 있습니다.