(react) 컴포넌트

React 컴포넌트란?

React 컴포넌트는 React 애플리케이션의 UI를 구성하는 가장 기본적인 단위. 마치 레고 블록처럼 작은 컴포넌트들을 조립하여 복잡한 UI를 만들 수 있음. 각 컴포넌트는 독립적으로 관리되고 재사용될 수 있어 코드의 유지보수성과 재사용성을 높여줌.

 

 

컴포넌트 특징

• 재사용성: 한 번 만들어진 컴포넌트는 여러 곳에서 반복적으로 사용 가능
• 독립성: 각 컴포넌트는 자체적인 로직과 상태를 가지고 있기때문에 다른 컴포넌트에 영향을 주지 않음.
• 캡슐화: 컴포넌트 내부의 구현은 외부에 노출되지 않고 숨겨져 있어 복잡도를 줄이고 유지보수가 용이함.
• 계층 구조: 컴포넌트는 부모-자식 관계를 통해 계층 구조를 형성하며, 이를 통해 복잡한 UI를 효과적으로 관리.

 

 

컴포넌트의 종류

• 함수형 컴포넌트: 함수로 정의된 컴포넌트로, 간단한 로직을 가진 컴포넌트에 적합. (**React-hooks가 나온 이후 많이 사용)
• 클래스형 컴포넌트: 클래스로 정의된 컴포넌트로, 복잡한 상태 관리와 생명주기 메서드를 사용해야 할 때 사용.

**React Hooks: React 16.8 버전에서 새롭게 도입된 기능으로, 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 등의 기능을 사용할 수 있도록 해주는 강력한 도구

// 함수형 컴포넌트 예시
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 클래스형 컴포넌트 예시
class Welcome extends React.Component {
  render() {
    return <h2>Welcome to my React app!</h2>;
  }
}