Chapter7. Posts 2편
안녕하세요. 이번 시간도 Nomard Coder의 InstaClone Coding Chapter 7. Post 편에서 두번째로 제가 중요하다고 하는 시간을 가져보도록 하겠습니다. 2편의 내용은 아래와 같습니다.
2편
- react-helmet
- propTypes
- isRequired
- arrayOf
React-Helmet
먼저, React-Helmet의 내용을 이해하려면 HTML 문서의 meta Tag가 무엇인지 알고 계셔야 합니다. 메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용합니다.
HTML 문서의 <head>와 </head> 사이에 입력하는 특수 태그로서 사이트의 디자인에는 전혀 영향을 미치지 않고 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있습니다.
메타태그 속성에는 http-equiv, name, content 3가지 속성이 있습니다. 간단하게만 설명하자면 아래와 같습니다.
http-equiv=”항목명”
웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용될 수 있으며, HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖습니다.
content=”정보값”
meta 정보의 내용을 지정합니다.
name=”정보 이름”
몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv 와 같은 기능을 합니다.
이렇게 meta Tag의 내용을 구성해야 할 때 React-Helmet의 Helmet Tag로 감싸주어 설정만 하면되는 매우 간단하여 저와 같은 React 초보자에게 사랑받는 패키지입니다. React-Helmet의 사용법은 yarn add react-helmet으로 설치하신 뒤에 import 하여 쓰기만 하면 됩니다.
import React from "react";
import {Helmet} from "react-helmet";
function Example {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>pacdong's DevLife</title>
<link rel="pacdong" href="http://pacdong.github.io" />
</Helmet>
...
</div>
);
};
propTypes
인스타그램은 많은 로직이 모여 만들어진 앱입니다. 많은 로직이 만들어 질수록 많은 버그 발생 가능성을 내포하고 있습니다. 만약 TypeScript를 써서 prop의 type을 제한할 수 있다면 버그 발생가능성을 줄여줄 수 있습니다. 그와 같은 기능을 하는 것이 react의 propType입니다. props의 프로퍼티로 propTypes을 선언하여 type 확인을 할 수 있습니다.
import PropTypes from 'prop-types';
function Example {
return (
<h1>Hello, {this.props.name} / {this.props.age}</h1>
);
}
Example.propTypes = {
name: PropTypes.string,
age: PropTypes.number.isRequired
};
이렇게 props로 들어가는 값인 name의 타입은 string으로 지정해주는 기능을 할 수 있는 것이 react의 propTypes입니다. 노마드 코더가 하단에 쓰는 이유는 버그를 줄이기 위함입니다.
isRequired
그렇다면 Example.propTypes = { age: PropTypes.number.isRequired }; 여기서 isRequired는 prop이 제공되지 않았을 때 isRequired와 연결하여 경고를 보여주기 위함입니다. 즉, age 값은 반드시 지정이 되어야 한다는 뜻입니다. GraphQL에서 Scheme 구성을 할 때 뒤에 !를 붙여주는 것과 같습니다.
arrayOf
optionalArrayOf: PropTypes.arrayOf(PropTypes.number)이와 같은 예를 보신 적이 있습니다. props로 배열을 가져올 경우에 arrayOf를 사용합니다. 단순히 지나치면서 ‘아, 배열으 ㄹ가지고 오는구나’라고만 생각할 수도 있지만 다시 돌이켜 생각해보면 props로 배열을 가져올 경우에 arrayOf를 쓸 수 있다고 하면 optionalObjectOf: PropTypes.objectOf(PropTypes.number)이렇게 객체를 가져올 수도 있으며
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
위와 같이 특정 형태를 가지는 객체를 가지고 올 수도 있습니다. 이상으로 Nomard Coder의 Chapter 7. Post에서 느낌을 알지만 제대로 정의하지 못했던 개념에 대해서 정의하였습니다.
Leave a comment