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

초보자를 위한 리액트(React) 컴포넌트 완벽 정복 가이드

by 자연에닿다 2025. 8. 9.
반응형

 

리액트 컴포넌트 사용법

code Html download content_copy expand_less

 

리액트 컴포넌트, 아직도 어렵게 느껴지시나요? 이 글에서는 리액트 개발의 핵심인 '컴포넌트'의 개념부터 실용적인 사용법까지, 마치 레고 블록을 조립하듯 쉽고 재미있게 알려드릴게요.

"리액트? 그거 어렵다던데..." 혹시 이런 생각 해보셨나요? 저도 처음엔 그랬어요. 수많은 코드와 복잡해 보이는 구조에 머리가 지끈거렸죠. 하지만 리액트의 핵심인 '컴포넌트' 개념을 이해하고 나니, 마치 레고 블록으로 원하는 모양을 자유자재로 만드는 것처럼 개발이 재미있어지기 시작했습니다.

이 글은 과거의 저처럼 리액트 컴포넌트 앞에서 막막함을 느끼는 분들을 위해 준비했습니다. 가장 기초적인 개념부터 시작해서, 실제 코드 예시와 함께 차근차근 따라 하다 보면 어느새 컴포넌트와 절친이 되어 있는 자신을 발견하게 될 거예요!

 

리액트 컴포넌트, 대체 뭔가요? 🤔

리액트 컴포넌트는 UI(사용자 인터페이스)를 구성하는 독립적이고 재사용 가능한 코드 조각입니다. [2, 9] 웹사이트를 하나의 큰 집이라고 상상해 보세요. 컴포넌트는 그 집을 이루는 벽돌, 창문, 문과 같은 부품들이라고 할 수 있습니다. [15] 잘 만들어진 창문(컴포넌트)이 있다면, 어느 방에든 가져다 붙일 수 있는 것처럼요.

이런 컴포넌트 기반 개발 방식 덕분에 우리는 코드의 재사용성을 높이고 유지보수를 훨씬 쉽게 할 수 있습니다. [30] 예를 들어, 웹사이트 여러 곳에 동일한 디자인의 버튼이 필요하다면, 'MyButton'이라는 컴포넌트 하나만 만들어두고 필요할 때마다 가져다 쓰면 되는 거죠.

💡 알아두세요!
리액트 컴포넌트에는 크게 '클래스형 컴포넌트'와 '함수형 컴포넌트' 두 종류가 있습니다. [26] 예전에는 클래스형을 많이 사용했지만, 'Hook'이라는 기능이 추가된 이후로는 함수형 컴포넌트를 사용하는 것이 대세가 되었고, 리액트 공식 문서에서도 이를 권장하고 있어요. [7, 12] 이 글에서도 함수형 컴포넌트를 기준으로 설명할게요!

 

가장 기본적인 컴포넌트 만들기 🛠️

백문이 불여일견이죠? 직접 간단한 컴포넌트를 만들어보겠습니다. 자바스크립트 함수를 하나 만드는 것과 거의 똑같아서 전혀 어렵지 않아요. [1]

'Welcome' 컴포넌트 예시 📝

아래 코드는 "환영합니다!"라는 텍스트를 보여주는 가장 단순한 형태의 컴포넌트입니다.

function Welcome() {
                  return <h1>환영합니다!</h1>;
                  }

정말 간단하죠? 이렇게 함수를 만들고, 화면에 보여주고 싶은 내용을 HTML처럼 생긴 JSX 문법으로 return 해주면 컴포넌트 하나가 뚝딱 완성됩니다. 여기서 중요한 점은 컴포넌트의 이름은 반드시 대문자로 시작해야 한다는 것입니다. [18]

컴포넌트의 재료, Props 제대로 알기 🎁

컴포넌트의 진가는 '재사용'에 있다고 했죠? 이때 아주 중요한 역할을 하는 것이 바로 props(프롭스)입니다. Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 '재료'라고 생각하면 쉬워요. [11, 21] 이 재료 덕분에 같은 컴포넌트라도 상황에 따라 다른 내용을 보여줄 수 있습니다.

Props를 사용한 컴포넌트 예시 📝

function Welcome(props) {
                  return <h1>{props.name}님, 환영합니다!</h1>;
                  }
                  
                  // 컴포넌트 사용
                  <Welcome name="철수" />
                  <Welcome name="영희" />

위 코드에서 name="철수" 부분이 바로 props입니다. Welcome 컴포넌트는 'name'이라는 재료를 받아서 "철수님, 환영합니다!"를, "영희"라는 재료를 받아서 "영희님, 환영합니다!"를 화면에 보여주게 됩니다.

 

컴포넌트의 상태 관리, State와 useState 💡

Props가 부모에게서 물려받는 '정적인' 데이터라면, state(스테이트)는 컴포넌트 '내부에서' 스스로 관리하고 변경할 수 있는 '동적인' 데이터입니다. [8] 예를 들어, 버튼을 클릭했을 때 숫자가 올라가거나, 사용자가 입력창에 글자를 쓸 때 내용이 바뀌는 것 등이 모두 state의 역할입니다.

