[항해99 주특기] 2주차 강의내용 -Redux2편

리덕스란?

 

상태관리 라이브러리로써 useState로 지역적으로 상태를관리했던 것을 중앙관리소인 store를 통해서 대신관리한다. 

contextAPI로 상태관리를 할 수도 있지만 안좋은 부분으로 하위컴포넌트 전체가 리랜더링되는 부분이 있다.

(나중에 시간나면 contextAPI 찾아보자)그래서 상태관리면에서는 부족한면이 굉장히 많다.

그래서 리덕스의 사용이 더 좋은 부분이 많다.

(사실 이러면 contextAPI가 왜 있는지 모르겠다 )

 

global state(전역상태 ) && local state(지역상태) 

모든컴포넌트가 store에 접근 할 수있다. 하지만 어떤 컴포넌트는 보여지는 역할만 하기에 접근하지 않아도 되는 애들도 있다. 그렇기에 컴포넌트를 container폴더와 component로 나뉘어서 구분을 지어서 doc을 관리해보자

 

js앱을 위한 예측가능한 상태 컨테이너(중앙화된) 패키지이기때문에 다운로드를 해서 사용해야한다

yarn add redux react-redux

 

store : 접근 및 제어가 가능한 중앙 state 관리소이다

 

---

redux 설정해보자

 

1.RCA을통해 파일을 만들고 패키지를 설치하자

(package.json에서 설치 잘 되어있는지 확인을 해보고 넘어가라)

 

2. 폴더구조를 만들기

redux/config/Store.js(이놈이 중앙관리소) 구조를 형성하고

redux/modules를 생성해서 modules에서 reducer와 action함수와 action, state 등등 들어간다.

 

3. 코드를 작성해보자 (코드를 너무 깊이 이해하려 하지말자)

Store에 createStore(스토어 만드는 API) 와 combineReducers(리듀서를 하나로 묶는 역할을 하는 API)를 import해온다

그리고 const rootReducer = combineReducers({}); 를 선언해서 객체를 값으로 받는 변수 하나 만들자 그리고 만든놈으로 store를 생성해준다 const store = creatStore(rootReducer);

modules에 넣어놓은 묶음들을 객체(첫줄에 있는 콤바인리듀서)형태 안에 몰아넣을 것이다 그러면 state집단이 모두 들어오게 된다.

스토어를 만들어 놓고 사용은 아직 안한상태이기 때문에 사용할 수 있게 export를 통해 밖으로 내보낸다

index.js에서 store를 사용하기 위한 코드를 작성한다.

strictMode 지우고 Provider로 감싸줄것이다 App이라는 컴포넌트를 이 프로바이더는 우리가 만든 스토어를 기반으로 지배권을 행사해서 프로바이더 하부에 있는놈들은 store를 사용할 수 있는 모습으로 만드는 것임 물론 import 해와야한 store를 경로 잘 가져오자 config/Store에서 가져와야한다

modules 는 state의 그룹이기떄문에 먼저 만들고 counter를 만들어보자

modules에 counter.js생성 그 안에 const initialState = {number ; 0} 적고 리듀서라는 함수를 밑에 만든다

const counter = (state= initialState, action) => { switch문} 리듀서는 인풋값으로 2가지를 받는데 state와 action을 받는다.

액션에는 타입과 밸류가 있기때문에 switch문을 통해서 골라내보자 이후 export 해주면 됨 이러면 counter 가 완성임

useState를 통해 선언했던 것을 초깃값으로 지정해준것이다 set하는부분도 대체를 한것이네 

리듀서는 state를 action의 타입에 따라 변경하는 함수이다.

 

5. 이제 rootReducer 안에 modules에서 만든 리듀서를 넣어보자 (store에 넣는 거임)

store에서 import해서 counter를 불러와서 키밸류형태로 넣어주면 됨 이제 이걸 읽어와서 써야하는데 그걸 어케 할까? (useSelector)

 

6. 접근해보자 

useSelector를 통해서 const data = useSelector((state)=> { return state}); 매개변수로 콜백함수를 받는 selector 위에 적힌걸 콘솔로그로 찍어보면 객체가 온다는 것을 알 수 있다 리듀서를 한개 더 만들어서 객체 형태를 한번 비교해보자 state.counter 라고 하면 counter객체만을 가져오는 형태가 된다.

 

export default와 export의 차이점 defalut로 하면 중괄호 없이 가져 올 수 있다. 대표적인 녀석이니까 대표적이지 않은녀석들은 {}로 가져오는 것 같다 (나중에 알아보자)

 

---

 

store에 접근해서 데이터를 바꾸어보자 리덕스 공식홈페이지에서 제공하는 그림을 보ㅕㅁㄴ서 확인해보자

store 안에는 state도 있고 reducer도 있다 상태고 상태를 제어하는 애들 (스위치문을 통해 액션 객체의 타입을 통해 동작을 하게 해 제어를 한다) ui는 컴포넌트(App.js) 라고 했을 떄 사용자의 액션에 따라 ui에서 이벤트가 디스패치를 통해서 액션으로 바뀐다 dispatch라는 놈이 action 객체를 가지고 store로 방문을 한다.

