본문 바로가기

전체 글

 (64)
[React] useEffect의 무한루프 에러 React에서 useEffect 훅은 정말 자주 이용되는 훅 중에 하나이다.그만큼 익숙한 훅이었는데 이번에 사용하다가 무한 반복되는 에러를 발견했다.대표적인 useEffect에서의 무한루프 발생하는 문제는 종속성의 설정이 잘못되었기 때문인데, 최초에 발견했을때 보이는 바로는 문제가 없어보였다. const mapContainerRef = useRef(null); const [positions, setPositions] = useState([]); const api_key = process.env.REACT_APP_API_KEY; const dispatch = useDispatch(); const allLists = useSelector((state) => state.lists.list..
[React] useMemo useMemo Hook useMemo 훅은 컴포넌트의 성능을 최적화하는데 사용된다.함수의 계산 결과를 메모리에 저장하여 불필요한 재계산을 막아 자원의 낭비를 막는다. useMemo 훅의 사용법은 다음과 같다.const memo = useMemo(calValue, deps); 이전에 보았던 useEffect 훅과 동일하게 실행시킬 함수와 종속성이 요구된다.  const lists = useMemo(()=>{ //useEffect에 객체 전달로 인한 리랜더링 방지 return allLists.filter(list => list.user_content_id === 1); }, [allLists]); 이런 식으로 사용할 수 있다.간단히 설명하자면, 'allLists' 라는 변수에 변화가..
[React/Node] 마켓컬리 클론코딩 12 - 메일 인증 메일 인증 기능  마무리한 줄 알았으나 뭔가 찝찝해서 둘러보니 메일 인증 구현한 걸 정리하지 않았다.. 10번 게시물에서 이어지는 글!https://memo-code.tistory.com/45 마켓컬리 클론코딩 10 - 로그인/로그아웃로그인/로그아웃 (로그아웃 버튼 css를 까먹었다..) 처음해보는 작업이라 그래도 좀 오래 걸릴거라 생각했지만, 예상보다 많이 걸린 작업이었다.온갖 에러와 정보 사이에서 어찌저찌 만들기는memo-code.tistory.com    이 부분의 목적은 이메일의 여부를 확인하기 위한 인증 딱 한가지그래서 특별히 프론트엔드 측에서 손볼건 없다. 그냥 코드 확인을 위한 input만 '인증 코드 받기'버튼을 클릭하면 생기도록 하면 된다. {codeInput && ( ..

티스토리툴바