본문으로 건너뛰기

리액트.js 개요.

리액트.js 소개​

리액트.js는 사용자 인터페이스를 구축하기 위한 오픈 소스 자바스크립트 라이브러리로서, 일반적으로 리액트라고 불립니다. 이는 페이스북에 의해 개발되었으며, 현재 페이스북과 개발자 및 기업 커뮤니티에 의해 유지 보수되고 있습니다.

리액트는 컴포넌트 기반 아키텍처로 유명하여, 개발자들이 재사용 가능한 UI 컴포넌트를 구축할 수 있게 해줍니다. 이러한 컴포넌트들은 복합적인 사용자 인터페이스를 만들기 위해 조합됩니다. 리액트는 선언적인 접근 방식을 따르며, 개발자가 UI가 어떻게 보여야 하는지를 설명하고, 리액트는 기반이 되는 데이터가 변경될 때 UI를 업데이트하는 작업을 처리합니다.

리액트.js의 역사​

리액트는 페이스북의 소프트웨어 엔지니어인 조던 워크(Jordan Walke)에 의해 2011년에 처음으로 만들어졌으며, 페이스북의 웹 애플리케이션의 사용자 인터페이스를 보다 효율적으로 업데이트하기 위한 필요성을 해결하기 위해 개발되었습니다. 이후 2013년에 오픈 소스로 공개되었습니다.

릴리스 이후, 리액트는 엄청난 인기를 얻었으며, 사용자 인터페이스를 구축하기 위해 가장 널리 사용되는 자바스크립트 라이브러리 중 하나가 되었습니다. 활발한 커뮤니티가 있어 계속적인 개발과 개선에 기여하고 있습니다.

리액트.js의 특징​

1. 가상 DOM​

리액트는 가상 DOM(Document Object Model)을 사용합니다. 가상 DOM은 실제 DOM의 가벼운 복사본입니다. 가상 DOM을 통해 리액트는 UI의 변경된 부분만 효율적으로 업데이트할 수 있으며, 전체 UI를 다시 렌더링하는 대신 변경된 부분만 업데이트합니다. 이는 더 빠른 성능과 부드러운 사용자 경험을 제공합니다.

다음은 리액트의 가상 DOM이 작동하는 예시입니다:

// 초기 렌더링
const element = <h1>Hello, React!</h1>;
ReactDOM.render(element, document.getElementById('root'));

// DOM 업데이트
const updatedElement = <h1>Hello, React!</h1>;
ReactDOM.render(updatedElement, document.getElementById('root'));

위의 코드에서 리액트는 업데이트된 element를 초기 렌더링과 비교하여 실제 DOM에서 필요한 변경 사항만 업데이트합니다.

2. 컴포넌트 기반 아키텍처​

리액트는 컴포넌트 기반 아키텍처를 따릅니다. 이를 통해 재사용 가능한 컴포넌트를 조합하여 UI를 구축할 수 있습니다. 각 컴포넌트는 자체 로직과 상태를 캡슐화하여 관리하고 테스트하기 쉽게 만들어줍니다.

다음은 간단한 리액트 컴포넌트의 예시입니다:

class Button extends React.Component {
  render() {
    return <button>{this.props.label}</button>;
  }
}

ReactDOM.render(<Button label="Click me!" />, document.getElementById('root'));

위 코드에서 Button 컴포넌트가 정의되고 label prop과 함께 렌더링됩니다. render 메소드는 prop으로 전달된 레이블을 가진 버튼 엘리먼트를 반환합니다.

3. JSX 구문​

리액트는 자바스크립트 내에 HTML과 유사한 코드를 작성할 수 있게 해주는 JSX(JavaScript XML)를 사용합니다. JSX는 컴포넌트와 그 구조를 정의하기 쉽게 만들어줍니다.

다음은 JSX 구문의 예시입니다:

class Message extends React.Component {
  render() {
    return <div>
      <h2>{this.props.title}</h2>
      <p>{this.props.content}</p>
    </div>;
  }
}

ReactDOM.render(
  <Message title="Welcome" content="Hello, React!" />,
  document.getElementById('root')
);

위 코드에서 Message 컴포넌트가 JSX 구문을 사용하여 정의되었으며, title과 content prop을 가지고 있습니다. render 메소드는 h2와 p 엘리먼트를 포함한 div 엘리먼트를 반환합니다.

리액트.js 예시​

예시 1: 카운터​

우선, 버튼을 클릭할 때마다 값을 증가시키는 간단한 카운터 컴포넌트부터 시작해봅시다.

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

  incrementCount() {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  }

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

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

위 코드에서 Counter 컴포넌트는 상태 count를 유지하고, 버튼이 클릭될 때마다 상태를 업데이트합니다. incrementCount 메소드는 setState를 사용하여 상태를 업데이트하고 컴포넌트를 다시 렌더링합니다.

예시 2: 할 일 목록​

사용자가 항목을 추가하고 제거할 수 있는 간단한 할 일 목록을 만들어봅시다.

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { todos: [], newTodo: '' };
  }

  addTodo() {
    this.setState(prevState => ({
      todos: [...prevState.todos, prevState.newTodo],
      newTodo: ''
    }));
  }

  removeTodo(index) {
    this.setState(prevState => ({
      todos: prevState.todos.filter((_, i) => i !== index)
    }));
  }

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.newTodo}
          onChange={event => this.setState({ newTodo: event.target.value })}
        />
        <button onClick={() => this.addTodo()}>Add</button>
        <ul>
          {this.state.todos.map((todo, index) => (
            <li key={index}>
              {todo}
              <button onClick={() => this.removeTodo(index)}>Remove</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

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

위 코드에서 TodoList 컴포넌트는 할 일 항목의 배열인 todos와 사용자가 입력한 새로운 할 일 항목을 담는 newTodo 상태를 유지합니다. addTodo 메소드는 새로운 할 일 항목을 todos 배열에 추가하고, removeTodo 메소드는 특정 인덱스의 할 일 항목을 배열에서 제거합니다.

리액트에 대해 더 알고 싶다면, 공식 웹사이트를 방문해보세요.

이 튜토리얼이 리액트.js와 그 특징에 대해 잘 이해하실 수 있기를 바랍니다.