20일차

 

nesting -> 계층화 시켜서 css 구문을 관리할 수 있다.

 

'&' 는 이전 단계와 동급으로 사용할 경우에 사용한다.

 

router

yarn add react-router-dom

or

npm install react-router-dom

 

index.js 라우터 세팅

 

 

 

switch를 쓰거나 exact를 사용한다.

switch의 경우 home을 아래에 써주어야함 안그러면 /만 보고 다 홈으로 빠짐

 

detail 함수

 

axios

 

yarn add axios

npm i axios

 

api test는 jsonplaceholder

 

component 설계

 

useEffect

useEffect(콜백함수 - > dom이 렌더링 될 때 호출된다.

콜백함수의 리턴값은 dom이 사라질 때 호출된다.

두번 째 인자가 감시대상을 지정하고

두번째 인자가 없으면 모두 감시한다.

useEffect(()=>{

console.log('counter 1 or 2 update');

},[count1, count2])

 

redux

전역 변수(저장소) 관리

vue에서 vuex와 같은 포지션이다.

설치는 yarn add redux react-redux 또는 npm i redux react-redux

 

react-redux

reducer -> 데이터 관리(쓰기) -> ajax(Axios, fetch)

props 연결은 connect 함수를 이용한다.

export default connect(state 연결함수)(연결할 컴포넌트) 

dispatch로 reducer 호출하는데 action을 두번째 인자로 넣음  action은 메서드 선택하고 파라미터를 전달

 

레드 스켈레톤 실행하는 법

(클론)

npm install

npm start

생 노드인데 이걸 express를 사용하여 바꾸어보아라