[React] 2. 컴포넌트의 장점과 사용방법

Joo·2024년 3월 8일

React component

React

목록 보기

4/11

++ React를 더 잘 이해하기 위한 정리노트 시리즈

컴포넌트로 만들면 뭐가 좋을까?

이전 포스팅에서 얘기한 리액트의 큰 특징 중 하나가 컴포넌트 기반이다.
컴포넌트는 레고 블럭 같다는 비유를 했는데 이를 바탕으로 두 가지 장점을 살펴보자!

# 재사용성

컴포넌트는 재사용이 가능하다.
UI의 일부분을 구성하는 독립적인 컴포넌트를 만들어 이 블럭들을 조립해 하나의 완성품을 만들 수 있다.
하나의 컴포넌트를 잘 정의만 해두면 언제든지, 어디든지 필요한 곳에 사용할 수 있다.

# 관심사의 분리

컴포넌트는 HTML, CSS, JS를 한눈에 볼 수 있다. 특정 기능의 로직과 UI를 함께 정의해 독립적으로 컴포넌트를 개발할 수 있다. 이러한 편리함은 복잡한 인터페이스의 구조와 진행을 쪼개어 단순화한다.
그리고 변경사항이 생기면 해당 컴포넌트만 찾아 바꾸면 되기 때문에 오류가 생길 위험도 낮아진다.

컴포넌트를 직접 사용해보자!

예제를 보기 앞서 컴포넌트를 만들때 몇가지 규칙이 있다.

컴포넌트 이름은 항상 대문자로 시작
두 가지 이상의 단어조합이라면 CamelCase로 짓기
브라우저에 렌더링할 수 있는 컨텐츠를 반환하기

변경 전

function App() {
  return (
    <div>
      <header>
        <img src="src/assets/react-core-concepts.png" alt="Stylized atom" />
        <h1>React Essentials</h1>
        <p>
          Fundamental React concepts you will need for almost any app you are going
          to build!
        </p>
      </header>
      <main>
        <h2>Time to get started!</h2>
      </main>
    </div>
  );
}

export default App;

변경 후

function Header() {
  return (
  	<header>
      <img src="src/assets/react-core-concepts.png" alt="Stylized atom" />
      <h1>React Essentials</h1>
      <p>
        Fundamental React concepts you will need for almost any app you are going
        to build!
      </p>
  	</header>
  );
}

function App() {
  return (
    <div>
      <Header />
      <main>
        <h2>Time to get started!</h2>
      </main>
    </div>
  );
}

export default App;