ReactJS 간단 정리

1. Fundamental

1. Arrow Function =>

   return을 함축적으로 가지고 있음

2. Template Literals

   ${id}

3. Object Destrucuturing

   const { data } = req;

4. Spread Operator ...

   배열로부터 아이템을 가져와서 Unpack함

5. classes
6. Array.map

   각각의 아이템에 대해 시행하고 아이템을 모아서 배열을 return하는것

7. Array.filter

   각각의 아이템에 대해서 해당 조건이 맞는 아이템을 모아서 배열을 return하는것

8. Array.forEach

   foreach function은 각각의 아이템에 대해서 어떠한 시행만 하는것

//연습 js
const days = ["Mon", "Tues", "Wed"];
const otherDays = ["Thu", "Fri", "Sat"];

const allDays = [...days, ...otherDays, "Sun"];
console.log(allDays);

const happyDays = allDays.map((day, idx) => `happy ${idx + 1}:${day}`);
console.log(happyDays);

const numbers = [2, 45, 22, 456, 23];

const biggerThan15 = numbers.filter((num, idx) => num > 15);
console.log(biggerThan15);

allDays.forEach(day => console.log(day));

Settings

npx create-react-app venus

CSS

1. '.css' file : component들과 css file이 분리되는 단점
2. index, css파일들을 폴더에 넣어서 해당 폴더가 component라고 생각함 (또한 css가 글로벌로 적용되기때문에 이름 중복 안되게 조심해야함)
3. CSS 모듈 : CSS가 글로벌이 아니라 로컬로 적용되게 가능함 file.module.css 만든 후에 styles.navList 이런식으로 적용하면 style값이 랜덤으로 뒤에 숫자가 붙음
4. Styled-components : style이 안에 있는 컴포넌트를 생성할 수 있게 함

Container Presenter Pattern

중규모의 React Project. 기본적으로 작동하는 방법은, Container는 data, state를 가지고 api를 불러온다. 그리고 모든 로직을 처리할꺼고, 그다음에 프리젠터는 그 데이터들을 보여주는 역할을 한다. 하지만 프리젠터는 state를 갖고 있지 않고, API가 뭔지 모르고, 클래스도 없고, 그냥 함수형 컴포넌트이다. 프리젠터는 스타일이고 컨테이너는 데이터다.

React with TypeScript

npx create-react-app project --typescript