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>