컴포넌트란?

컴포넌트란?

• 리액트 앱을 구성하는 최소한의 단위, 리액트의 기본적인 구성요소
• 즉, 애플리케이션의 구성 요소를 담당하며 재사용가능하고 독립적인 단위로 구성
• 컴포넌트는 UI를 작은 단위로 분리하여 개발하고 유지보수 할수 있도록 하는데 도움을 줌
• 따라서 컴포넌트를 사용하면 코드의 가독성과 재사용성을 높일수 있다는 장점이 있음
• 클래스 컴포넌트 vs 함수 컴포넌트
  • 클래스 컴포너트
    • ES6 클래스 사용해서 정의
    • render() 메서드로 UI 반환
    • 생명주기 메서드 기능 제공
    • 상태관리 기능 제공
  • 함수 컴포넌트
    • JavaScript 함수로 정의
    • JSX 반환
    • react-hook 사용하여 생명주기 기능 활용

컴포넌트 장점

• 재사용성
  • 컴포넌트는 독립적이고 모듈화된 단위로 작성
  • 필요한 곳에서 쉽게 재사용 가능
• 가독성과 유지보수성
  • 컴포넌트 기반으로 개발을 하게 되면UI 구조를 명확하게 파악 가능
  • 개별 컴포넌트를 수정하여 유지보수를 용이하게 함
• 효율적 업데이트
  • 가상 DOM 활용하여 효율적이게 업데이트.
  • 필요한 부분만 다시 렌더링 → 성능향상

컴포넌트 예시

• 함수형 컴포넌트 적용 예시(간단)

• 리액트를 불러와 함수형 컴포넌트인 HelloWorld를 정의하고 있음
• 이런식으로 정의한 컴포넌트는 다른 컴포넌트나 페이지에서 사용할 수 있음
• 함수형 컴포넌트는 ES6의 화살표 문법을 사용해서 간결하게 작성할 수 있고, 상태관리나 생명주기 기능을 사용하지 않고 단순한 컴포넌트에 적합함