시스매

리액트 컴포넌트 핸드북_ 만들어진 이유부터 사용법까지

13 min read

‘컴포넌트’에 관해 만들어진 이유에서 구조, 사용법 등을 통합한 하나의 핸드북 형식의 요약 만들어줘.

리액트 컴포넌트 핸드북: 만들어진 이유부터 사용법까지

컴포넌트란 무엇인가?

리액트에서 컴포넌트는 사용자 인터페이스(UI)의 독립적이고 재사용 가능한 구성 요소입니다12. 컴포넌트는 자바스크립트 함수와 유사한 역할을 하지만, 격리된 환경에서 작동하며 HTML을 반환합니다1.

컴포넌트는 “UI 구성 요소의 빌딩 블록”으로서, 버튼처럼 작은 요소부터 전체 페이지까지 다양한 크기로 구성될 수 있습니다23. 리액트 앱은 이러한 컴포넌트들이 조합되어 만들어집니다2.

컴포넌트가 만들어진 이유

1. 소프트웨어 위기 해결

컴포넌트 기반 개발의 개념은 1968년 더글라스 맥일로이(Douglas McIlroy)가 NATO 소프트웨어 엔지니어링 컨퍼런스에서 “Mass Produced Software Components”라는 제목으로 발표하면서 시작되었습니다45. 이는 당시의 **소프트웨어 위기도였습니다5.

2. 전통적인 개발 방식의 한계

전통적인 모놀리식 아키텍처에서는 다음과 같은 문제들이 있었습니다6:

  • 코드 유지보수의 어려움
  • 확장성 부족
  • 팀 협업의 비효율성
  • 중복 코드 작성

3. 재사용성과 모듈화의 필요성

컴포넌트는 **“공장 조립과 같은 소프트웨어 개발”**을 가능하게 하여, 매번 새로운 코드를 작성하는 대신 검증된 부품으로 소프트웨어를 조립할 수 있게 해줍니다5.

컴포넌트의 구조와 특성

핵심 특성

리액트 컴포넌트는 다음과 같은 특성을 가집니다78:

1. 캡슐화(Encapsulation)

  • 컴포넌트는 자신만의 로직과 상태를 내부에 포함합니다7
  • 내부 구현을 숨기고 필요한 인터페이스만 노출합니다8

2. 재사용성(Reusability)

  • 한 번 개발된 컴포넌트는 여러 곳에서 재사용 가능합니다78
  • 개발 시간과 비용을 절약합니다7

3. 독립성(Independence)

  • 컴포넌트는 다른 컴포넌트에 과도하게 의존하지 않습니다7
  • 독립적으로 교체나 업그레이드가 가능합니다7

4. 상호 운용성(Interoperability)

  • 잘 정의된 인터페이스를 통해 다른 컴포넌트와 원활하게 상호작용합니다7

컴포넌트의 종류

1. 함수형 컴포넌트 (Functional Components)

함수형 컴포넌트는 자바스크립트 함수로 정의되는 더 간단한 형태입니다910:

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

장점:

  • 더 간단하고 이해하기 쉬움9
  • React Hooks와 함께 사용 가능9
  • 더 가볍고 성능이 우수9

2. 클래스형 컴포넌트 (Class Components)

클래스형 컴포넌트는 ES6 클래스를 사용하여 정의됩니다910:

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

특징:

  • 전통적인 생명주기 메서드 사용9
  • 더 많은 기능을 제공하지만 복잡함9
  • 현재는 함수형 컴포넌트 사용이 권장됨9

컴포넌트의 핵심 개념

1. Props (속성)

Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터입니다1112:

// 부모 컴포넌트
function App() {
  return <Child name="mitt" age={28} />;
}
 
