리액트(React)를 알아보자

리액트(React) 개요와 특징, 기본 문법

리액트(React)는 페이스북에서 개발하고 유지하는 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 초점을 맞추고 있습니다. 주로 단일 페이지 애플리케이션(SPA)에서 동적인 웹 애플리케이션을 만들기 위해 사용됩니다. 컴포넌트 기반의 구조와 가상 DOM(Virtual DOM)을 활용해 효율적인 렌더링을 가능하게 하고, 유지보수가 용이한 코드 구조를 제공합니다.

리액트의 특징

1. 컴포넌트 기반 구조

리액트는 컴포넌트 단위로 UI를 구성합니다. 각 컴포넌트는 독립적이고 재사용 가능한 코드 블록으로, 하나의 컴포넌트는 특정 UI의 일부분을 담당하며, 여러 컴포넌트를 조합하여 전체 애플리케이션을 구성합니다.

2. 가상 DOM(Virtual DOM)

리액트는 변경 사항을 효율적으로 반영하기 위해 가상 DOM을 사용합니다. 실제 DOM을 직접 조작하는 대신, 가상 DOM에서 변경 사항을 비교하고 필요한 부분만 업데이트하여 성능을 최적화합니다.

3. 단방향 데이터 흐름

리액트는 단방향 데이터 바인딩을 사용하여 데이터가 부모 컴포넌트에서 자식 컴포넌트로만 전달됩니다. 이렇게 하면 데이터의 흐름이 예측 가능해져 디버깅이 쉽고 데이터 관리가 용이해집니다.

4. JSX 문법

JSX는 자바스크립트 확장 문법으로, HTML과 유사한 구조를 자바스크립트 코드에서 사용할 수 있게 합니다. 이로 인해 컴포넌트 내에서 UI 구조를 직관적으로 작성할 수 있습니다.

 

 

 

 

리액트의 기본 문법

1. JSX 문법

JSX는 리액트 컴포넌트의 UI를 정의하는 문법입니다. JavaScript와 HTML의 결합된 형태로, 아래와 같은 특징을 가지고 있습니다:

• HTML 태그와 비슷한 문법을 사용
• {}를 사용하여 JavaScript 표현식 사용 가능
• class 속성이 아닌 className 속성을 사용

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

 

 

 

2. 컴포넌트 생성

리액트에서는 컴포넌트를 함수형과 클래스형으로 정의할 수 있습니다.

함수형 컴포넌트

함수형 컴포넌트는 간단하게 JavaScript 함수로 컴포넌트를 정의하는 방식입니다.

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

클래스형 컴포넌트

클래스형 컴포넌트는 React.Component를 상속받아 컴포넌트를 정의합니다. 주로 상태(state)를 필요로 하는 컴포넌트에서 사용되지만, 최근에는 주로 함수형 컴포넌트와 훅(Hooks)을 사용합니다.

import React, { Component } from 'react';

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

3. Props와 State

Props

Props는 컴포넌트 간 데이터를 전달하는 데 사용됩니다. 부모 컴포넌트에서 자식 컴포넌트로 전달되며, 읽기 전용입니다.

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

// 사용 예시
<Welcome name="Alice" />

State

State는 컴포넌트 내부에서 관리되는 데이터입니다. 사용자의 입력에 따라 컴포넌트의 상태를 변경하고, 상태가 변경되면 자동으로 컴포넌트가 재렌더링됩니다.

import React, { useState } from 'react';

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

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

 

 

 

4. 이벤트 처리

리액트에서 이벤트는 카멜케이스로 작성되며, 함수 참조를 전달합니다.

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

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

5. 조건부 렌더링

리액트에서는 조건문을 통해 특정 조건에 따라 컴포넌트를 렌더링할 수 있습니다.

function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}

6. 리스트와 키

리스트를 렌더링할 때는 map() 메서드를 사용하여 반복적으로 컴포넌트를 렌더링할 수 있으며, 각 항목에는 고유한 key 속성이 필요합니다.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>{number}</li>
  );
  return <ul>{listItems}</ul>;
}

7. 컴포넌트 생명주기

클래스형 컴포넌트에서는 컴포넌트가 생성되고 소멸되는 시점에서 특정 메서드가 호출되며, 이를 생명주기 메서드라고 합니다.

•    componentDidMount: 컴포넌트가 마운트된 직후 호출
•    componentDidUpdate: 컴포넌트가 업데이트된 후 호출
•    componentWillUnmount: 컴포넌트가 언마운트되기 직전에 호출

함수형 컴포넌트에서는 주로 useEffect 훅을 사용하여 생명주기와 관련된 처리를 수행합니다.

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 컴포넌트가 마운트될 때 실행
    return () => {
      // 컴포넌트가 언마운트될 때 실행
    };
  }, []);
}

 

 

 

8. 훅(Hooks)

훅은 함수형 컴포넌트에서 상태 및 생명주기 기능을 사용할 수 있게 해주는 함수입니다. 대표적인 훅으로는 useState와 useEffect가 있으며, 커스텀 훅을 만들어 사용할 수도 있습니다.

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

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

  useEffect(() => {
    const timer = setInterval(() => setCount((c) => c + 1), 1000);
    return () => clearInterval(timer); // 언마운트 시 정리
  }, []);

  return <h1>{count}</h1>;
}

결론

리액트는 컴포넌트 기반, 가상 DOM, 단방향 데이터 흐름, JSX 등의 특징을 통해 효율적이고 유지보수하기 쉬운 UI를 개발할 수 있도록 합니다. 리액트를 활용하여 웹 애플리케이션을 개발하면, 간결한 코드로 높은 성능을 유지하면서도 사용자 경험을 향상시킬 수 있습니다.