component 컴포넌트

1. 컴포넌트란?

• 리액트 앱을 구성하는 최소한의 단위
• 애플리케이션의 구성 요소를 담당하며, 재사용 가능하고 독립적인 단위로 구성
• 클래스 컴포넌트 vs 함수 컴포넌트
  • 클래스 : ES6 클래스 사용해서 정의, render() 메서드로 UI 반환, 생명주기 메서드 기능 제공, 상태관리 기능 제공
  • 함수 : JavaScript 함수로 정의, JSX 반환, react-hook 사용하여 생명주기 기능 활용

2. 장점

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

3. BEM 모델

• BEM (Block Element Modifier) : css 클래스 네이밍. 가독성, 재사용성 UP
• Block 최상위요소
• Element 블록의 일부, 특정 기능 수행
• Modifier 블록, 엘리먼트의 외관이나 상태 변경
• 장점
  • 가독성 : 클래스명에 구조적인 정보를 담아 코드를 읽기 쉽게 함
  • 재사용성 : 모듈화된 구조로 컴포넌트의 재사용 쉬움
  • 유지보수성 : 클래스간의 의존성을 낮춤
• 단점
  • 클래스명 길어질 수 있음
  • 요소 및 수정자 사용을 위해 추가적인 클래스 작성

 

[CSS 방법론] BEM 방식