07.01 항해99 25일차

이번주 배운것 및 노트 :

웹페이지의 “사용성” 

 

싱글페이지 어플리케이션 SPA

 

라우팅 - 페이지를 이동해서 다니는 것.

React-route-dom

 

자식에게 넘겨주고 싶은 state가 있을때 없을때 적용방법이 차이.

<Route path=“/adress” component={name}/>

<Route path=“/adress” render={(props)=>(<BucketList list={this.stae.list}/>)} />

<Route path=“/adress” render={(props)=>(<BucketList list={this.stae.list}/>)} component={name}/>  <?

중복주소 처리법 : exact 추가

 

Url 파라미터

-/data

쿼리

-?data=value

 

<Link/>

<Link to="주소">[텍스트]</Link>

 

히스토리 객체로도 이동

<button onClick={()=>{this.props.history.push(‘주소’);}}>버튼 이름</button>

뒤로가기 : history.goBack

 

예외: 빈 주소 처리.

Switch로 감싼 다음 path가 없는 라우터

 

 

리덕스 - 상태관리를 맡아줌

상태란 ? : 데이터

 

State : 데이터. 딕셔너리 형태로 보관

Action : 데이터 변경시 발생. ‘객체’

ActionCreator : 액션 생성 함수. 액션을 만들기 위해 사용

Reducer : 리덕스의 변경하는 함수.

Store : 리덕스를 적용하기 위해. 리듀서 및 내장함수 포함. 딕셔너리형.

Dispatch : 스토어의 내장함수. 액션을 발생. 파라미터로 넘김.

 

리덕스의 특징

1. Store는 1개만

2. Store의 state는 오직 action으로만 변경

ㄴ데이터 불변성 유지

3. 어떤 요청이 와도 Reducer는 같은 동작

ㄴ 파라미터 외 다른 값에 의존X

 

 

리덕스 구조

리듀서/액션/액션크리에이터 각각 파일 하나별 모양새로 작성

 

덕스구조 - 기능으로 묶어 작성

리덕스 모듈 (리듀서, 액션, 액션크리에이터) 

스토어 - 프로젝트당 1개, 리듀서 1개

 

리듀서 리덕스 안의 모듈 js파일의 명칭은 소문자부터.

액션은 전부 대문자

 

Export default 로 내보낼 수 있는 건 파일당 1개

디폴트 익스포트시, 임포트시 중괄호 없이 작성가능

일반 익스보트, 중괄호 필수 및 콤마로 엮을 수 있음.

 

클래스형 - connect

함수형 - useSelect()

느낀것 :

<ㅇ> 어렵다...

내게 아쉬웠던 것 : 

머리..?

 

내일 할 일 :

심화과정 들어가는데 할 수 있을까...