dispath가 가지는 느낌은 액션객체를 가지고 store에 던져주는 놈이라고 생각을 하자

중앙데이터 관리소에 이데이터를 어떻게 해줘 라고 던져주는 놈이 dispath다 라는 느낌을 가져가자 

액션에 있는 타입에 따라서 리듀서가 state를 제어한다.액션객체는 항상 2가지를 가지는데 타입과페이로드인데 타입만 주목해보자 스토어는 이 액션 객체에 있는 타입에 따라서 state를 변경해주는 작업을 한다.

+1해주는 로직을 쓸면 어떻게 해야하냐 리덕스에서 정의해놓은 액션객체에 타입에 따른 변경되는 방법을 지정을 해야하고 그걸 끌어 써야한다 그럼 사실 이 모듈안에 들어가는거에 로직이 거의 짜지겠다는 생각이 드는구나

액션을 스토어에 던져주는 디스패치를 가져와서 App.js에서 사용해야하는데 이떄도 Hook이 필요하다 

const dispatch - useDispatch(); 이걸 써서 스토어로 던질 수 있으니 이벤트 안에 넣고 디스패치 안에 인자로 액션객체를 넣어줘야한다 {tpye : "PLUS_ONE"} 이렇게 넣어주면 된다. 액션에 들어간 스위치에서 리턴문에 객체를 리턴하는것은 지금 현재 가지고 있는 넘버의 값이 객체이기 때문에 같은 type을 반환하게 해야하니깐 그런것임

 

 

---

리듀서와 컴포넌트의 실제 호출하는 부분을 꼭 맞추어줘라 type에다가 counter/PLUS_ONE이라고 했다고 치면 카운터js에서도 변경을 해줘야하는데 일단 이거 일일히 다 찾아서 변경할라면 실수를 할 수 있게 된다 그러면 어떻게 변경을 해야하나 그래서 지양해서 해야한다 actionCreater and actionValue 이걸 활용해보자 직접 넣는것이아니라 변수형태로 관리하면 어떻겠느냐

리듀서 최상단에 액션밸류를 만들어 보자 const PLUS_ONE = "PLUS_ONE" 이렇게 변수로 만들어서 가져와보자 그리고 밖에서도 써야하니깐 export 해주자 그리고 import로 가져오고 이렇게 쓰는게 액션밸류이다

액션객체를 만들어주는 역할을하는 함수를 따로만들어서 휴먼에러를 줄여보자

액션 크리에이터는 액션밸류를 return 해주는 함수 

exconst plusONe = (state) => {

    return {state.counter} }

---

액션객체의 name을 바꾸어볼까??  여러모듈의 액션의 이름이 겹칠 수 있기떄문에 세분화된 네이밍을 쓰는 것이 좋다.

모듈명/액션으로 해보자 리듀서와 컴포넌트에서 호출하는 액션의 이름을 맞춰줘야한다.

리듀서의 최상단에 상수로 된 변수를 만들 것이다 이게 액션밸류인데 이걸 해줘야 하는 이유는 문자열로 된 type은 틀렸을 때 검증이 힘들다 exprot const PLUS_ONE = "PLUS_ONE" 이런식으로 export해서 다른 곳에서도 사용이 가능하다

공통적인 부분을 관리할 수 있기에 좋다.

 

액션크리에이터를 만들어보자 (액션밸류를 리턴하는 함수)

액션객체를 import할게 아니라 크리에이터로 만든 함수를 리턴함으로써 임포트할게 확실히 정리가 되겠구만 액션객체를 export할 필요가 굳이이잉이 없다

 

---

액션크리에이터로 만드는 액션객체는 타입과 페이로드를 가지고 있는 모습이구만

payload를 이용해보자 payload라는게 이제 액션 함수에서 받아오는 값 같은거구만

문자열부분에다가 +를 붙이면 자동으로 형변환이 된다 이것도 좀 꿀 팁이구만

+event.target.value

---

리액트 라우터 돔을 배워보자

리액트 라우터 돔 패키지

 

라우터라는 기법은 무엇인지 알아보자

메인페이지에서 버튼을 눌렀을 때 url이 main.com/~~~이렇게 페이지로 나눠서 안내해주는 경우를 많이 볼 수 있다 이런것이 라우팅 기법이라고 한다.

이런 것들을 리액트에서 편리하게 쓸 수 있게 제공해주는 패키지가 리액트 라우터 돔패키지이다

왜 유용하고 꼭 필요한지 알아보자

yarn add react-route-dom

페이지컴포넌트(우리는 원래 단일페이지로 구성을 헀었다) 근데 이제는 다중패키지로 만들것이기떄문에 

Router.js파일을 만들어서 router를 구성하는 설정코드를 작성할 것이다 

redux를 마

app,jsx에 import해서 적용을 할 것임 마지막으로 테스트를 할 것임

 

1 page component를 만들어보자

src밑에 pages를 만들어 놓는다 그 아래에 home.jsx about.jsx contect,jsx works.jsx 4개의 페이지를 만들었다

 

2.Router.js를 만들어서 구성코드를 작성해보자

