1) 컴포넌트

1. 컴포넌트

컴포넌트(Component)란 직역하자면 구성요소, 부품을 의미한다. React는 하나의 HTML페이지 안에 미리 만들어둔 컴포넌트들을 조합하여 웹페이지를 구성한다. 비유하자면 컴포넌트는 레고블럭이라고 볼 수 있다. 이 블럭들을 조립하여 원하는 모양의 웹페이지를 완성하는게 리액트의 목표이다.

여기서 컴포넌트들을 찾아보시오.

Components

<App>
  <Header/>
  <Banner />
  <StoreListSection />
  <FilterTabs />
</App>

<Header>
  <Logo />
  <SearchInput />
  <LoginButton />
  <SignupButton />
</Header>

<Banner>
  <Text />
  <Image />
</Banner>

<StoreListSection title="Stores to help you save">
  {storeData.map((store) => (
    <StoreCard
      name={store.name}
      logo={store.logo}
      promo={store.promo}
      deliveryType={store.deliveryType}
    />
  ))}
</StoreListSection>

<StoreCard>
  <StoreLogo />
  <PromoBadge />  // 예: $15 OFF
  <StoreName />
  <DeliveryTypeLabel /> // 예: In-store prices
</StoreCard>

<FilterTabs>
  <Tab label="All" active />
  <Tab label="EBT" />
  <Tab label="Fastest" />
  ...
</FilterTabs>

HTML의 모든 요소는 논리적으로(개념적으로) 컴포넌트로 생각할 수 있지만, 실제 코드에서 파일 단위로 물리적으로 컴포넌트로 나눈다고 해서 항상 이롭지는 않습니다. 예를 들어 <h1> 하나만 포함된 코드 블록을 매번 별도 컴포넌트로 만든다면 오히려 복잡도가 증가할 수 있습니다.

명확하게 정해진 기준은 없지만, 일반적으로 실무에서는 다음과 같은 기준에 따라 컴포넌트를 나눕니다.

2. 컴포넌트의 조건

재사용성
1. "이 코드를 또 쓸일이 있을까?"
2. 반복적으로 출현하는 html요소를 컴포넌트로 만들어 재사용하면, 중복된 코드를 제거하면서 일관된 ui를 유지할 수 있으므로 재사용성이 높아 보이는 html요소는 컴포넌트로 만드는게 좋습니다.
3. ex) 버튼, 카드, 상품썸네일 등

<Button type="primary" label="Log in" />
<Button type="danger" label="Sign up" />
...

단일책임원칙
1. "이 컴포넌트는 너무 많은 일을 하고 있진 않은가?"
2. 하나의 컴포넌트에 여러 기능(책임)이 들어간 경우 기능별로 컴포넌트를 분리하는 것이 유지보수에 좋습니다.
3. ex) Header내부에 Logo의 기능을 가진 태그, nav의 기능을 가진 태그가 존재하는 경우 각 요소를 컴포넌트로 분리

// 나쁜예
const Header = () => (
    <header>
        <img src="/logo.png" />
        <nav>{/* 네비 항목들 직접 작성 */}</nav>
        <div>{user.name}님 환영합니다!</div>
        <button onClick={logout}>로그아웃</button>
    </header>
)
// 좋은예
// 상위컴포넌트는 레이아웃만 담당. 세부기능은 하위컴포넌트에 위임.
const Header = () => (
  <header>
    <Logo />
    <NavBar />
    <LoginStatus />
  </header>
);

가독성
1. “이 코드가 너무 길어서 이해하기 어렵진 않은가?”
2. 하나의 컴포넌트에 너무 많은 코드가 들어간 경우 가독성 확보가 필요한 경우 적절히 컴포넌트를 분리하는 것이 유지보수에 좋습니다.
괌심사의 분리
1. UI로직과 비지니스 로직이 하나의 컴포넌트에 포함되어 분리가 필요한 경우, 각 관심사별로 컴포넌트를 생성하는 것이 유지보수에 있어 좋습니다.
2. ex) 사용자 카드를 조회하는 코드

// UI+Logic
const UserCardComponent = () => {
  const user = useSelector(state => state.user); // Logic
  return <div>{name} / {email}</div>; // UI
}

// UI
const UserCard = ({ name, email }) => (
  <div>{name} / {email}</div>
);

// Logic
const UserCardContainer = () => {
  const user = useSelector(state => state.user);
  return <UserCard {...user} />;
};

3. 컴포넌트 작성 방법

1) JSX(Javascript XML) 문법

JSX는 JavaScript 코드 안에서 HTML태그를 사용하여 UI를 구성할 수 있도록 도와주는 문법입니다.

JSX문법 예시

