072DATA

`React ` 컴포넌트와 Props 간단 요약 본문

FrontEnd/React

`React ` 컴포넌트와 Props 간단 요약

0720 2024. 8. 12. 22:37

컴포넌트란?

 

 

리액트 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 조각 같은 것

 

 

 

 

컴포넌트 종류

 

함수형 컴포넌트: 함수로 정의되며, props를 받아 JSX를 반환함

클래스형 컴포넌트: 클래스로 정의되며, render() 메서드를 통해 JSX를 반환함

 

Props란?

 

props는 컴포넌트에 전달되는 데이터임

컴포넌트의 외부에서 입력받은 값으로 컴포넌트의 렌더링 방식에 영향을 미침

 

Props의 특징

 

읽기 전용: props는 컴포넌트 내부에서 수정할 수 없음

 

 

전달 방법: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됨

 

<MyComponent message="프라아압스!" />

 

 

디폴트 값 설정: 기본값을 설정하려면 defaultProps를 사용함

 

MyComponent.defaultProps = {
  message: "기본 텍스ㅡ트"
};

 

 

컴포넌트와 Props의 관계

 

 

 

1. 컴포넌트는 props를 통해 외부 데이터를 받아서 동적으로 렌더링함

 

2. 재사용성과 유지보수성을 높이기 위해, props를 활용하여 컴포넌트의 유연성을 극대화됨