Text , Image 컴포넌트 커스터마이징

<개요>

1. Text 컴포넌트 커스터마이징

(1) 코드리뷰

해당 컴포넌트는 color, fontsize을 커스터 마이징하는 Text 컴포넌트이다. 

밑에는 Typography의 타입을 검사하는 PropTypes라는 속성을 사용했다. 

해당 PropTypes 속성을 쓸려면

이걸 설치 해야한다. 

 

propTypes라는 타입 검사기의 내부는 {Property: PropTypes.원하는 타입 }형태로 쓰고 

해당 속성의 인수로 원하는 타입이 들어오지 않았을 시 Warn 경고문을 화면에 띄운다. 

 

https://ko.legacy.reactjs.org/docs/typechecking-with-proptypes.html

위 링크는 propTypes의 사용법에 대해 적혀 있다. 타입을 검사하는 방법이 다양하게 있다. 

 

우리는 위의 예시에 설명된 내용이 무엇을 뜻하는 지 알아보자. 

먼저 color: PropTypes.string은 컬러 속성에 들어오는 인수는 String이여야 한다는 뜻이다. 만약 String 외의 값이 들어올 시 콘솔에 경고문이 뜬다.

그 뒤의 fontSize: PropTypes.number.isRequired는 fontSize 속성에는 무조건 number 타입이 들어와야 하고, 해당 속성은 필수 값이라는 뜻이다. 따라서 fontSize의 인수에 들어온 값이 number 값이 아니거나, 인수로 아무것도 들어오지 않을 경우 경고문이 뜬다. 

마지막으로 oneOfType은 속성의 타입이 ([]) 안의 원소 중 하나여야 한다는 뜻이다. 위에서는 children이란 속성이 element (<></>)이거나 String 값이어야 한다는 뜻이다. 

 

a. 코드의 구조에 대해

그리고 위의 코드를 보면 export default로 함수형 컴포넌트를 바로 export 하지 않고, 이름을 부여한 후 , 

해당 컴포넌트의 속성인 PropTypes를 쓰고 그 후에 export한 것을 볼 수 있다. 

 

이렇게 코드를 적은 이유는 다음과 같다.

propsTypes는 컴포넌트의 속성이다. 점 표기법으로 컴포넌트의 속성을 불러오려면 컴포넌트의 이름을 알아야 한다. 

하지만 export default () => {}를 쓰면 해당 익명함수에 페이지 이름을 할당하여 외부에서 호출할 수 있도록 하는 것이다. 

해당 페이지 내부에서는 여전히 익명함수이다. 따라서 점표기법으로 propsTypes라는 속성을 불러들여 쓸 수가 없다.

따라서 해당 함수에 이름을 부여한 후, propTypes를 쓰고, 그 다음에 default 함수로 export하였다. 

app.js

app.js 안 쪽이다. Text라는 문자는 크기와 색깔을 다르게 해주기 위해 Typography로 한번 더 감았다. 

(2) 새롭게 알게 된 것

a. import 할 때 as를 사용하면 import할 컴포넌트를 재명명 가능하다.

b. element 들에게는 children이란 속성이 있다. 해당 속성은 <> </> 사이에 있는 값이 인수로 담긴다. 

c. element는 <> </>형태의 요소를 말한다. 이는 화면에 표시될 내용에 대한 기술이다.

 

2. Image 컴포넌트 커스터마이징 

(1) 코드 리뷰

이건 뭐 이름만 바꿨지 Image의 요소를 그대로 썼다. 

app.js에서는 위와 같이 쓰였다.

(2) 새롭게 알게 된 것

require 명령어는 다른 파일의 내용을 불러와 쓸 수 있게 해주는 명령어 이다.