이번주 배운것 및 노트 :
웹페이지의 “사용성”
싱글페이지 어플리케이션 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()
느낀것 :
<ㅇ> 어렵다...
내게 아쉬웠던 것 :
머리..?
내일 할 일 :
심화과정 들어가는데 할 수 있을까...
'항해99' 카테고리의 다른 글
07.03 항해99 27일차 (0) | 2021.07.03 |
---|---|
07.02 항해99 26일차 (0) | 2021.07.03 |
06.30 항해99 24일차 (0) | 2021.06.30 |
06.29 항해99 23일차 (0) | 2021.06.30 |
06.27 항해99 21일차 (0) | 2021.06.28 |