function App(){
    return (
        <div></div>
    )
}

JS에서도 DOM 요소를 직접 생성할 수는 있지만, 아래와 같이 코드가 복잡해집니다.

JS기반 DOM생성 예시

const div = document.createElement('div'); 
const h1 = document.createElement('h1');
const textNode = document.createTextNode('Hello React');
div.append(h1.append(textNode)); // <div><h1>Hello React</h1></div>

위처럼 JS로 HTML을 작성하는 것은 비효율적이며, 가독성도 좋지 않습니다.

반면 JSX는 HTML처럼 구조를 간단하게 표현할 수 있어 가독성과 생산성이 뛰어납니다.

위 코드를 JSX로 변환

function App(){
    return(
        <div>
            <h1>Hello React</h1>
        </div>
    )
}

선언형 프로그래밍 방식으로 UI를 구성하여 깔끔하다

선언형 프로그래밍

선언형 프로그래밍은 기능의 구현을 어떻게 하는지 보다 무엇을 해야하는지에 초점을 맞춘 프로그래밍 방식입니다. 즉 상세기능 구현을 어떻게 할지 직접 작성하지 않고, 구현되어 있는 기능을 이용하는 방식의 프로그래밍을 의미합니다. Q. arr = [1,2,3,4,5] 내부의 각 데이터를 100 곱하여 반환하시오.

1) 명령형 프로그래밍 : 배열의 각 값에 100을 어떻게 곱할건지에 초점을 맞춤

for(let i =0; i<arr.length; i++){

arr[i] *= 100; // 어떻게 기능을 수행할지를 작성함. 무엇을 하는지 정확히 파악하기 힘듬.

}

2) 선언형 프로그래밍 : 배열의 각 값에 100을 어떻게 곱할지는 mpa함수에 맞기고 무엇을 하는지에 초점을 맞춤

arr = arr.map(n => n*100): // 기능구현은 map에게 맞기고 무엇을 하는지를 명확히함.

JSX역시 복잡한 DOM조작을 생략하고 무엇을 보여줄 것인지에 집중할수 있게 해준다.

2) Babel

Babel은 최신 JavaScript(ES6+) 문법을 ES5 등 구형 브라우저에서도 호환되도록 변환해주는 트랜스파일러입니다. 또한 JSX 문법(<div>Hello</div>처럼 HTML과 비슷한 형태의 코드)을 React.createElement()와 같은 JavaScript 함수 호출 코드로 변환해줍니다. Vite의 React 프로젝트 빌드 도구에는 Babel이 내장되어 있어 JSX를 별도 설정 없이 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- react lib -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<!-- 아래 스크립트는 Babel이 JSX 문법을 브라우저에서 실행 가능한 JS로 실시간 변환합니다 -->
<script type="text/babel">
  function App() {
    return <h1>Hello React</h1>;
  }
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<App />);
</script>
<body>
    <div id="root"></div>
</body>
</html>

text/babel은 학습용으로 적합하지만 실무에서는 쓰지 않습니다.

실무에서는 Babel이 Vite/Webpack 환경에서 자동으로 트랜스파일링합니다.
text/babel은 브라우저에서 변환하므로 성능이 떨어지고, 코드 보안상 이슈가 발생할 수 있기 때문입니다.

3) 함수형 컴포넌트와 클래스 컴포넌트

React 컴포넌트는 크게 두 가지 방식으로 작성할 수 있습니다.

클래스 컴포넌트(old한 방식)
함수형 컴포넌트(권장방식)

함수형 컴포넌트는 함수를 통해 UI를 반환하는 방식으로 작성되며 가독성이 좋고 작성도 간편하므로 권장되는 방식입니다.

클래스형 컴포넌트

클래스형 컴포넌트는 class 문법을 사용하여 컴포넌트를 정의하며, state, 라이프사이클 메서드, this 바인딩 등을 명시적으로 다루어야 합니다.
코드량이 많고 복잡도가 올라가기 때문에 최근에는 함수형 컴포넌트 + Hook 조합이 더 많이 사용됩니다.
클래스형 컴포넌트 예시)

import {Component} from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return <h1>클래스 컴포넌트</h1>;
    }
}

함수형 컴포넌트

컴포넌트를 함수처럼 간단하게 작성하는 방식으로 JSX문법으로 생성한 HTML태그를 반환한다. 클래스 컴포넌트의 복잡한 라이프사이클 메서드나, state관리를 Hook함수를 통해 간편하게 사용할 수 있다.

function App () {
  return <h1>함수형 컴포넌트</h1>;
}

Previous3. 리액트 기초 Next컴포넌트 작성규칙

Last updated 4 months ago