React + ES6 Code Style

namezin·2020년 5월 1일
0

Front-End

목록 보기
6/21

ES6

array operation :

// 예시
button.addEventListener("click", function(event){console.log(event)});

// array operation
button.addEventListener("click", event => console.log(event));

template literals : backtick 사용

// 예시
const message = "hello " + name;

// template literals
const message = `hello ${name}`;

Structuring, Object Destructuring:

//예시
const name = human.name;

// Structuring
const { name } = human;

// Object Destructuring
const { name: nick, job: { category } } = human;

Spread Operator

array, object로부터 아이템을 가져와 unpack해줌

  • array
const days = ["Mon", "Tues", "Wed"];
const otherDays = ["Thu", "Fri", "Sat"];
>
// ... : Spread Operator
const allDays = [...days, ...otherDays, "Sun"];
  • object
const pre = {
  first: "hi",
  second: "hello"
}
const post = {
  thrid: "bye bye"
}
const all = {...pre, ...post};
console.log(all.third);

React

.env

NODE_PATH=src

react-route-dom

  • Hash Router : Hash 사용
  • Browser Router : HTML history API 사용

Composition, Switch

  • Composition : 두 개 이상의 Route를 랜더링 하는 방식
<Router>
  <Route path="/tv" component={TV} />
  <Route path="/tv/popular" render={() => <h2>popular</h2>} />
</Router>
  • Switch : 한 번에 오직 하나의 Route만 Render
<Router>
  <Switch>
    <Route path="/tv" component={TV} />
    <Route path="/tv/popular" render={() => <h2>popular</h2>} />
  </Switch>
</Router>

css 캡슐화

Component 내에서 같이 캡슐화를 위해 사용

  1. Component폴더를 만들어 css파일, component js파일을 같이 묶어서 사용
    단점: css파일을 만들어야 하고 className을 중복해서 사용하지 않도록 기억해야됨

  2. CSS 모듈 사용

    Component.module.css
    
    import styles from "./Component.module.css";
    

    중복해서 사용하는 걸 염려하지 않아도 됨
    단점: 여전히 파일은 분리되어 있고 className명을 기억해야됨. 또한 className내에 - 를 사용할 수 없음

  3. Styled-component
    component js파일 내에서 component형태로 wrapping해서 사용 가능

    const Header = styled.header`
      display: flex;
      &:hover {
        background-color: blue;
      }
    `;
    
    export default () => <Header />
    

withRouter

props 사용 가능하도록 wrapping 하는 router

react-helmet

helmet component를 사용하게 되면 head 영역에 들어가게 되고,
title을 쉽게 수정 가능하게 해줌

<Container>
  <Helmet>
    <title>{props.title}</title>
  </Helmet>
  <Section>
    <h1>{message}</h1>
  </Section>
</Container>
profile
개발관심자

0개의 댓글