WEB/기초19 [WEB] React, Redux - 2. combineReducer, middleware, useDispatch, thunk... 반갑습니다. 이제 강의도 벌써 4주차 강의를 듣고있습니다. 마지막주라서 그런지.. 내용도 많아지고 복습하고, redux 문서를 다시 다 읽어야하기에 포스팅 시간이 오래 걸렸습니다. 그래도 여기에 쓰면서 생각이 정리되는것도 있어서 굉장히 좋습니다^^ combineReducer 여러개의 리듀서를 하나의 스토어에서 다 실행합시다. 지난번에는 Reducer가 한개밖에 없었습니다. 그래서 createStore(reducer) 을 하면 그냥 됐었죠. 하지만, Reducer 하나에 모든 state를 끼워넣고 매번 불필요한 복사, 여러 조건이 들어간 수정. 이런식으로 해야할까요? 아닙니다. reducer도 관심사에 맞게 여러개의 reducer로 분리할 수 있습니다. 여러개로 분리를 했다고 합시다. 그러면 이제 stor.. 2021. 7. 31. [WEB] React, useEffect 짧게. 반갑습니다. 빠르게 하겠습니다. Hook중에 useEffect가 있습니다. class형 컴포넌트의 라이프사이클에서 3가지를 합친것입니다. componentDidUpdate, componentDidMount, componentWillUnmount를 합친것입니다. 이걸 한개의 Hook에서 사용한다고? 오우 개꿀! 하지만 사용방법을 알아야겠죠? 네~ 알아보겠습니다 (요약만 보실분은 맨 아래만 보시면 됩니다) 기본 모양 useEffect(effect, deps); 이런 형태를 가지고 있습니다. useEffect는 side effect를 하게 해주는 훅 이라고 생각하시면 좋습니다. side effect는 여러가지가 될 수 있습니다. 값 올려주기, 비동기처리 함수 불러주기 등등.. 여러가지가 있을 수 있습니다. 그.. 2021. 7. 30. [WEB] React, Redux - 1 https://blog.naver.com/rbals0445/222444529706 [WEB] React, Flux Architecture 아!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 이번에 강의 들으면서 Redux 배웠는데, 굉장히 깔끔한것 같더라구요. ... blog.naver.com 지난시간에 이어서, Redux 한편 뽑겠습니다 ^^ npm install redux; npm install react-redux; 이렇게 설치를 합시다!! Redux (상태 관리 컨테이너) 이녀석 죽입니다.. react-native로 뭘 만들고 있는데.. data를 맨날 route로 넘기니까 코드 짜는것도 불편하고 너무 지저분 했습니다. 근데 이걸 미리 알았더라면.. 정말 아름다운 구조입니다. 한번 똥을 싸.. 2021. 7. 26. [WEB] React, Flux Architecture 아!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 이번에 강의 들으면서 Redux 배웠는데, 굉장히 깔끔한것 같더라구요. 일단 그에 앞서서 Flux 에 대해서 알아보겠습니다. Facebook을 만들때 여기도 디자인패턴이 있었겠죠? MVC, MVVM 등등.. 있겠지만, 페이스북은 MVC의 단점에 대해서 알게 되었습니다. 중앙화되어있지 않은 변경과, race condition, cascading update등등.. 여러 문제가 발생했습니다. MVC에서 V는 model,controller랑 둘다 연락합니다. 이런거대신에 Unidirectional Flow를 생각해냈습니다. 폭포수가 양방향으로 흐르진 않잖아요? 한국어로하면 유량 아키텍처 이런느낌인데;; 쩝 이걸 어케 알아먹습니까? 단방향으로.. 2021. 7. 25. [WEB] React, Uncontrolled Form, useRef() , react hook multiple useRefs 지난번엔 Controlled Form을 봤습니다. 이건 React에 의해서 관리되고, state와 form의 value가 항상 일치하는 장점이 있지만, 구현하기가 좀 더 복잡하고, re-render를 1글자마다 하므로 퍼포먼스에 좋지 않았습니다. 물론! 좀 더 정교한 작업을 할 수 있다는 장점이 있긴 합니다. 리액트에서는 Controlled form을 장려합니다. 이번 시간에는 그래도 state에 종속되지않고 DOM에 직접 접근해서 값을 가져오고싶다! ex)file API 등등.. 이때 사용하는 Uncontrolled Form에 대해서 알아보겠습니다. UnControlled Form 1. 간단하게 만들 수 있다. (대신에 정교한 기능들은 사용하기 어렵다.) state를 바꾸지 않는다. 2. React에 .. 2021. 7. 23. [WEB] React, Controlled Form, form 속성들, react hook multiple states. 강의도 슬슬 3주차입니다. 기초적인 것들은 앞에서 많이 다뤘고, 이제는 모두 다 포스팅하기에는 너무 길어서 제가 기억하고 싶은것만 쓰겠습니다. 강의를 듣고 복습하면서, 한번에 하지 못했던 것들입니다. Controlled Form -> React의 state와 Form의 input value를 일치시키는 것을 말합니다. 공식적 설명으로는, React에 의해서 Input form의 value가 제어되는 것을 말합니다. onChange event를 이용해서 일치시킬 수 있습니다. 이렇게 생긴것을 만드는 과정에서 알게된 것 들을 적겠습니다. Form을 만들기 위해 기본 react 엘리먼트인 input 이런것 대신에 'reactstrap'의 Form을 썼습니다. reactstrap의 { Form.. 2021. 7. 22. [WEB] React, SPA Website장단점 ,SEO(Search Engine Optimization) 반갑습니다. 지난번에 SPA에 대해서 글을 쓴 적이 있었는데요. 그 부분에 대해서 좀 더 이어쓰고자 합니다. SPA Website는 MPA에 비해서 부분 렌더링을 통해, 동적 페이지를 구성할때 유리하다고 했습니다. 아! 그리고 Papago 또한 react로 되어있었습니다. 집에 가면서 왜 다른거 말고, 파파고는 React일까 생각해봤습니다. 이곳은 한글 -> 영어 번역을 해줍니다. 이 과정을 할때마다 페이지를 다시 새로고침하면 어떻겠나요? 으악!! 보기도싫어.. 하지만 수정이 일어나는 부분만 렌더링을 해준다면? 굉장히 깔끔하겠죠? 이것이야 말로 동적인 페이지라서 SPA컨셉이 잘 어울리는 것 같습니다. 또한 인공지능 처리도 서버에서 할텐데, 서버가 바빠 죽겠는데 client에서 대부분을 처리.. 2021. 7. 20. [WEB] reactstrap, Breadcrumb 다르게 나오는 이유(version 차이) bootstrap version 극대노의 상황이지만.. 현자의 마음으로 화를 가라앉히고 포스팅 합니다. 하.. 강의 복습을 하는데 몇시간동안 아무리 코드를 고쳐도, UI가 다르길래 원인을 못찾았는데.. bootstrap의 버전이 문제였습니다. reactstrap의 버전이 같더라도 bootstrap의 버전이 다르면 생긴게 다르게 나옵니다.. v 4.0.0 이상 이렇게 나와야 정상인데 V.5.0.0이상 자꾸 이렇게 어디 하자가 있는애처럼 나왔습니다. 원인은 package.json에 있는 bootstrap 버전 차이였습니다. 설마설마 했는데, 이 차이때문에 다르게 나왔습니다. 5.0 이상부터 이런 모양 4.0이상은 이런모양.. 결론 : 패키지의 버전에따른 css 모양도 확인해보자. 몇시간이면 싸게 먹힌걸지도.. .. 2021. 7. 19. [Web] React, React Router, navigation, react-router-dom 오늘은 React Router에 대해서 알아보겠습니다. 이건 강의를 들은지 한참 지났는데, 자꾸 뭘 찾고 하다보니까 포스팅이 너무 늦었습니다. 빨리 진도를 나가야 하는데요. 산더미 같은데 할게.. Navbar에서 메뉴를 눌렀을때 다른 페이지로 이동을 해야하는데요. 이 navigate 기능을 react-router-dom package를 통해서 할 수 있답니다. npm install react-router-dom 을 이용하셔야 합니다. React Router 1. navigational Component의 집합입니다. -> view들간의 navigation을 가능하게 해줍니다. 2. Router Component, route matching Component, navigation Component로.. 2021. 7. 18. [Web] Class Component vs Functional Component, 구조분해할당(Destructuring Assignment) 드디어 쓰네요... 클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해서 쓰겠습니다. 결론부터 말씀드리겠습니다. 함수형 컴포넌트가 더 좋습니다. (간결성, 속도,Class component의 lifecylce methods를 거의 전부 다 사용 가능) 저 class 열심히 해보려고 했는데, 오늘부터 손절 합니다. 제길슨... 혼자 차이점들을 조사하면서, 아 지금까지 클래스형 배웠는데 .. 제발 클래스형의 독특한 장점 있어라!! 했지만.. 쩝... 여기까지 1. Class Component 특징 : 1.Constructor가 있다. 여기서 state를 선언할 수 있다. 2. render() 함수가 필요하다. extends 3. Component를 해야한다. 장점 : lifecycle method를 통해서 좀.. 2021. 7. 16. 이전 1 2 다음 728x90
