KSCOLD LogoKSCOLD
Blog
Feed
Product
Admin Night
Vault
Guestbook
Info

Vault 목록

컴포넌트(Component)

연결된 노트와 함께 읽기

컴포넌트(Component)

2026년 5월 17일
  • 컴포넌트(Component)란 여러 개의 프로그램 함수(Function)들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위를 말한다.

- 리액트(React)에서는 만들어진 앱을 이루는 최소한의 단위를 컴포넌트라고 부른다.

  • 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다.
  • 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다.    - 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM(Document Object Model) 노드를 출력하는 함수이다.

리액트(React) 컴포넌트의 특징

 - 컴포넌트 이름은 항상 대문자로 시작하도록 한다.  - 리액트(React)는 소문자로 시작하는 컴포넌트를 DOM(Document Object Model) 태그로 취급하기 때문이다.  - 즉, 컴포넌트를 제외한 라우터 설정이나 객체 js파일들은 카멜케이스를 지킨 소문자로 작명한다.

 - UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.

 - props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

  • 또한 같은 컴포넌트라도 할지라도 호출함에 따라 새로운 인스턴스(Instance)로 할당되어 독립적으로 작동한다.

![Pasted image 20240101180454.png](Pasted image 20240101180454.png)

Synapse Map Insight