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

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

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

 

리액트 컴포넌트 사용법

 

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

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

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

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

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

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

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

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

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

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

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

Greeter 컴포넌트 예시 📝

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

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

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

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

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

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

💡 알아두세요!
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. 함수형 컴포넌트가 대세: 특별한 이유가 없다면 Hooks를 사용하는 함수형 컴포넌트로 만드세요. 
  3. 데이터 전달은 Props로: 부모에서 자식으로 데이터를 넘겨줄 때 사용하고, 자식은 수정할 수 없어요. 
  4. 상태 관리는 State로: 컴포넌트 내부에서 변하는 값을 다룰 땐 `useState` Hook을 사용해요. 
💡

리액트 컴포넌트 핵심 정리

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

자주 묻는 질문 ❓

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

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

티스토리툴바