React 8주 스터디 기록 #3 – 컴포넌트 정리 및 과제 구현

정유진·2026년 2월 15일

백엔드 개발자의 React 도전기

목록 보기

3/5

오늘은 2주차 학습 범위인 3장. 컴포넌트 내용을 정리하고,
해당 개념을 바탕으로 과제를 구현해보았습니다.

컴포넌트

컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 단위입니다.
리액트는 이러한 컴포넌트를 조합하여 하나의 애플리케이션을 완성합니다.

예를 들어 하나의 웹 페이지는 다음과 같이 나눌 수 있습니다.

header : 로고, 네비게이션 바
nav : 웹사이트 메뉴
article : 주요 콘텐츠
section : 세부 콘텐츠
aside : 광고, 추가 정보
footer : 저작권 정보, 연락처

추상화(abstraction)

위 사진처럼 웹 페이지를 기능 단위로 나누는 과정을 추상화라고 합니다.
추상화는 복잡한 구조를 단순하게 표현함으로써
전체 시스템을 더 명확하게 이해하고 관리할 수 있도록 해줍니다

컴포넌트 예시

Header 컴포넌트

//Header 컴포넌트 : 로고와 내비게이션 바
function Header(){
	return(
    	<header>
         <h1>My Website</h1>
         <Nav />
        </header>

	);
}

Navigation 컴포넌트

//Navigation 컴포넌트 : 웹 사이트 메뉴

function Nav(){
	return(
    	<nav>Home | About | Services | Contact</Nav>
	);
}

Article 컴포넌트

// Article 컴포넌트: 주요 콘텐츠

function Article(){
  return( 
    <article>
      <h2> Main Article</h2)\>
    </article>
  );
}

Section 컴포넌트

// Section 컴포넌트: 세부 콘텐츠

function Article(){
  return( 
    <section>
	  <h3>More Details(/h3)
	</section>
);
}

Aside 컴포넌트

// Aside 컴포넌트: 광고, 추가 정보

function Aside() ({
	return( 
      <aside>
	    <h3>Related Links</h3>
	  </aside>
	);
}

Footer 컴포넌트

// Footer 컴포넌트: 저작권 정보, 연락처

function Footer() { 
	return ( 
      <footer>
	    <p>©2025 My Website. All rights reserved.</p> 
      </footer>
	);
}

App 컴포넌트

// App 컴포넌트: 모든 컴포넌트를 조합해 전체 페이지 구성

function App() {
	return ( 
      <div>
	    <Header/>
		  <Article/>
          <Aside/>
        <Footer/>
      </div>
	);
}

컴포넌트 단위로 구성했을 때의 이점

재사용 가능
한 번 만든 컴포넌트는 여러 곳에서 반복적으로 사용할 수 있습니다.
예를 들어 Header와 Footer는 대부분의 페이지에서 공통으로 사용됩니다.
유지보수 용이
컴포넌트를 작은 단위로 나누면
문제가 발생했을 때 어디에서 오류가 발생했는지 빠르게 파악할 수 있습니다.
또한 수정 시 다른 부분에 영향을 최소화할 수 있습니다.
로직 분리 가능
UI와 비즈니스 로직을 분리할 수 있습니다.
화면을 담당하는 컴포넌트와 데이터를 처리하는 로직을 구분하면
가독성과 유지보수성이 향상됩니다.
복잡한 상태 관리 가능
컴포넌트를 세분화하면 상태 변경 시 필요한 부분만 리렌더링되어
불필요한 렌더링을 줄일 수 있습니다.

plus

컴포넌트는'너무 세분화하면 관리가 어렵고, 너무 뭉뚱그리면 재사용성과 유지보수성이 떨어진다' 는 점입니다. 따라서 목적에 맞게 적절한 수준으로 나누는 것이 가장 중요합니다.

여기까지가 컴포넌트에 대한 기초 이론 정리였고

2주차 과제

✔ 요구사항

1. 버튼 클릭 로직은 부모 컴포넌트에서 관리
2. 버튼 텍스트와 클릭 이벤트는 props로 전달
3. +1 → count 증가
4. -1 → count 감소
5. Reset → count 0 초기화
6. Alert → 현재 count 값 출력
7. 공통 Button 컴포넌트 생성

해당 과제 해결 과정을 보여드리려 합니다

🛠 구현 과정

Step 1. 폴더 구조 설계

src
 ├── components
 │     └── Button.tsx
 │
 ├── App.tsx
 └── main.tsx

components/ : 재사용 가능한 UI 컴포넌트
App.tsx : 상태 및 로직 관리

이처럼 파일 구성 했고,

Step 2. 코드 작성

// components/Button.tsx 코드
type ButtonProps = {
    text: string
    onClick: () => void
  }
  
  function Button({ text, onClick }: ButtonProps) {
    return <button onClick={onClick}>{text}</button>
  }
  
  export default Button

버튼 UI 담당
props로 값과 함수 전달받음

// app.tsx 코드
import { useState } from "react"
import Button from "./components/Button"

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

  const handleIncrease = () => setCount(count + 1)
  const handleDecrease = () => setCount(count - 1)
  const handleReset = () => setCount(0)
  const handleAlert = () => alert(count)

  return (
    <div>
      <h1>Count: {count}</h1>

      <Button text="+1" onClick={handleIncrease} />
      <Button text="-1" onClick={handleDecrease} />
      <Button text="Reset" onClick={handleReset} />
      <Button text="Alert" onClick={handleAlert} />
    </div>
  )
}

export default App