api에서 받아온 데이터를 렌더링해줄때는 데이터가 있는지 확인하기 위해서 반드시 트리플 체크
를 해주도록 한다.
{ nowPlaying && nowPlaying.length > 0 && ( <Section> ...</Section> ) }
부모
<Section title="nowPlaying">movie</Section>
자식
const Section = ({title,children}) => (
<Container>
<Title>{title}</Title>
<Grid>{children}</Grid>
</Container>
);
브라우저 화면에는 아래와 같은 텍스트가 출력된다.
nowPlaying
movie
마크업시 emoji나 이미지를 삽입한다면 시각장애인들이 읽을 수 있는 screen reader를 위해서 태그에 role
과 aria-label
을 따로 명시해줘야한다.
<span role="img" aria-label="Loading" >🚀</span>
$ npm i react-helmet
페이지 내부위치나 결과값에 따라 웹사이트의 head를 변경해주는 라이브러리
<Helmet>
<title>Movies | Nomflix</title>
</Helmet>
but rect-helmet
현재버전은 오류가 난다는 말이 있어서
(실제로 적용이 안됨)
$ npm i react-helmet-async
react-helmet-async
설치로 대체
코드는 아래와 같이 작성한다.