React를 활용한 주니어 개발자를 위한 웹 애플리케이션 개발 🚀

React는 웹 애플리케이션을 만드는 데 있어 가장 인기 있는 프론트엔드 프레임워크 중 하나입니다. 간단하고 직관적인 디자인으로, 주니어 개발자들도 쉽게 접근할 수 있습니다. 이 글에서는 React의 기본적인 사용 방법과 함께 간단한 예제를 통해 웹 애플리케이션을 만드는 방법을 알아보겠습니다.

React란 무엇인가?

React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. Facebook이 개발했으며, 컴포넌트 기반의 아키텍처를 사용하여 웹 애플리케이션의 개발을 단순화합니다. 이는 재사용 가능한 UI 조각을 만들어, 개발 과정을 효율적으로 만들어 줍니다.

첫 번째 React 컴포넌트 만들기

React에서 가장 기본적인 단위는 컴포넌트입니다. 간단한 'Hello World' 컴포넌트를 만들어 보겠습니다.

import React from 'react';

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

export default HelloWorld;

위 코드는 HelloWorld라는 함수 컴포넌트를 만들고, 화면에 "Hello, World!"라는 텍스트를 표시합니다. React 컴포넌트는 항상 대문자로 시작해야 합니다.

상태 관리하기

React에서는 useState라는 Hook을 사용하여 컴포넌트의 상태를 관리할 수 있습니다. 예를 들어, 사용자가 입력한 텍스트를 화면에 표시하는 간단한 예제를 살펴보겠습니다.

import React, { useState } from 'react';

function TextInput() {
  const [text, setText] = useState('');

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>{text}</p>
    </div>
  );
}

export default TextInput;

위 예제에서는 useState를 사용하여 text라는 상태를 만들고, 입력 필드에 입력된 값을 text에 저장합니다. 사용자가 입력 필드에 텍스트를 입력할 때마다 handleChange 함수가 호출되어 text 상태가 업데이트되고, 화면에는 최신 text 값이 표시됩니다.

React로 간단한 투두 리스트 만들기

이제 React를 사용하여 간단한 투두 리스트를 만드는 방법을 살펴보겠습니다.

import React, { useState } from 'react';

function TodoList() {
  const [todo, setTodo] = useState('');
  const [todos, setTodos] = useState([]);

  function handleChange(event) {
    setTodo(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();
    setTodos([...todos, todo]);
    setTodo('');
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" value={todo} onChange={handleChange} />
        <button type="submit">Add</button>
      </form>
      <ul>
        {todos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

이 코드는 사용자가 입력한 텍스트를 투두 리스트에 추가하는 간단한 애플리케이션입니다. 사용자가 텍스트를 입력하고 'Add' 버튼을 클릭하면, 입력된 텍스트가 리스트에 추가됩니다.

React를 사용하면 이처럼 간단한 웹 애플리케이션부터 복잡한 대규모 애플리케이션까지 다양하게 개발할 수 있습니다. 주니어 개발자 여러분도 React를 시작해 보세요! 🚀