리액트 컴포넌트 이해하기

byCode Keeper •


리액트 컴포넌트 이해하기


리액트(React)는 컴포넌트 기반 아키텍처를 통해 웹 애플리케이션을 구축하는 데 최적화된 자바스크립트 라이브러리입니다. 컴포넌트는 리액트 애플리케이션의 기본 구성 요소로, UI를 구성하는 독립적이고 재사용 가능한 부분을 정의합니다. 이 포스팅에서는 리액트 컴포넌트의 개념과 사용법에 대해 자세히 알아보고, 컴포넌트를 생성하고 활용하는 방법을 예제를 통해 살펴보겠습니다.


리액트 컴포넌트란 무엇인가?


리액트 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 단위입니다. 각 컴포넌트는 고유한 상태와 속성을 가질 수 있으며, 이를 통해 복잡한 UI를 효율적으로 관리할 수 있습니다. 리액트 컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉩니다.


함수형 컴포넌트


함수형 컴포넌트는 단순한 함수로 정의됩니다. 함수형 컴포넌트는 리액트 훅(Hooks)을 사용하여 상태와 생명주기 기능을 구현할 수 있습니다.


import React from 'react';

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

export default Welcome;

위 코드에서 Welcome 함수는 리액트 컴포넌트로, props를 통해 전달받은 name을 출력합니다.


클래스형 컴포넌트


클래스형 컴포넌트는 ES6 클래스를 사용하여 정의됩니다. 클래스형 컴포넌트는 state와 생명주기 메서드를 사용할 수 있습니다.


import React, { Component } from 'react';

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

export default Welcome;

위 코드에서 Welcome 클래스는 리액트 컴포넌트로, props를 통해 전달받은 name을 출력합니다.


리액트 컴포넌트 생성하기


리액트 컴포넌트를 생성하는 방법에는 여러 가지가 있지만, 가장 기본적인 방법은 함수형 컴포넌트와 클래스형 컴포넌트를 사용하는 것입니다. 여기서는 함수형 컴포넌트를 중심으로 살펴보겠습니다.


함수형 컴포넌트 생성


함수형 컴포넌트는 단순히 자바스크립트 함수를 정의하고, JSX를 반환하면 됩니다. 예를 들어, 다음과 같은 간단한 컴포넌트를 만들어보겠습니다.


import React from 'react';

function Greeting(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

export default Greeting;

위 예제에서 Greeting 컴포넌트는 name이라는 props를 받아서 인사말을 출력합니다. 이 컴포넌트를 사용하려면 다음과 같이 작성할 수 있습니다.


import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting';

ReactDOM.render(<Greeting name="홍길동" />, document.getElementById('root'));

위 코드에서 Greeting 컴포넌트를 root DOM 요소에 렌더링합니다.


클래스형 컴포넌트 생성


클래스형 컴포넌트를 사용하여 동일한 컴포넌트를 작성할 수도 있습니다.


import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>안녕하세요, {this.props.name}님!</h1>;
  }
}

export default Greeting;

이 예제에서 Greeting 클래스형 컴포넌트는 props를 통해 전달받은 name을 출력합니다.


리액트 컴포넌트의 상태 관리


리액트 컴포넌트는 상태를 가질 수 있습니다. 상태는 컴포넌트의 동적인 데이터를 관리하는 데 사용됩니다. 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 관리할 수 있습니다.


useState 훅 사용하기


useState 훅을 사용하여 상태를 관리하는 예제를 살펴보겠습니다.


import React, { useState } from 'react';

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

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

export default Counter;

위 예제에서 Counter 컴포넌트는 count 상태를 관리하고, 버튼을 클릭할 때마다 상태를 갱신합니다.


클래스형 컴포넌트에서 상태 관리


클래스형 컴포넌트에서는 state를 사용하여 상태를 관리할 수 있습니다.


import React, { Component } from 'react';

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

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  decrement = () => {
    this.setState({ count: this.state.count - 1 });
  }

  render() {
    return (
      <div>
        <p>카운트: {this.state.count}</p>
        <button onClick={this.increment}>증가</button>
        <button onClick={this.decrement}>감소</button>
      </div>
    );
  }
}

export default Counter;

이 예제에서 Counter 클래스형 컴포넌트는 state를 사용하여 count 상태를 관리하고, 버튼을 클릭할 때마다 상태를 갱신합니다.


리액트 컴포넌트의 생명주기


리액트 컴포넌트는 생성, 업데이트, 제거되는 과정에서 여러 생명주기 메서드를 호출합니다. 함수형 컴포넌트에서는 useEffect 훅을 사용하여 생명주기 메서드를 대체할 수 있습니다.


useEffect 훅 사용하기


useEffect 훅을 사용하여 컴포넌트의 생명주기를 관리하는 예제를 살펴보겠습니다.


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

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

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <p>타이머: {count}초</p>;
}

export default Timer;

위 예제에서 Timer 컴포넌트는 useEffect 훅을 사용하여 매초마다 count 상태를 증가시키는 타이머를 설정합니다.


클래스형 컴포넌트에서 생명주기 메서드 사용하기


클래스형 컴포넌트에서는 다양한 생명주기 메서드를 사용할 수 있습니다.


import React, { Component } from 'react';

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

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState(prevState => ({ count: prevState.count + 1 }));
    }, 1000);
  }

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

  render() {
    return <p>타이머: {this.state.count}초</p>;
  }
}

export default Timer;

이 예제에서 Timer 클래스형 컴포넌트는 componentDidMount와 componentWillUnmount 생명주기 메서드를 사용하여 타이머를 설정하고 해제합니다.


리액트 컴포넌트의 활용


리액트 컴포넌트는 재사용 가능하고 독립적인 UI 요소를 만들기 위해 사용됩니다. 이를 통해 코드의 유지 보수성을 높이고, 개발 효율성을 극대화할 수 있습니다.


컴포넌트 조합


리액트 컴포넌트는 다른 컴포넌트를 포함하여 복잡한 UI를 구성할 수 있습니다. 다음 예제를 통해 컴포넌트 조합을 살펴보겠습니다.


import React from 'react';

function Header() {
  return <h1>리액트 컴포넌트 조합 예제</h1>;
}

function Footer() {
  return <p>Footer 내용</p>;
}

function Layout() {
  return (
    <div>
      <Header />
      <p>본문 내용</p>
      <Footer />
    </div>
  );
}

export default Layout;

위 예제에서 Layout 컴포넌트는 Header와 Footer 컴포넌트를 포함하여 전체 레이아웃을 구성합니다.


컴포넌트 재사용


리액트 컴포넌트를 재사용하여 코드를 효율적으로 작성할 수 있습니다. 다음 예제를 통해 컴포넌트 재사용을 살펴보겠습니다.


import React from 'react';

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function App() {
  const handleClick = () => {
    alert('버튼이 클릭되었습니다!');
  };

  return (
    <div>
      <Button label="클릭하세요" onClick={handleClick} />
      <Button label="또 클릭하세요" onClick={handleClick} />
    </div>
  );
}

export default App;

위 예제에서 Button 컴포넌트는 App 컴포넌트에서 여러 번 재사용됩니다.


주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 리액트 컴포넌트의 개념과 사용법, 컴포넌트 생성, 상태 관리, 생명주기, 그리고 컴포넌트 활용 방법에 대해 살펴보았습니다. 리액트 컴포넌트는 독립적이고 재사용 가능한 UI 요소를 만들기 위한 핵심 도구입니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:



Tags:
다음 이전