[React] 컴포넌트２

React Component

React를 배우면서 가장 먼저 만나게 되는 중요한 개념이 바로 **컴포넌트(Component)**입니다.

React는 웹 애플리케이션의 사용자 인터페이스(UI)를 만들 때 이 컴포넌트들을 조립해서 사용합니다.

---

컴포넌트의 정의

컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 부품입니다. 
마치 레고 블록처럼, 작은 컴포넌트들을 모아서 더 크고 복잡한 UI를 만들 수 있습니다. 

각 컴포넌트는 자체적인 기능과 모양을 가지며, 다른 컴포넌트들과 독립적으로 동작할 수 있습니다.

---

컴포넌트의 역할

컴포넌트는 다음과 같은 역할을 합니다.

UI 구성: 

웹 페이지의 특정 부분을 담당하여 화면에 표시될 내용을 정의합니다.

재사용성:

한 번 만든 컴포넌트는 여러 곳에서 반복적으로 사용할 수 있어 코드 중복을 줄이고 개발 효율을 높입니다. 

유지보수: 

기능별로 컴포넌트가 분리되어 있어 코드를 수정하거나 관리하기 용이합니다.

독립성: 

각 컴포넌트는 독립적으로 작동하므로, 한 컴포넌트의 변경이 다른 컴포넌트에 미치는 영향을 최소화할 수 있습니다.

---

컴포넌트의 종류

React 컴포넌트는 크게 두 가지 종류로 나눌 수 있습니다. 

함수형 컴포넌트 (Functional Component): 

JavaScript 함수 형태로 작성되며, 비교적 간단한 컴포넌트를 만들 때 주로 사용됩니다. 

최근에는 React Hooks의 등장으로 함수형 컴포넌트에서도 다양한 기능을 구현할 수 있게 되어 사용이 늘고 있습니다. 

클래스형 컴포넌트 (Class Component): 

JavaScript 클래스 형태로 작성되며, 상태(state) 관리나 생명주기 메소드 등 더 복잡한 기능을 구현할 때 사용되었습니다.

React.Component라는 클래스를 상속받아 만듭니다.

---

컴포넌트 이름 규칙

React 컴포넌트의 이름은 항상 대문자로 시작해야 합니다. 
React는 소문자로 시작하는 태그는 div, span과 같은 일반적인 HTML DOM 태그로 인식하기 때문입니다. 

 

// HTML DOM 태그로 인식

const element1 = <div />;

// React 컴포넌트로 인식

const element2 = <Welcome name="리액트" />;

// Welcome은 대문자로 시작

 

 

결론

React 컴포넌트는 UI를 독립적이고 재사용 가능한 단위로 나누어 관리하게 해주는 React 개발의 핵심입니다. 

컴포넌트 기반으로 개발하면 코드를 더 효율적으로 작성하고 관리할 수 있으며, 복잡한 웹 애플리케이션을 체계적으로 구축할 수 있습니다.

 

 

샘플코드 추가예정

 

 

출처 : React.js component - 리액트 컴포넌트