How to Create Components in React?

 

React에서 컴포넌트는 사용자 인터페이스의 구조와 동작을 정의하는 빌딩 블록입니다. 컴포넌트를 사용하면 UI를 더 작은 재사용 가능한 부분으로 나눌 수 있어 코드의 유지 보수성과 효율성을 높일 수 있습니다. React에는 함수형 컴포넌트와 클래스 컴포넌트라는 두 가지 주요 컴포넌트 유형이 있습니다. 각 유형을 만드는 방법은 다음과 같습니다:

---

1. 함수형 컴포넌트 (Functional Components)

함수형 컴포넌트는 React에서 컴포넌트를 생성하는 가장 일반적이고 현대적인 방법입니다. 이는 React 요소(UI 요소)를 반환하는 단순한 JavaScript 함수입니다.

함수형 컴포넌트 생성 단계:

1. 함수 정의: props(선택 사항)를 매개변수로 받아 JSX(React 요소)를 반환하는 함수를 생성합니다.
2. JSX 반환: 함수 내부에서 UI의 구조를 나타내는 JSX를 반환합니다.

예제:

javascript

import React from 'react'; function Greeting(props) { return <h1>Hello, {props.name}!</h1>; } export default Greeting;

위 예제에서 Greeting은 name이라는 prop을 받아 개인화된 인사말을 표시하는 함수형 컴포넌트입니다.

---

2. 클래스 컴포넌트 (Class Components)

클래스 컴포넌트는 React가 Hooks를 도입하기 전에 컴포넌트를 생성하는 전통적인 방법이었습니다. JavaScript 클래스 형태로 작성되며, 반드시 JSX를 반환하는 render() 메서드를 포함해야 합니다.

클래스 컴포넌트 생성 단계:

1. 클래스 생성: React.Component를 확장하는 클래스를 정의합니다.
2. render 메서드 추가: JSX를 반환하는 render() 메서드를 클래스에 포함합니다.
3. 선택적 상태 관리: 클래스 컴포넌트는 내부 상태를 사용하여 동적 데이터를 관리할 수 있습니다.

예제:

javascript

import React, { Component } from 'react'; class Greeting extends Component { render() { return <h1>Hello, {this.props.name}!</h1>; } } export default Greeting;

위 예제에서 Greeting은 구조가 더 복잡한 클래스 컴포넌트로, 함수형 컴포넌트와 동일한 동작을 수행합니다.

---

3. 컴포넌트에서 Props 사용

컴포넌트는 props(속성)를 받아 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있습니다. 이를 통해 컴포넌트를 더욱 동적이고 재사용 가능하게 만들 수 있습니다.

예를 들어, Greeting 컴포넌트에서 name은 부모 컴포넌트로부터 전달되는 prop입니다.

---

4. 함수형 컴포넌트에서 상태 사용 (Hooks 활용)

현대 React 개발에서는 함수형 컴포넌트에서도 useState 훅을 사용하여 상태를 관리할 수 있습니다. 이를 통해 클래스 컴포넌트 없이도 상호작용하는 컴포넌트를 생성할 수 있습니다.

상태를 사용하는 예제:

javascript

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> ); } export default Counter;

위 예제에서 Counter는 useState 훅을 사용하여 count의 상태를 관리하며, 버튼 클릭 시 상태를 업데이트합니다.

---

React에서 컴포넌트를 생성하는 방법은 함수형 컴포넌트(권장) 또는 클래스 컴포넌트를 사용하는 것입니다. 함수형 컴포넌트는 작성과 유지 관리가 용이하며, 클래스 컴포넌트는 생명주기 메서드 및 내부 상태 관리와 같은 추가 기능을 제공합니다. 컴포넌트를 생성하고 사용하는 방법을 이해하면 React를 사용해 모듈화되고 재사용 가능한 UI를 쉽게 구축할 수 있습니다