프로젝트에서 반응형을 구현해보기로 했기 때문에 오늘은 반응형 웹을 만드는 방법에 대해서 공부해보기로 했다.
유튜버 드림엘리의 강의와 여러 레퍼런스를 보며 공부했지만 역시 실전에 맞닥뜨려봐야 알것같다..
react, styled-component를 활용해 반응형 웹사이트 만들기
React MVC 패턴, FLUX 패턴
React 공부를 하는 도중, 풀스택으로 일하는 it 계열에 종사하는 개발자 친구가 리덕스를 배울거면 FLUX 패턴을 공부하라는 조언을 해줬다.
그렇지 않으면 이론 없이 라이브러리 사용법만 배우는 셈이라고 한다!
그래서 정말 많은 자료들을 조사해봤는데 어려운 말 범벅에, 봐도 이해가 안갔기 때문에... 정말 간단하게 정리해보고자 한다!
- MVC 패턴
- 양방향 데이터 흐름
- 리덕스 이전에 리액트에서 데이터를 관리하던 방식
- React가 아니라도 특히 서버측에서 작은 규모 프로젝트를 설계할 때 많이 쓰는 패턴
- FLUX 패턴
- 단방향 데이터 흐름
- 리덕스에서 사용
- 큰 프로젝트를 설계할 때 채택해서 사용
렌더링이 되지 않는 경우
나는 postlist is not function 이라는 에러를 접했다.
CRUD 기능 구현 후 새로고침을 해야 화면이 바뀌었다.(렌더링이 되지 않는다)
-
이는 서버데이터는 올라가는데 리덕스 데이터가 나오지 않는 것을 의미
후보 1 ) Reducers 의 state.list 가 배열이 아닌 경우
후보 2 ) 메인 페이지에서 dispatch 를 잘못 요청했을 경우
==> 나의 경우 후보 1에 해당했다.
나는 map을 돌리기 위한 postlist를 useSelector를 사용해서 불러왔다.
여기서 list는 modules > initialState > list 를 불러온다.
그런데 보다시피 [ ] 배열로 잘 되어있다. 그렇다면 이유가 무엇일까?
이유를 찾기 위해 map으로 돌아왔다.
여기서 나는 postList 를 map으로 뿌려줄때, 중간에 boardList를 거쳤다.
postList 안에 boardList 와 forderList 두 개가 있기 때문이다.
그렇다면 생각해보자.
map을 돌리기 위해서는 '배열' 이어야 한다.
그렇다면 boardList 는 '배열'이다.
그럼 '배열'을 담고 있는 postList는 '객체'가 된다.
그렇게 내가 적었던 list가 잘못되었다는 것을 깨달았다 !
list 를 객체로 만들었고, 그 안에 boardList 라는 배열을 넣었다.
그리고 항상 하던 state.list 가 아니라,
state.list.boardList로 수정했다!
그리고 !
보통 CRUD를 할 때
response.data로 값을 받아오는데, 이번에는 에러가 났다.
바로 위에 console.log(response) 를 찍어보았다.
data가 그저 id 값인 14로 들어오는 모습을 확인할 수 있다.
이것은 action.payload 자리에 14가 들어오는 것과 같다고 볼 수 있다.
action.payload 가 axios의 data로 들어가는 것이다.
response.data = action.payload
그렇기 때문에 그저 response.data가 아닌,
{ id : response.data, ...data } 로 수정했다 !