// 자식 컴포넌트
function Child(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

Props의 특징:

  • 읽기 전용(Read-Only)1311
  • 컴포넌트 간 데이터 전달에 사용11
  • 부모에서 자식으로의 단방향 데이터 흐름11

2. State (상태)

State는 컴포넌트 내부에서 관리되는 동적 데이터입니다1411:

import React, { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

State의 특징:

  • 컴포넌트 내부에서 변경 가능1411
  • 상태가 변경되면 컴포넌트가 다시 렌더링됨14
  • useState Hook을 통해 함수형 컴포넌트에서 사용14

3. JSX (JavaScript XML)

JSX는 자바스크립트 안에서 HTML과 유사한 문법을 사용할 수 있게 해주는 구문 확장입니다1516:

const element = <h1>Hello, world!</h1>;

JSX의 특징:

  • HTML과 자바스크립트를 결합1516
  • Babel에 의해 React.createElement() 호출로 변환16
  • 중괄호 {}를 사용하여 자바스크립트 표현식 삽입 가능15

컴포넌트 생명주기

클래스형 컴포넌트의 생명주기

리액트 컴포넌트는 마운팅(Mounting), 업데이팅(Updating), 언마운팅(Unmounting) 세 단계를 거칩니다1718:

1. 마운팅 단계

  • constructor(): 컴포넌트 초기화17
  • componentDidMount(): DOM 추가 후 실행17

2. 업데이팅 단계

  • shouldComponentUpdate(): 리렌더링 여부 결정17
  • componentDidUpdate(): 업데이트 후 실행17

3. 언마운팅 단계

  • componentWillUnmount(): 컴포넌트 제거 전 실행17

함수형 컴포넌트의 Hooks

함수형 컴포넌트에서는 useEffect Hook을 사용하여 생명주기를 관리합니다1920:

import React, { useEffect, useState } from 'react';
 
function MyComponent() {
  const [count, setCount] = useState(0);
 
  // 마운트 시 실행 (빈 배열)
  useEffect(() => {
    console.log('Component mounted');
  }, []);
 
  // count 변경 시 실행
  useEffect(() => {
    console.log('Count changed:', count);
  }, [count]);
 
  // 언마운트 시 실행 (cleanup function)
  useEffect(() => {
    return () => {
      console.log('Component will unmount');
    };
  }, []);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

컴포넌트 사용법과 모범 사례

1. 컴포넌트 명명 규칙

리액트 컴포넌트는 대문자로 시작해야 합니다221:

// 올바른 방법
function MyButton() {
  return <button>Click me</button>;
}
 
// 잘못된 방법
function myButton() {
  return <button>Click me</button>;
}

2. 단일 책임 원칙

각 컴포넌트는 하나의 기능에만 집중해야 합니다2223:

// 좋은 예: 단일 책임
function UserAvatar({ user }) {
  return <img src={user.avatar} alt={user.name} />;
}
 
function UserName({ user }) {
  return <h2>{user.name}</h2>;
}

3. Props 검증

TypeScript나 PropTypes를 사용하여 props를 검증합니다2421:

import PropTypes from 'prop-types';
 
function Greeting({ name, age }) {
  return <h1>Hello {name}, you are {age} years old!</h1>;
}
 
Greeting.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

4. 컴포넌트 조합 활용

children props를 활용하여 컴포넌트를 조합합니다21:

function Container({ children }) {
  return <div className="container">{children}</div>;
}
 
function App() {
  return (
    <Container>
      <h1>Title</h1>
      <p>Content goes here</p>
    </Container>
  );
}

재사용 가능한 컴포넌트의 이점

1. 개발 효율성 향상

재사용 가능한 컴포넌트는 개발 시간을 최대 60% 단축할 수 있습니다25. 한 번 작성된 컴포넌트를 여러 곳에서 사용함으로써 중복 작업을 제거합니다2627.

2. 일관성 유지

동일한 컴포넌트를 사용함으로써 애플리케이션 전체의 디자인과 동작 일관성을 보장할 수 있습니다2627.

3. 유지보수성 개선

컴포넌트가 독립적으로 구성되어 있어 버그 수정이나 기능 개선이 용이합니다2827. 한 곳에서 수정하면 해당 컴포넌트를 사용하는 모든 곳에 반영됩니다25.

4. 성능 최적화

재사용 가능한 컴포넌트는 메모이제이션과 지연 로딩 등의 기법을 활용하여 성능을 향상시킬 수 있습니다26.

컴포넌트의 미래와 발전 방향

1. 함수형 컴포넌트와 Hooks의 확산

현재 리액트는 함수형 컴포넌트와 Hooks 사용을 권장하고 있습니다21. 이는 더 간단하고 직관적인 코드 작성을 가능하게 합니다9.

2. 컴포넌트 라이브러리 생태계

Storybook과 같은 도구를 활용하여 컴포넌트를 독립적으로 개발하고 문서화하는 방식이 보편화되고 있습니다29.

3. 마이크로 프론트엔드 아키텍처

컴포넌트 기반 아키텍처는 마이크로 프론트엔드로 발전하여, 각 팀이 독립적으로 컴포넌트를 개발하고 배포할 수 있게 됩니다6.

결론

리액트 컴포넌트는 소프트웨어 위기를 해결하기 위한 모듈화 개념에서 출발하여, 현재는 현대 웹 개발의 핵심 패러다임이 되었습니다. 컴포넌트는 재사용성, 유지보수성, 확장성을 제공하며, 개발자들이 더 효율적이고 일관된 사용자 인터페이스를 구축할 수 있게 해줍니다.

함수형 컴포넌트와 Hooks의 도입으로 컴포넌트는 더욱 간단하고 강력해졌으며, 앞으로도 웹 개발의 중심 역할을 계속할 것으로 예상됩니다. 올바른 컴포넌트 설계 원칙을 따르고 모범 사례를 적용한다면, 확장 가능하고 유지보수가 용이한 애플리케이션을 구축할 수 있습니다.

⁂

Footnotes

  1. https://www.w3schools.com/react/react_components.asp ↩ ↩2

  2. https://react.dev/learn ↩ ↩2 ↩3 ↩4

  3. https://react.dev/learn/your-first-component ↩

  4. https://arxiv.org/pdf/1011.2163.pdf ↩

  5. https://en.wikipedia.org/wiki/Software_component ↩ ↩2 ↩3

  6. https://www.linkedin.com/pulse/benefits-transitioning-component-based-architecture-vintageglobal-qpwoe ↩ ↩2

  7. https://www.linkedin.com/pulse/types-software-components-examples-sunny-yadav-ducaf ↩ ↩2 ↩3 ↩4 ↩5 ↩6 ↩7

  8. https://www.tutorialspoint.com/software_architecture_design/component_based_architecture.htm ↩ ↩2 ↩3

  9. https://www.geeksforgeeks.org/blogs/differences-between-functional-components-and-class-components/ ↩ ↩2 ↩3 ↩4 ↩5 ↩6 ↩7 ↩8 ↩9

  10. https://www.freecodecamp.org/news/function-component-vs-class-component-in-react/ ↩ ↩2

  11. https://kindjjee.tistory.com/102 ↩ ↩2 ↩3 ↩4 ↩5 ↩6

  12. https://react.dev/learn/passing-props-to-a-component ↩

  13. https://gseok.gitbooks.io/react/content/bd80-bd84-bd80-bd84-c9c0-c2dd-b4e4/react-propsc640-state-ac1c-b150-c815-b9ac.html ↩

  14. https://suzzeong.tistory.com/133 ↩ ↩2 ↩3 ↩4

  15. https://www.w3schools.com/react/react_jsx.asp ↩ ↩2 ↩3

  16. https://www.geeksforgeeks.org/reactjs/reactjs-jsx-introduction/ ↩ ↩2 ↩3

  17. https://www.geeksforgeeks.org/reactjs/reactjs-lifecycle-components/ ↩ ↩2 ↩3 ↩4 ↩5 ↩6

  18. https://www.freecodecamp.org/news/react-component-lifecycle-methods/ ↩

  19. https://wonyong-jang.github.io/react-redux/2021/05/21/React-useState-useEffect.html ↩

  20. https://ko.react.dev/reference/react/useEffect ↩

  21. https://e-bwp.com/eurostyl/photos/file/difegofomo-kepase.pdf ↩ ↩2 ↩3 ↩4

  22. https://www.geeksforgeeks.org/what-is-component-design/ ↩

  23. https://www.uxpin.com/studio/blog/react-best-practices/ ↩

  24. https://www.uxpin.com/studio/blog/how-to-build-reusable-react-components/ ↩

  25. https://dzone.com/articles/6-advantages-of-component-based-development ↩ ↩2

  26. https://dev.to/leoneloliver/the-power-of-reusable-components-in-react-2d79 ↩ ↩2 ↩3

  27. https://astconsulting.in/java-script/react-js/guide-modular-react-component-design ↩ ↩2 ↩3

  28. https://www.linkedin.com/pulse/implementing-component-based-architecture-benefits-challenges-mf5re ↩

  29. https://dev.to/begenchg/efficient-workflow-in-frontend-development-with-reactjs-4bdg ↩

그래프 뷰

백링크