728x90
반응형
먼저 리액트 프로젝트의 구조입니다.
App.js는 이렇게 작성하였습니다.
여기서 버튼을 컴포넌트화 시켜서 사용하는데 color라는 props를 전달하여 사용할 수 있습니다.
이제 버튼 컴포넌트로 가서
버튼에 스타일을 props로 넘겨 받아 사용하였습니다.
결과입니다.
이렇게 하는 장점은 무엇일까요?
props는 여러 수준의 구성 요소를 통해 전달될 수 있으므로 복잡한 UI를 더 간단한 빌딩 블록으로 구성할 수 있습니다.
전반적으로 props는 React에서 모듈식의 재사용 가능하고 유연한 UI 구성 요소를 구축하기 위한 중요한 도구입니다.
다음에는 useState에 대해 알아보겠습니다.
728x90
반응형
'리액트' 카테고리의 다른 글
| useEffect를 사용하여 api를 사용해보자 (0) | 2023.03.21 |
|---|---|
| 리액트 useState에 대해 알아보자 (0) | 2023.03.21 |
| 자바스크립트의 JSX 확장 구문과 리액트 컴포넌트에서의 활용 방법 (0) | 2023.02.28 |
| 리액트 컴포넌트 생성 및 활용 가이드: 기본 세팅과 컴포넌트 재사용의 이점 (0) | 2023.02.27 |
| 리액트 사용의 이점과 시작 가이드: 프로젝트 구조 이해 및 기본 컴포넌트 생성 방법 (0) | 2023.02.27 |
댓글