강의 안들은지 꽤되서 주말에 듣는중,,,
니꼴라스는 정말 간결한걸 좋아함.. 매번 감탄중,..

Styles

• GlobalStyles.js 사용
  ( 사용이유는 https://velog.io/@holicholicpop/REACTRouter-3.-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9A%B0%ED%84%B0-Test-version5.0 포스팅 참고)
• current class 설정 (pathname)

이번 section은 style관리, 구축하는 걸 중점으로 공부함.

1. GlobalStyles.js

전역css 라고 생각하면됨.

import React from 'react'
import {createGlobalStyle} from 'styled-components';
import reset from 'styled-reset';
const GlobalStyles= createGlobalStyle`
${reset}
a{
    text-decoration:none;
    color: inherit;
}
*{box-sizing:border-box;}
body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    background-color: rgba(20,20,20,1);
    color: #fff;
}
`;
export default GlobalStyles; 

2. Header.js (withRouter사용)

이 부분이 중요한데, 지금 current를 알수있는 (클릭한 Item) 방법은 여러가지 있다.

자바스크립트, 제이쿼리 같은경우는 this로 처리하거나, id 값을 넣어서 e.target으로 처리하는 경우가 많았다.

리액트에서는 location의 경로를 잡아 pathname여부로 조건부연산자를 통해서 처리한다.

1. withRouter로 component감싸기

Header.js 는 Route의 경로로 지정되있지 않기 때문에 props로 받아올 수 없다. 그래서 withRouter로 감싸서 props를 받아와야 한다.

(styled의 component Header와 Header컴포넌트 네임이 겹치기 때문에 styled이름을 수정하여 사용)

export default withRouter(() => 
<MainHeader>
      <List>
        <Item current={pathname === '/'}>
          <SLink to="/">Movies</SLink>
        </Item>
        <Item current={pathname === '/tv'}>
          <SLink to="/tv">TV</SLink>
        </Item>
        <Item current={pathname === '/search'}>
          <SLink to="/search">Search</SLink>
        </Item>
      </List>
    </MainHeader>
);

이렇게 history, locaiton, match가 담기는걸 볼 수 있음.

2. pathname 설정하기

export default withRouter(({location:{pathname}}) => 
<MainHeader>
      <List>
        <Item current={pathname === '/'}>
          <SLink to="/">Movies</SLink>
        </Item>
        <Item current={pathname === '/tv'}>
          <SLink to="/tv">TV</SLink>
        </Item>
        <Item current={pathname === '/search'}>
          <SLink to="/search">Search</SLink>
        </Item>
      </List>
    </MainHeader>
);

Item 컴포넌트에 current로 지정된 pathname을 보내준다. 그럼 Item component는 current를 props로 받게 되고, pathname이 일치하면 true, 일치하지 않는다면 false를 반환한다. 현재의 pathname에 맞을때만 border를 white로 설정하면 된다.

const Item= styled.li`
 width: 80px;
height: 50px;
text-align: center;
border-bottom: 3px solid ${props => props.current? '#fff' : 'transparent'};
transition: border-bottom 0.5s ease-in-out;
`

새로운거 배워서 기분이좋다. 빨리 써먹고싶다!