주소를 라우트라고 한다. com뒤에 붙는 /뒤에 있는것들이 라우트임

src밑에 shared만들어서 Router,js 만들어서 BrowserRouter, Route, Routes를 import해온 뒤 컴포넌트 형식으로 만든다

브라우저 라우트를 가장 최상단에(껍데기)로 해놓고 안에 라우트스를 넣고 그 안에 라우트들을 넣는다.

페이지 숫자만큼 라우트를 넣는것임 <Route path="/" element={<Home />}> 패스는 경로이고 슬래쉬뒤에 추가적인 라우트를 적는으면 된다(아무것도 없다) 연결해주는 컴포넌트를 element에 넣는다.

export default Router를 해준다.

 

설정을 하나 더 해야한다 App.jsx로 가서 (최상단) Router를 가져오는데 우리가 만들어놓은 것을 가져와야하지 react-router-dom을 가져오면 안된다 경로 잘 보자

 

그곳으로 가고싶을때는 crtl + 클릭을 하게 되면 이동할 수 있다.

리액트 라우트 돔에도 훅이 있다 얘네들 살펴봐야한다

 useNavigate 

Apage에서 Bpage로 이동할때 이걸 적용한 버튼을 누르면 이동한다 like <a>

const navigate = useNavigate();

<button onClick={()=>{}navigate("/works")}>work로 이동</button>

 

useLocation 

생긴모습은 객체형태인데 해쉬 키 패스네임 서치 스테이트 의 값을 가지고 있다 이런것들을 통해 현재의 위치를 알 수 있는 정보를 알 수 있다 조건부랜더링 이런게 가능하다.

 

훅은아니지만 꼭 알아야하는 API Link

<a> 를 대신하는 녀석임

a tag를 쓰게 되면 새로고침이 없어야하지 아니면 못쓴다 그래서 Link API를 사용하는 것이다.

 

<Link to={}></Link> 사용할떄에는 항상 to(어디로 갈지)속성값을 포함시켜야한다.

페이지를 이동하는데에 목적이 있지만 조금 다르다 뭐가다른데 이게

 

useParams

이것을 써보면 현재 라우팅페이지로 넘어온 파라미터 정보들을 알 수 있다.

 

children

---

다이나믹라우트 동적라우트란다~
맵함수를 쓸때에는 key값을 무조건 설정을 해야한다 필수!
&nbsp 띄어쓰기를 JS문법 내에서 사용할 때

:식별자

find 배열관련 API 어떤 데이터를 찾아낸다.

---

비동기프로그래밍

동기방식 현재실행되는 코드가 끝나야 다음코드가 실행된다 

서버통신과 관련된 로직들로 인해 이해할 필요성이 강조된다

콜백지옥 --> promise

 

대기상태 요청을 하고 난 직후 pending상태 

이행상태 fulfilled 정상적으로 데이터를 전달해준상태

거부상태 어떠한 이유로 데이터를 전달 못해준경우

 

async await es7문법

---

restAPI 

어떤 자원에 대해서 CRUD를 진행할수 있게 HTTP METHOD를 사용하여 요청을 보내는 것ㅇ ㅣㅇ떄 요청을 위한 자원은 특정한 형태로 표현된다 URI를 통해 정보의 장원을 표현하고 자원의 행위는 TOOP Method로만 명시한다

자원 URP 행워 HTTP Method 표현 GET /user/3/profile 이런식으로

좋은예시 나쁜예시 자료 참고하자

규칙을 좀 쭉읽어보고 알고있어야겠다

restful하다라는 것은 규칙을 만족시킨것을 말하는구나 누가 사용하든 이해하기 쉬운 API라는 것이구만

restful하지 못한 예시를 보면서 생각을 하면 되겠네

 

path variable bs Query parameter

경로 자체에 변수를 사용한 path  전체 데이터 또는 특정하나의 데이터를 다룰 떄처럼 식별할때 사용된다

쿼리는 데이터를 정렬하거나 필터링을하는경우 더 적합하다

언제 이걸 왜 쓰는지 꼭 알아보자

 

---

JSON이란 무엇인가 

서버통신을 할때 하는 방식 중 하나이다

서버 클라이언트 사이에서 특히나 많이 하는 방식이다

javascript object botation 자바스크립트 객체문법에 토대를 둔 문자 기반의 데이터 교환방식

일반적으로 객체 리터럴 방식을 따른다 (객체와 비슷하다)

완전히 같지는 않지만 비슷하다

 

메서드 (JSON만을 위한)

JS Object를 JSON으로 바꾸는 것     JSON.stringify() 객체를 JSON문자열로 바꾸는 것

JSON을 JS Object로 바꾸는 것    JSON.parse() 보내는 것 변환하는 것 문자열을 객체로 바꾸는 것

 

JSON Paceholder

페이크 서버 모킹서버 == 가짜통신을 할 때 쓴다

구글에서 JSONPlacegolder라고 치면 가이드대로 하면 된다 가짜 url이 있으니 이걸로 니가 해봐 라는 것

 

라이프사이클 용어를 기억하면서 상기하자