React 공부 (with nico 3장)

3.0 CSS in React part One

 

//style.css를 index.js랑 같은 곳에 만들어 준다.

//Header.js를 Components안에 Header 폴더를 만들고 그안에 넣고 새로 index.js를 만들자
//내용은
import Header from "./Header";

export default Header;

//style.css를 header 폴더에 옮기고 나서 header.css로 변경해줌
.nav ul {
    display : flex;
}
//내용은 이렇게 쓰면 컴포넌트 폴더 안에 Header 폴더에 header.css, index.js, header.js가 한몸임

 

3.1 CSS in React part Two

// 좀더 한몸이 되게 해보기

//header.css를 header.module.css로 바꾸기
//그럼 header.js에서 import를 import styles from "./Header.module.css"; 해주기

//css파일에
.navList {
    display : flex;
}

//js에서는 이렇게 씀
    <header className={styles.navList}>

//그럼 다른 파일에서도 navList를 쓸 수 있음

 

3.2 CSS in React part Three

 

// 이번에는 header 파일이 필요없는 그런 걸 해볼거임 일단 header.js를 밖으로 빼고 다지우자

//yarn add styled-components

//import 추가하기
import style from "styled-components" 

//header.js를 이렇게 작성함 LIST는 이제 어디서든 쓰기가능
import React from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

const Header = styled.header``;

const List = styled.ul`
  display: flex;
  &:hover {
    background-color: blue;
  }
`;

const Item = styled.li``;

const SLink = styled(Link)``;

export default () => (
  <Header>
    <List>
      <Item>
        <SLink to="/">Movies</SLink>
      </Item>
      <Item>
        <SLink to="/tv">TV</SLink>
      </Item>
      <Item>
        <SLink to="/search">Search</SLink>
      </Item>
    </List>
  </Header>
);

//이후에 라우터안에 header 넣어주기

 

3.3 GlobalStyles and Header

//이번에는 css를 글로벌하게 해보자
//yarn add styled-reset --> 초기화

나머지는 따라씀
globalsytle 추가하고 끝

 

3.4 Location Aware Header

 

//withRouter는 다른 라우터를 감싸는 라우터임