리액트 강좌: 컴포넌트에 값 전달하기

리액트(React)는 자바스크립트 라이브러리 중 하나로, 사용자 인터페이스를 구축하는데 효과적입니다. 특히, 컴포넌트 기반 아키텍처 덕분에 재사용 가능하고 유지보수가 용이한 구조로 애플리케이션을 개발할 수 있습니다. 이번 강좌에서는 리액트의 컴포넌트 간에 데이터를 전달하는 방법에 대해 심도 있게 알아보겠습니다.

1. 리액트의 기본 개념

리액트는 컴포넌트라는 독립적인 UI 조각으로 구성되어 있으며, 이러한 컴포넌트들이 모여서 복잡한 사용자 인터페이스를 형성합니다. 컴포넌트는 크게 두 가지 유형으로 나뉩니다: 함수형 컴포넌트와 클래스형 컴포넌트입니다.

1.1 함수형 컴포넌트

함수형 컴포넌트는 리액트의 최신 트렌드이며, 굉장히 간단하게 작성할 수 있습니다. 다음은 기본적인 함수형 컴포넌트의 예입니다: 


function Greeting() {
    return <h1>안녕하세요!</h1>;
}

1.2 클래스형 컴포넌트

클래스형 컴포넌트는 JavaScript의 클래스를 사용하여 정의합니다. 아래는 클래스를 사용한 예입니다: 


class Greeting extends React.Component {
    render() {
        return <h1>안녕하세요!</h1>;
    }
}

2. 컴포넌트 간의 값 전달하기

컴포넌트 간에 데이터를 전달하는 가장 일반적인 방법은 props를 사용하는 것입니다. Props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용되는 객체입니다.

2.1 Props의 정의와 사용

Props는 컴포넌트의 속성(properties)으로, 주로 하위 컴포넌트의 렌더링을 제어합니다. 먼저, 부모 컴포넌트에서 자식 컴포넌트에 props를 전달하는 기본적인 예를 살펴보겠습니다. 


function ParentComponent() {
    const message = "안녕하세요! 리액트입니다.";
    return <ChildComponent message={message} />;
}

function ChildComponent(props) {
    return <p>{props.message}</p>;
}

위 예제에서는 ParentComponent에서 ChildComponent에 message라는 props를 전달하고 있습니다. 자식 컴포넌트는 이 값을 props.message를 통해 접근할 수 있습니다.

2.2 Props 타입 검사

리액트에서는 PropTypes를 사용하여 전달된 props의 데이터 타입을 검사할 수 있습니다. 이는 코드 안전성을 높이고, 디버깅을 쉽게 만듭니다. 예를 들어, 다음과 같이 사용할 수 있습니다: 


import PropTypes from 'prop-types';

ChildComponent.propTypes = {
    message: PropTypes.string.isRequired,
};

위 예제에서 ChildComponent는 message가 문자열 타입이어야 하며, 필수 속성으로 설정되었습니다.

3. 컴포넌트 간 데이터 전달의 다양한 패턴

리액트에서 데이터 전달 방식은 props 외에도 몇 가지 다른 패턴을 통해 이뤄집니다. 이 장에서는 이러한 경우를 살펴보겠습니다.

3.1 상위-하위 컴포넌트 간 데이터 전달

상위 컴포넌트는 자식 컴포넌트에 props를 통해 데이터를 전달할 수 있습니다. 이 방식은 단방향 데이터 흐름을 보장하며, 상태를 관리하기 좋은 구조입니다. 


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

    return (
        <div>
            <Counter count={count} />
            <button onClick={() => setCount(count + 1)}>증가</button>
        </div>
    );
}

function Counter(props) {
    return <p>현재 카운트: {props.count}</p>;
}

3.2 하위-상위 컴포넌트 간 데이터 전달

하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달하려면, 상위 컴포넌트에서 콜백 함수를 props로 자식에게 전달하는 방식이 일반적입니다. 


function ParentComponent() {
    const handleChildData = (data) => {
        console.log(data);
    };

    return <ChildComponent onSendData={handleChildData} />;
}

function ChildComponent(props) {
    const sendData = () => {
        props.onSendData("자식 컴포넌트에서 보낸 데이터!");
    };

    return <button onClick={sendData}>데이터 보내기</button>;
}

3.3 Context API를 사용한 데이터 전달

여러 컴포넌트에 걸쳐 데이터를 전달해야 할 경우 Context API를 사용하는 것이 효율적입니다. Context API는 전역 상태 관리의 한 형태로, props를 통해 데이터를 일일이 전달하지 않고도 컴포넌트 트리 하위에서 데이터에 접근할 수 있게 해줍니다. 


import React, { createContext, useContext } from 'react';

const MyContext = createContext();

function App() {
    return (
        <MyContext.Provider value={"전역 데이터"}>
            <ChildComponent />
        </MyContext.Provider>
    );
}

function ChildComponent() {
    const data = useContext(MyContext);
    return <p>{data}</p>;
}

4. 마무리

리액트에서 컴포넌트 간의 데이터 전달은 핵심적인 개념입니다. 이 강좌에서는 props를 사용한 데이터 전달 방법과 다양한 패턴에 대해 알아보았습니다. 각각의 경우에 따라 적절한 방법을 선택하고, 구조화된 프로그래밍 방식을 적용함으로써 효율적인 리액트 애플리케이션을 구축할 수 있습니다. 리액트를 배우는 과정에서 이 개념을 잘 익혀두면, 복잡한 애플리케이션을 다루는 데 큰 도움이 될 것입니다.

5. 참고 자료