[React] React 컴포넌트란? 기본 개념편

 

들어가며

리액트는 현대 웹 개발에서 가장 인기 있는 라이브러리 중 하나입니다. 리액트 컴포넌트는 리액트의 핵심 개념으로, UI를 구성하는 기본 단위입니다. 이번 게시글에서는 리액트 컴포넌트에 대한 기본 개념을 알아보겠습니다.

 

Keypoint

• 상태 관리
• 생명주기
• 최적화
• 설계 패턴

 

---

리액트 컴포넌트 시작하기

리액트 컴포넌트란?

리액트 컴포넌트는 UI를 구성하는 기본 단위로, 재사용 가능한 자바스크립트 함수 또는 클래스입니다. 컴포넌트는 prop (속성)을 입력받아 JSX를 반환하여 UI를 렌더링합니다.

 

컴포넌트의 종류

함수형 컴포넌트

자바스크립트 함수로 정의되며, React Hooks를 사용해 상태와 생명주기를 관리합니다.

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

클래스형 컴포넌트

ES6 클래스를 기반으로 정의되며, 현재는 함수형 컴포넌트로 대체되는 추세입니다.

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

 

---

좀 더 알아보기

상태 및 데이터 흐름 관리

State와 Props의 차이

• State : 컴포넌트 내부에서 관리하는 동적인 데이터. `useState` 훅을 통해 관리
• Props : 부모 컴포넌트가 자식 컴포넌트에 전달하는 읽기 전용 데이터

리액트에서 상태 관리하기

리액트는 `useState` 또는 `useReducer` 훅을 사용하여 상태를 관리합니다. 상태 변경 시 UI는 자동으로 다시 렌더링됩니다.

`useState` 예제

import { useState } from 'react';

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

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increase</button>
        </div>
    );
}

`useReducer` 예제

import { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            throw new Error('Unknown action type');
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>+</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
        </div>
    );
}

export default Counter;

 

생명주기

리액트 컴포넌트는 생성, 업데이트, 제거의 생명주기를 가집니다.

함수형 컴포넌트

`useEffect` 훅을 사용해 생명주기 로직을 구현합니다.

useEffect(() => {
    console.log('Component mounted or updated');
    return () => console.log('Component will unmount');
}, []); // 의존성 배열

 

최적화 기법

리렌더링 최적화

리액트는 상태 변화에 따라 컴포넌트를 리렌더링합니다. 불필요한 리렌더링을 방지하려면 다음 기법을 사용할 수 있습니다.

• React.memo : props가 변경되지 않으면 컴포넌트를 재사용
• useCallback과 useMemo : 함수와 값을 메모이제이션하여 불필요한 재생성을 방지

키(key) 속성

리스트를 렌더링할 때 Key 속성을 사용하여 변경 사항을 효율적으로 추적합니다.

const items = ['Apple', 'Banana', 'Cherry'];

<ul>
    {items.map((item, index) => (
        <li key={index}>{item}</li>
    ))}
</ul>

 

컴포넌트 설계 및 재사용성

재사용 가능한 컴포넌트 만들기

컴포넌트를 작게 분리하고 props로 동작과 데이터를 전달하여 재사용성을 높입니다.

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

설계 패턴

• 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트 : UI와 비즈니스 로직을 분리
• Higher-Order Component (HOC)
• Render Props
• FSD

 

리액트 훅

주요 훅:

• `useState` : 상태 관리
• `useEffect` : 사이드 이펙트 관리
• `useContext` : 전역 상태 관리
• `useReducer` : 복잡한 상태 로직 처리

 

심화주제

상태관리 라이브러리

리액트는 복잡한 애플리케이션 상태를 관리하기 위해 외부 라이브러리를 활용합니다. Redux, MobX, Zustand 등의 라이브러리를 사용할 때 장단점을 이해해야 합니다.

Server-Side Rendering (SSR)

Next.js를 사용하여 서버사이드 렌더링으로 SEO를 개선하고 초기 로딩 속도를 최적화할 수 있습니다.

컴포넌트 테스트

React Testing Library와 Jest를 사용하여 컴포넌트를 테스트하고 품질을 보장하도록 합니다.