리액트 기초 01 - 핵심 요소 2 : 🧩 컴포넌트 (Component) 란?

컴포넌트 (Component)는 소프트웨어 공학 및 다양한 기술 분야에서 독립적이고 재사용 가능한 단위 모듈을 의미한다. 시스템을 구성하는 더 작은 부분으로, 특정 기능을 수행하며 다른 부분과 상호작용할 수 있다.

 

리액트에서는 컴포넌트를 다음과 같이 정의하고 있다.

• UI를 구성하는 독립적이고 재사용 가능한 부품
• 특정 기능을 가진 코드 조각
• HTML, CSS, JavaScript를 하나로 묶은 단위

쉽게 말하자면 '부품'이다.

예를 들어서 TV리모컨을 만든다고 치면 실제로 외부의 버튼도 있을 것이고, 리모컨 몸체도 있을 것이고, 내부의 센서도 있을 것이다. 이 모든 것들이 다 컴포넌트이다.

 

리모컨은 이런 부품들의 조합이지만 각각의 부품만으로도 존재한다. 예를 들어

버튼은 HTML로 따지면 onclick 기능이 작동하는 버튼이다.

몸체는 HTML로 따지면 body 부분이 될 것이다.

센서는 onclick 이벤트를 감지하는 이벤트리스너라고 할 수 있다.

1. 버튼

function Button() {
    const handleClick = () => {
        // 클릭 시 실행될 동작
        console.log("버튼이 클릭됨");
    };

    return (
        <button onClick={handleClick}>
            클릭하세요
        </button>
    );
}

2.몸체

function Body() {
    return (
        <div className="remote-body">
            {/* 다른 컴포넌트들이 들어갈 구조 */}
            <div className="button-container">
                {/* 버튼들이 위치할 자리 */}
            </div>
        </div>
    );
}

3.센서

function Sensor() {
    useEffect(() => {
        // 이벤트 리스너 설정
        const handleSignal = (event) => {
            console.log("신호 감지됨");
        };

        // 이벤트 리스너 등록
        document.addEventListener('signal', handleSignal);

        // 컴포넌트 제거 시 이벤트 리스너도 제거
        return () => {
            document.removeEventListener('signal', handleSignal);
        };
    }, []);

    return <div className="sensor"></div>;
}

 

이렇게 각각의 부품을 기능별로 나눠둔 것을 컴포넌트라고 할 수 있다.

 

물론 단위 모듈이기 때문에 저 3가지 기능을 합친 코드도 컴포넌트라고 할 수 있다.

 

또한 해당 컴포넌트들은 반드시 리모컨의 부품으로 사용될 필요도 없다.

재사용 가능하다는 것처럼 특정 기능을 가진 컴포넌트를 다른 시스템을 구현하기 위해 사용할 수 있다.

예를 들어서 버튼이 반드시 리모컨에만 있는 것은 아니듯이 TV버튼, 컴퓨터 전원 버튼, 에어컨 버튼 등 다양하게 재사용이 가능하다.

 

그리고 해당 컴포넌트들은 반드시 리모컨이 아니어도 독립적으로 존재할 수 있다.

각기 다른 기능이라 작동은 하지 않겠지만 리모컨을 분해한다고 버튼, 몸체, 센서가 증발해버리는 것은 아니듯이 말이다.

 

하지만 현실적으로 코드에 완전한 독립성은 존재하지 않는다. 애초에 하나의 거대한 프로그램의 부품인데 독립적으로 존재한다고 해서 얼마나 의미가 있겠는가?

때문에 컴포넌트는 기본적으로 독립적으로 존재할 수 있지만 다른 컴포넌트나 요소 등에 영향을 받을 수 있다.

예를 들어서 사람은 기본적으로 1명의 객체로 존재하지만 부모에게 이것저것 물려받을 수 있다. 예를 들어 재산이나, 외모 같은 것이다. 그런데 일반적인 상속처럼 부모의 모든 것을 물려 받는 것이 아니라 특정 부분만 전달 받을 수도 있을 것이다.

props(properties)

리액트에서 말하는 props는 바로 이런 부분적 상속 개념이다.

예를 들면 외모만 물려 받고 재산은 물려 받지 않는다거나 하는 것이다. 물론 현실에선 특정 값만 전달 받는 것은 불가능하지만 프로그램에선 가능하다.

// 부모
function Parent() {
    const traits = {
        height: 180,
        eyeColor: "brown",
        personality: "friendly",
        wealth: 1000000,
        hobby: "reading"
    };

    return (
        // 모든 특성을 전달하지 않고, 선택적으로 전달
        <Child 
            height={traits.height}     // 키는 전달
            eyeColor={traits.eyeColor} // 눈색깔도 전달
            // personality는 전달하지 않음
            // wealth도 전달하지 않음
            hobby={traits.hobby}       // 취미는 전달
        />
    );
}

// 자식
function Child({ height, eyeColor, hobby }) {
    // personality와 wealth는 받지 않음
    return (
        <div>
            <p>키: {height}</p>
            <p>눈색: {eyeColor}</p>
            <p>취미: {hobby}</p>
        </div>
    );
}

 

만약에 컴포넌트 A가 B로부터 props를 받으면 B는 A의 부모가 되고 A는 B의 자식이 된다.