전체 글 (75) 썸네일형 리스트형 [html] 인피니트 스크롤링 - hasMorePost와 같은 state를 만들어서 스크롤링이 마지막부분에 닿았을 때 데이터가 더 있거나 없거나 하는 것을 구분함 - useEffect에 window.addEventListener의 경우 return을 해줘서 이벤트를 없애줘야 메모리에 쌓이지 않음 - 스크롤시 알아야 할 변수 * scrollY : 현재 스크롤 위치 * clientHeight : 화면에서 보이는 스크롤의 길이 * scrollHeight : 스크롤 맨 위부터 아래까지의 총 길이 * 스크롤을 끝까지 내렸을 경우 "scrollY + clientHeight = scrollHeight" - 가장 아래로 내렸을 경우 데이터를 불러오는 것이 아니라 그 전에 불러와야 사용자 경험에 좋음 - 스크롤링의 경우 동작이 연속으로 일어나기 때문.. [React] Form에서 데이터 전송 후 input 초기화 - Form을 submit 한 후 초기화를 submit안에서 해주면 서버에서 오류시 글이 전달되지 않았으나 사용자의 글이 지워지기 때문에 문제가 될 소지가 있음 - useEffect에서 redux에서 post가 성공하였을때 실행되는 변수( signInDone과 같은)를 받아 데이터 전송 성공시 초기화가 되도록 해야 함 [Redux] 비동기 처리 - 비동기 처리의 경우 서버에서 데이터를 받아오는 것이기 때문에 성공/실패 경우를 고려해야 함 * 로그인의 경우 로그인 / 로그인 중 / 로그아웃 중 이러한 액션이 추가로 필요함 - request 액션을 만들고 loading state를 추가하여 loading 효과를 넣으면 사용자 경험이 좋음 - saga에서 success와 failure 같은 경우는 비동기 호출 시 액션을 put으로 생성하기에 reducer에서 작성하지 않아도 됨 - 로그인 시뮬레이션 예 1. 로그인 버튼 클릭 2. 로그인 요청 액션 dispatch 3. saga의 watchSignin이 실행되고 reducer의 로그인 요청 실행 4. saga의 로그인 함수 실행 5. 로그인 요청에서 받아온 action이 로그인 함수의 파라미터로 전달.. 이전 1 2 3 4 ··· 25 다음