본문 바로가기
카테고리 없음

리액트 컴포넌트, 도대체 뭔가요? 핵심 사용법 완벽 정리

by 유하비 2025. 8. 12.
반응형

 

리액트 컴포넌트 사용법

code Html download content_copy expand_less

 

리액트 개발의 핵심, 컴포넌트에 대해 아직도 헷갈리시나요? 이 글에서는 리액트 컴포넌트의 기본 개념부터 실전 활용법까지, 꼭 필요한 내용만 쏙쏙 뽑아 알려드릴게요. 이 글을 다 읽고 나면 컴포넌트를 자신 있게 다룰 수 있을 거예요.

안녕하세요! 요즘 프론트엔드 개발, 특히 리액트에 관심 있는 분들이 정말 많으시죠? 저도 처음 리액트를 공부할 때 '컴포넌트'라는 개념 때문에 골치가 좀 아팠어요. 다들 레고 블록처럼 조립해서 화면을 만드는 거라고 설명하는데, 막상 코드를 짜려니 어디서부터 손대야 할지 막막하더라고요. 아마 많은 분들이 저와 비슷한 경험을 하셨을 거예요.

그래서 오늘은 리액트의 심장이라고 할 수 있는 컴포넌트 사용법에 대해 제대로 한번 파헤쳐 보려고 합니다. 이 글만 끝까지 읽으시면 '아, 컴포넌트가 이런 거구나!'하고 감을 잡으실 수 있을 거예요.

리액트 컴포넌트란 무엇일까요? 🤔

가장 쉽게 말해, 리액트 컴포넌트는 독립적인 UI 조각이라고 생각하시면 편해요. [1, 7] 예를 들어 인스타그램 화면을 생각해보세요. 상단의 로고, 하단의 내비게이션 바, 그리고 각각의 게시물 하나하나가 모두 별개의 컴포넌트로 만들어질 수 있어요. [2]

이렇게 잘게 쪼개서 만들면 뭐가 좋을까요? 바로 재사용성과 유지보수가 엄청나게 편해진다는 점이에요. 한번 만들어 둔 '게시물' 컴포넌트는 내용만 바꿔서 계속 재사용할 수 있고, 만약 게시물 디자인을 수정해야 한다면 해당 컴포넌트 파일 하나만 고치면 모든 게시물에 적용되니까요. 정말 효율적이죠?

컴포넌트의 두 가지 종류: 클래스 vs 함수 🆚

리액트 컴포넌트는 만드는 방식에 따라 크게 '클래스형'과 '함수형' 두 가지로 나뉘어요. 예전에는 클래스형을 주로 썼지만, 리액트 16.8 버전에 'Hook'이 도입된 이후로는 거의 모든 경우에 함수형 컴포넌트를 사용하는 추세랍니다. [10, 12] 훨씬 코드가 간결하고 이해하기 쉽거든요. 둘의 차이점을 표로 간단히 비교해볼게요.

구분 클래스형 컴포넌트 함수형 컴포넌트
선언 방식 `class` 키워드와 `render()` 메서드 사용 일반 JavaScript 함수 또는 화살표 함수로 선언
State 관리 `constructor`에서 `this.state`로 초기화 `useState()` Hook 사용
라이프사이클 `componentDidMount`, `componentDidUpdate` 등 메서드 사용 `useEffect()` Hook으로 대부분 대체 가능
장점 과거 레거시 코드와의 호환성 간결한 코드, 적은 메모리 사용, 테스트 용이 [10, 12]

실전! 함수형 컴포넌트 만들어보기 🛠️

백문이 불여일견! 직접 간단한 함수형 컴포넌트를 만들어보면서 감을 익혀봅시다. 가장 기본적인 형태의 컴포넌트에요.

Greeter 컴포넌트 예시 📝

    function Greeter() {
      return <h1>안녕하세요, 리액트 세계에 오신 것을 환영합니다!</h1>;
      }
      
      export default Greeter;

정말 간단하죠? `Greeter`라는 이름의 함수가 `h1` 태그를 반환(return)하고 있어요. 이렇게 HTML처럼 생긴 코드를 JSX(JavaScript XML)라고 부른답니다. 이제 다른 파일에서 이 `Greeter` 컴포넌트를 `` 와 같은 태그 형태로 불러와 사용할 수 있습니다. [9]

컴포넌트를 빛나게 하는 Props와 State ✨

컴포넌트가 진정한 힘을 발휘하려면 데이터를 다룰 줄 알아야 해요. 이때 등장하는 개념이 바로 `props`와 `state`입니다.

