React 기초 : 컴포넌트

컴포넌트 

React의 기본 단위로, UI를 구성하는 재사용 가능한 요소이다. 화면에 표시되는 요소나 기능을 나타내며, 상태(state)와 속성(props)를 가질 수 있다. React에서는 모든 UI를 컴포넌트로 나누어 관리하고 이를 조합해 복잡한 App을 만든다.

 

컴포넌트의 특징

1. 재사용 가능 : 컴포넌트는 다른 곳에서 여러번 재사용 가능하다. 같은 컴포넌트를 사용하여 코드 중복을 줄이고 유지보수성을 높일 수 있다.

2. 독립성 : 각 컴포넌트는 독립적으로 동작하며 특정 UI요소나 기능만을 담당한다. 이를 통해 App을 더 작은 단위로 나누어 관리 가능하다.

3. 상태와 속성

• 상태(state) : 컴포넌트 내에서 동적으로 변화하는 데이터. 사용자의 입력, 서버 응답 등에 따라 변경 가능하다.
• 속성(props) : 부모 컴포넌트가 자식 컴포넌트에 전달하는 값. 속성은 '입력값'이라고도 한다.

4. UI 구성 : 컴포넌트는 JSX를 사용하여 UI를 구성한다. 

 

컴포넌트의 종류

1. 함수형 컴포넌트 : 함수로 정의된 컴포넌트. 상태 관리와 생명주기 메서드를 React Hook을 통해 처리 할 수 있다. 코드가 간단하고 직관적이다.

const Mycomponent = () => {
 return <h1>Hello, World!</h1>;
};

2. 클래스형 컴포넌트 : 클래스 문법을 사용하여 정의된 컴포넌트. 상태와 생명주기 메서드를 this.state, this.setState()로 관리한다. React 16.8 이후 함수형 컴포넌트로 대체 되고 있는 추세다.

class MyComponent extends React.Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}

 

컴포넌트의 예시

React에서는 부모 컴포넌트가 자식 컴포넌트에 props를 전달하여 데이터를 공유할 수 있다.

// 부모 컴포넌트
const ParentComponent = () => {
  return <ChildComponent message="Hello from Parent!" />;
};

// 자식 컴포넌트
const ChildComponent = (props) => {
  return <h1>{props.message}</h1>;
};

 

위 코드에서 ParentComponet에서 ChildComponet로 message라는 props를 전달하고, ChildComponent에서 이를 사용할 수 있다.