Presenters

Presenter Structure

prop-types 종류

• array: 배열
• arrayOf: 특정 propType으로 이루어진 배열
• bool: true or false 값
• func: 함수
• number: 숫자
• object: 객체
• string: 문자열
• symbol: ES6의 Symbol
• node: 렌더링할 수 있는 모든 것(숫자, 문자열, JSX코드)
• instanceOf: 특정 클래스의 인스턴스(ex: instanceOf(MyClass))
• oneOf(['dog', 'cat']): 주어진 배열 요소 중 값 하나
• oneOfType([React.PropTypes.string, PropTypes.number]): 주어진 배열 안의 종류 중 하나
• objectOf(React.PropTypes.number): 객체의 모든 키 값이 인자로 주어진 PropType인 객체
• shape({ name: PropTypes.string, num: PropTypes.number }): 주어진 스키마를 가진 객체
• any: 아무 종류

Section Component

api에서 받아온 데이터를 렌더링해줄때는 데이터가 있는지 확인하기 위해서 반드시 트리플 체크를 해주도록 한다.

{  nowPlaying &&  nowPlaying.length  >  0 && ( <Section> ...</Section> ) }

children

• 부모컴포넌트에서 태그 사이에 props로 전달할 내용을 담으면, 자식 컴포넌트에서 children으로 전달된다.
• children은 재사용을 위해서 사용된다.

부모

<Section title="nowPlaying">movie</Section>

자식

const Section = ({title,children}) => (
	<Container>
		<Title>{title}</Title>
		<Grid>{children}</Grid>
	</Container>
);

브라우저 화면에는 아래와 같은 텍스트가 출력된다.

nowPlaying
movie

태그에 emoji 삽입시

마크업시 emoji나 이미지를 삽입한다면 시각장애인들이 읽을 수 있는 screen reader를 위해서 태그에 role과 aria-label을 따로 명시해줘야한다.

<span  role="img"  aria-label="Loading"  >🚀</span>

React Helmet

$ npm i react-helmet

페이지 내부위치나 결과값에 따라 웹사이트의 head를 변경해주는 라이브러리

<Helmet>
	<title>Movies | Nomflix</title>
</Helmet>

react-helmet-async

but rect-helmet 현재버전은 오류가 난다는 말이 있어서
(실제로 적용이 안됨)

$ npm i react-helmet-async

react-helmet-async 설치로 대체

코드는 아래와 같이 작성한다.

출처

• 초보를 위한 React JS