1. Props (속성): Props는 부모 컴포넌트가 자식 컴포넌트에게 물려주는 값이에요. [22] 자식 컴포넌트는 이 값을 받아서 화면에 보여줄 수는 있지만, 직접 수정할 수는 없어요. (읽기 전용!) [24]

2. State (상태): State는 컴포넌트가 자체적으로 가지는, 변할 수 있는 값이에요. 예를 들어 버튼을 클릭했을 때 숫자가 올라가는 카운터나, 사용자가 입력하는 값 등을 State로 관리하죠. 함수형 컴포넌트에서는 `useState`라는 Hook을 사용해 State를 만듭니다. [19, 23]

💡 알아두세요!
Props는 '부모가 주는 값'이라 자식이 바꿀 수 없고, State는 '컴포넌트 자신의 상태'라 스스로 변경할 수 있어요. 이 둘의 차이만 명확히 알아도 리액트가 훨씬 쉬워져요!

Props와 State를 활용한 카운터 예시 📝

    import React, { useState } from 'react';
    
    // 자식 컴포넌트: Props로 초기값과 버튼 텍스트를 받음
    function Counter({ initialCount, buttonText }) {
      // State: count라는 이름의 상태를 만들고, 초기값으로 props.initialCount를 사용
        const [count, setCount] = useState(initialCount);
        
          return (
              <div>
                    <p>현재 카운트: {count}</p>
                          <button onClick={() => setCount(count + 1)}>
                                  {buttonText}
                                        </button>
                                            </div>
                                              );
                                              }
                                              
                                              // 부모 컴포넌트
                                              function App() {
                                                return (
                                                    <div>
                                                          <h2>카운터 예제</h2>
                                                                {/* 자식에게 initialCount와 buttonText를 props로 전달 */}
                                                                      <Counter initialCount={0} buttonText="숫자 올리기" />
                                                                          </div>
                                                                            );
                                                                            }
 

핵심 요약: 이것만은 꼭 기억하세요! 📝

오늘 내용이 조금 많았죠? 다른 건 잊어버리더라도 아래 네 가지만은 꼭 기억해 주세요!

  1. 컴포넌트는 UI를 나누는 부품: 재사용성과 유지보수성을 높여주는 리액트의 핵심이에요. [2]
  2. 함수형 컴포넌트가 대세: 특별한 이유가 없다면 Hooks를 사용하는 함수형 컴포넌트로 만드세요. [11]
  3. 데이터 전달은 Props로: 부모에서 자식으로 데이터를 넘겨줄 때 사용하고, 자식은 수정할 수 없어요. [22]
  4. 상태 관리는 State로: 컴포넌트 내부에서 변하는 값을 다룰 땐 `useState` Hook을 사용해요. [19]
💡

리액트 컴포넌트 핵심 정리

재사용성: 레고 블록처럼 조립해 UI를 만들어요.
데이터 흐름: `Props`는 위에서 아래로, `State`는 내부에서 관리해요.
핵심 Hook:
const [state, setState] = useState(initialValue);
개발 경험: 코드가 간결해지고 유지보수가 쉬워져요.
컴포넌트를 잘 다루는 것이 리액트 전문가의 첫걸음입니다.

자주 묻는 질문 ❓

Q: 클래스 컴포넌트는 이제 아예 안 쓰나요?
A: 아니요, 기존에 클래스형으로 만들어진 프로젝트를 유지보수하거나, 에러 바운더리(Error Boundaries)처럼 아직 Hook으로 완벽히 대체되지 않은 특정 기능에서는 여전히 사용돼요. [12] 하지만 새로 개발을 시작한다면 함수형 컴포넌트와 Hook을 사용하는 것이 좋습니다. [10]
Q: Props로 받은 값을 자식 컴포넌트에서 바꾸고 싶으면 어떻게 해야 하나요?
A: Props는 직접 수정할 수 없기 때문에, 상태를 변경하는 함수를 부모 컴포넌트에서 만들어서 그 함수 자체를 Props로 자식에게 전달해야 해요. 그러면 자식은 그 함수를 호출함으로써 부모의 상태를 변경할 수 있게 됩니다.

이제 리액트 컴포넌트에 대한 감이 좀 오시나요? 처음엔 누구나 어렵지만, 직접 코드를 짜면서 이것저것 만들어보면 금방 익숙해질 거예요. 더 궁금한 점이 있다면 언제든 댓글로 물어봐 주세요! 😊

티스토리툴바