함수형 컴포넌트에서는 이 state를 관리하기 위해 useState 라는 Hook을 사용합니다. [4, 16] `useState`는 컴포넌트에게 "이 값이 바뀌면 화면을 다시 그려줘!"라고 알려주는 신호탄 같은 것이라고 할 수 있어요. [3]

`useState`를 사용한 카운터 예시 📝

import { useState } from 'react';
                
                function Counter() {
                  const [count, setCount] = useState(0); // 0에서 시작하는 count state 생성
                  
                    return (
                        <div>
                              <p>현재 숫자: {count}</p>
                                    <button onClick={() => setCount(count + 1)}>
                                            1 증가시키기
                                                  </button>
                                                      </div>
                                                        );
                                                        }

버튼을 클릭할 때마다 setCount 함수가 호출되어 count state가 1씩 증가하고, 리액트는 state가 변경된 것을 감지하여 화면을 자동으로 다시 그려줍니다.

컴포넌트, 이것만은 주의하세요! ⚠️

컴포넌트를 사용할 때 흔히 하는 몇 가지 실수가 있습니다. 이것들만 잘 기억해둬도 골치 아픈 버그를 많이 줄일 수 있어요.

⚠️ 주의하세요!
  • Props는 읽기 전용(Read-Only)입니다. 자식 컴포넌트에서 부모로부터 받은 props를 직접 수정하려고 하면 안 돼요. Props는 항상 위에서 아래로 흐르는 단방향 데이터 흐름을 따릅니다. [13]
  • State를 직접 수정하지 마세요. 예를 들어, count = count + 1 처럼 직접 값을 바꾸면 리액트가 변화를 감지하지 못해 화면이 업데이트되지 않아요. 반드시 `useState`가 제공하는 `set` 함수(예: `setCount`)를 사용해야 합니다.
  • 컴포넌트 이름은 꼭 대문자로 시작하세요. 소문자로 시작하면 리액트가 일반 HTML 태그로 인식해서 오류가 발생할 수 있습니다. [18]

 

핵심만 쏙쏙! 리액트 컴포넌트 요약 📝

지금까지 배운 내용을 간단하게 정리해볼까요?

  1. 컴포넌트: UI를 구성하는 재사용 가능한 독립적인 코드 조각. [2]
  2. 함수형 컴포넌트: 현재 표준으로 사용되는 컴포넌트 작성 방식. [7]
  3. Props: 부모에서 자식으로 데이터를 전달하는 읽기 전용 속성.
  4. State: 컴포넌트 내부에서 관리하는 동적인 데이터. `useState` Hook으로 관리. [14]
  5. JSX: 자바스크립트 안에서 HTML처럼 UI를 작성할 수 있게 해주는 문법 확장.

 

 

자주 묻는 질문 ❓

Q: Props와 State의 가장 큰 차이점은 무엇인가요?
A: 가장 큰 차이는 '누가 데이터를 소유하고 제어하는가'에 있습니다. Props는 부모 컴포넌트가 소유하며 자식에게 전달하는 읽기 전용 데이터입니다. 반면, State는 컴포넌트 자신이 소유하고 직접 수정할 수 있는 데이터입니다. 즉, 데이터의 흐름과 수정 가능 여부가 핵심 차이점이에요.
Q: 꼭 함수형 컴포넌트만 사용해야 하나요? 클래스형 컴포넌트는 이제 못 쓰나요?
A: 아니요, 클래스형 컴포넌트도 여전히 사용할 수 있습니다. 특히 예전에 만들어진 프로젝트나 특정 라이브러리에서는 클래스형 컴포넌트를 볼 수 있어요. [10] 하지만 리액트 팀은 새로운 프로젝트에는 간결하고 사용하기 편한 함수형 컴포넌트와 Hook 사용을 공식적으로 권장하고 있습니다. [7]
Q: 컴포넌트 파일은 어떻게 정리하는 게 좋은가요?
A: 정해진 답은 없지만, 일반적으로 기능별로 폴더를 만들어 관련된 컴포넌트들을 함께 관리하는 방식을 많이 사용합니다. 예를 들어, 게시판 관련 컴포넌트들은 `components/Board` 폴더 안에 `BoardList.js`, `BoardItem.js` 와 같이 모아두는 것이죠. 이렇게 하면 프로젝트 구조가 명확해지고 관리가 훨씬 수월해집니다.

리액트 컴포넌트에 대한 궁금증이 조금은 풀리셨나요?

오늘 배운 내용을 바탕으로 직접 작은 컴포넌트들을 만들어보며 연습하는 것이 가장 좋은 학습 방법입니다. 혹시 더 궁금한 점이 있다면 언제든지 댓글로 질문해주세요! 😊

반응형

티스토리툴바