Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
Tags
- Cloud
- API
- supabase
- HTML
- bootstrap
- Boostrap
- 배포
- til
- TMDB
- db
- IntersectionObserver
- REACT
- url
- web
- http
- Github Pages
- Protocol
- github
- this
- W
- firestoredatabase
- CSS
- JavaScript
- Fetch
- jQuery
- SQL
- data
- Database
- nosql
- useEffect
Archives
- Today
- Total
072DATA
`React ` 컴포넌트와 Props 간단 요약 본문
컴포넌트란?
리액트 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 조각 같은 것
컴포넌트 종류
함수형 컴포넌트: 함수로 정의되며, props를 받아 JSX를 반환함
클래스형 컴포넌트: 클래스로 정의되며, render() 메서드를 통해 JSX를 반환함
Props란?
props는 컴포넌트에 전달되는 데이터임
컴포넌트의 외부에서 입력받은 값으로 컴포넌트의 렌더링 방식에 영향을 미침
Props의 특징
읽기 전용: props는 컴포넌트 내부에서 수정할 수 없음
전달 방법: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됨
<MyComponent message="프라아압스!" />
디폴트 값 설정: 기본값을 설정하려면 defaultProps를 사용함
MyComponent.defaultProps = {
message: "기본 텍스ㅡ트"
};
컴포넌트와 Props의 관계
1. 컴포넌트는 props를 통해 외부 데이터를 받아서 동적으로 렌더링함
2. 재사용성과 유지보수성을 높이기 위해, props를 활용하여 컴포넌트의 유연성을 극대화됨
'FrontEnd > React' 카테고리의 다른 글
`React` UseRef (0) | 2024.08.19 |
---|---|
`React` - UseEffect의 간단한 사용법 (0) | 2024.08.17 |
`React` 올림픽 메달 등록 (타임어택) (0) | 2024.08.16 |
스타일드 컴포넌트 사용법 (Styled-Components) (0) | 2024.08.15 |
`React` 제어 컴포넌트 vs 비제어 컴포넌트 ( value ) (0) | 2024.08.13 |