[React 공부노트 #2] react의 구조

Component

component를 쓰는 이유는 어플리케이션의 부분부분을 캡슐화 해서 쓰기 위해서 사용한다.

그렇기 떄문에 html, css, js, logic 을 한 곳에 모아서 독립적인 모듈화 시키고 싶기에 사용을 한다.

component folder

우선 component의 개념을 가진 folder를 만든후 html, css, js 다같이 넣어서 폴더별로 관리하는 방법이 있다.

하지만 문제점은 css의 classname을 사용을 할때마다 기억해야하고, 중복이 되면안되며 쓸때마다 import해줘야 하기에 불편하다.
그렇기에 global로 적용이 되는 css가 아닌 local적용이 되는 css를 만들어야 한다.

css module

강의 3.1

위의 문제를 개선할수 있는 방법은 바로 css를 module화 시키는방법이다.

RCA 에서는 css naming을 Header.module.css와 같이 만들게 되면 css파일이 module화가 되어서
js 처럼 import styles from './Header.module.css';와 같은 방법으로 import할수 있게된다.

또한 적용하는 위치에서는 <ul className={styles.navList}> 와 같이 사용을 하게되면 적용이되며 클래스네임은
실제 랜더링 되었을떄 classname이 자동 변경된다

하지만 여전히 classname 을 기억해야 한다는 단점이 있다.
그렇기에 하나의 파일로 합치고 싶으며 className을 기억하고 있지 않아도 쓰고싶다.

styled-component

강의 3.3
위와 같은 니즈로 인해 만들어 진것이 styled-compoent 다.

import styled from 'styled-components';

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

위와 같은 소스를 추가한후 (여기에서 List는 ul이 된다.)

<header>
    <List> //기존에 <ul> 자리
      <li>

기존의 ul이 있던자리에 넣으면 잘 적용이 된다.

Style-compoent에 Link 연결하기

<a> 태그와 같이 link를 설정해줄떄 <a href="/">Movies</a> 의 방식을 사용하지 않기 위하여
import {Link} from 'react-router-dom' 을 사용할 것이다.

 

Link 는 페이지 내의 링크가 존재한다면 브라우저한 방식이 아닌 JS한 방식으로 가게 해준다.

 

Link 는 Rotuter-dom에서 가져온 것이기에 const SLink = styled(Link)``;처럼 선언해준다.

 

그이후에 <a href="/">Movies</a>소스를 <SLink to="/">Movies</SLink> 이렇게 바꿔주자.

 

다만 이때 Header에서 Route-dom을 쓰게 되는데 Route dom은 1개의 Router밖에 존재할수 없기 떄문에
Router 내부의 Route로 들어가게된다.

 

이때, only one child의 원칙에 따라 <></> 을 써서 Switch부분과 Header를 1개의 child로 묶어준다.

3.4 global style

SC을 설치하거나 font 설정을 위해 사용한다

 

npm install styled-reset는 SC를 이용해서 css를 초기화한 다음에 적용해주도록 한다.

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, -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)
    }
`;

export default globalStyles;

위 와같이 global style을 정의해준다

이렇게 정의해둔 global style은 App.js에 Router하단에 추가해주면 global하게 적용이 된다

class App extends Component {
  render() {
    return (
      <>
        <Router />
        <GlobalStyles />
      </>
    );
  }
}

SC(Styled component) props를 전달하는법

border-bottom: 5px solid ${(props) => (props.current ? '#3498db' : 'transparent')};

위와 같이 props를 SC내에서 사용할수 있으며, render를 할떄에<Item current={true}> 이와 같이 props값을 전달해 줄수 있다

 

withRouter는 다른 컴포넌트를 감싸는 컴포넌트다.

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

위와 같이 withRouter를 쓸수가 있다

이는

const HeaderC = () => (
  <Header>
    <List>
      <Item current={true}>
        <SLink to="/">Movies</SLink>
      </Item>
      <Item current={true}>
        <SLink to="/tv">TV</SLink>
      </Item>
      <Item current={true}>
        <SLink to="/search">Search</SLink>
      </Item>
    </List>
  </Header>
);
export default withRouter(HeaderC);

위와 같은형태이기에 props를 가질수 있게 된다.

 

즉, WithRouter를 쓰면 router 에서 값을 가져와서 props에서 쓸수 있게된다.

 

(({ location: { pathname } }) 를 사용해서 spead를 하여 pathname을 가져오고,

<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>

위와 같이 조건을 현재의 라우트 pathname으로 판변하게 하면 현재의 route 위치와 그에 따른 효과를 줄수있다.