본문 바로가기
728x90

풀스택/React16

react-springboot 로그인 및 시간(페이지 새로고침) 로그인할때는 로컬 스토리지 형식 출퇴근 시간 구할때도, 로컬 스토리지로 시간을 저장하지않고, 조건(출근버튼이 눌러졌는지, 출근시간이 들어왔는지 등)을 저장해서 쓴다.이유는 새로고침시 store에 들어가있는 값들이 모두 초기화된다. db에서 값을 가져오거나, 로컬 스토리지를 사용 상황에 맞게 쓴다. 형식을 잘 따져서 미리 어떤 구조로 만들고, 값을 어떻게 들고올지 확실히 하고 코딩을 하는게 훨씬 효율적이다. render는 const안의 값들이 바뀐게 있을때 돌아간다.통신은 최소로 하는게 좋다.didmount 안에 setinterval을 넣어두면 did는 한번interval은 안에서 계속돈다. smartchecker의 header부분은 다른 곳과 달리 export형식이 compose인데 이형식은 따로 Tim.. 2019. 5. 24.
eclipse react(redux)간 통신 예제 - db에서 react에 값 가져오기 통신하기전 가장 먼저 해야될 것은 로컬에서 먼저 react3000말고 서버단에서 결과가 나오면 진행.또한 서버 켜기... 그러면 일단 백엔드 단은 다했다치고, - 저번에 정리해둔거 마무리하기 앞서 action 설정을 너무 대충해서 확실히 한번 정리하고 가자. 1. 프론트(react) 단에서 일단 내가 값을 가져올 moudle을 정하는데 나같은 경우는 Header로 들고왔다.2. action을 쓰기 위해서는 당근빠따 src/moulde/index에서 export는 먼저해준다. 또한 api를 받아오기 위해 api관련 export를 해야 되는데 이거슨 src/lib에서 설정한다. 참고해서 형식에 맞춰 적고, 가져와야 될 값 및 보내야 할 값을 확실히 하자.3. 대망의 moudle인 Header에서 이제보니 m.. 2019. 5. 22.
react 오늘 한것 정리(redux store 저장, redux구조,redux action) react 생명주기 will render did순서 didmount가 한번돈다고해도 interval로 안에서 통신은 반복됨. - smartchecker 의 트리를 봤을때 action 및 설정들container들의 랜더링 및 돌아가도록할때 src/pages에서 추가해준다.action에 대한 api는 src/libsrc/store/moudle/index 에서 export 서비스를 설정해준다. - store에 값을 저장하고 확인안될경우 ex) improt * as ~Action 할때 쓰인다. store 저장할때 예시HeaderTimeContainer를 예로 들면 import들은 각각에 따라 찾아 넣으면 되고, url도 잘 지정해준다. import React, { Component } from "react";i.. 2019. 5. 22.
redux store에 값 저장 및 다른컴포넌트에서 쓰기 ex) commute 1. store - state(상태 값)을 총괄하는 부분이다. 컴포넌트들은 이 스토어에 액션을 dispatch하고 subscribe하며 상태를 반영할 수 있다. 2. action - 스토어에 대한 값을 변경하기 위해 신호를 주는것ex) 이벤트가 발생했다 값을변화시켜주라action은 객체이다. type를 가진다. 3. reducers 액션을 받아서 스토어의 값을 처리하는 작업을 함.스토어는 저장소 역할만 할 뿐 아무것도 하지않음. 리듀서가 스토어의 값을 변화시킴 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676.. 2019. 5. 21.