반응형 프로젝트/코드스테이츠 - 4주프로젝트28 순수함수의 중요성/position속성을 써야할때와 안될때 400줄 가까이되는 수많은 코드들에서 함수가 순수함수가 아니라면 리턴값이 어떤값의 영향을 받는지 알기가 어렵다. 오늘 몸소 깨닫고 나서야 예전에 어디선가 함수는 순수함수로 작성해라 라는 글을 보았던게 생각났다. 이제서야 퍼즐이 좀 맞춰지는것같다. 리코일, 리덕스 왜 다 모두 순수함수임을 강조하는지. 아마 아무도 이해하지못하겠지만 그래도 설명을 해보겠다. 클릭시 : 마우스로 지도클릭->pickpoint State 변경-> 관광지배열생성 -> 지도클릭한곳의 주소값 api통해 획득 검색버튼클릭시 : 검색어와 관련된 곳을 지도의 중심좌표A로 바꾸는 함수 -> pickpoint state를 A로 바꾼다. -> 클릭시 발생하는 로직 진행 이러한 생각으로 현재위치 버튼을 눌렀을때, 지도의 중심좌표가 현재위치가 되도록.. 2021. 12. 8. 댓글버그수정, recoil로 비동기state사용 1. 댓글버그 수정 db의 내용을 미리 더미데이터로 만들어놓았다. 수정취소를 버튼을 누르면 다음과 같이 더미데이터의 값으로 변경되었다. 원인은 역시 이번에도 useState의 비동기로인한 렌더링순서 짬뽕이었다. 아래와 같이 렌더링순서를 꽉!! 잡아주니 모든것이 원래대로 돌아왔다. 2. 리코일로 비동기처리 2주프로젝트때 리덕스를 사용했음에도 리덕스 대신 리코일을 선택한이유는 비동기사용시 미들웨어를 추가학습할필요가 없어서였다. 프로젝트초기에 몇번시도해보았지만 너무어렵고 프로젝트는 공부하는때가 아니라 빨리 만들어야하는 때라고 생각해 우선 제껴두고 useEffect로 원래로 하던것처럼 만들었다. 오늘 시간이 좀 남아서 '카카오API를 통해 유저의 주소받는 axios'를 recoil의 selector함수로 만들었.. 2021. 12. 7. 댓글작성시 엔터로 작성하면 두번째 렌더링인 '\n'이 작성되는 버그 (+14,+138 버튼을 눌러서 댓글을 작성하면 문제가 안생기는데 엔터버튼으로 댓글 작성시 아래 콘솔창처럼 댓글이 두번찍히면서 자꾸 빈 댓글이 렌더링되었다. 어제는 useEffect의 의존성배열에 이값 저값을 넣어보다가 하루가 갔다. setState를 sideEffect로부터 보호하면 해결될것이라 생각했지만 해결되지 않았다. 계속 고민하다가 프사,닉네임등은 다 배제하고 댓글만 map으로 찍어보았다. 두 코드가 렌더링된 화면을 유심히 관찰하다가 '유레카' 순간이 왔다. 당연한것인데, 난 당연한것을 그때서야 깨달은것이다... 컴퍼넌트에 props로 '\n'를 전달할때는 '\n'가 고스란히 전달되어 렌더링되는 것이었다! 아래코드를 삽입해주니 해결되었다. if (comment.text === "\n" ) return null; .. 2021. 12. 5. 오늘의 에러 : Too many re-renders. React limits the number of renders to prevent an infinite loop. ( +13,+137 Too many re-renders. React limits the number of renders to prevent an infinite loop. react의 한계에 도달할 정도로 리렌더링이 너무 많이 되었다는 에러이다. 주로 잘못된 setState 사용으로 발생한다. React 컴포넌트 내에서는 항상 조건문이나 이벤트 핸들러 안에서만 setState를 사용해야 한다. 만약 setState를 컴포넌트의 바디에서 직접 호출하면 컴포넌트가 렌더링될 때마다 state가 변경되어 무한 루프에 빠질 수 있다. 리액트 컴포넌트 리렌더링 조건 too many re-renders의 이유를 알기 위해서는 리액트가 컴포넌트를 언제 리렌더링 시키는지 알아야 한다. 1. props 변화 2. state 변화 3. 부모요.. 2021. 12. 4. 이전 1 2 3 4 5 6 7 다음 반응형
