본문 바로가기
  • 하고 싶은 일을 하자

frontend3

[React Hook 공식 문서 읽기] useEffect (Race Condtions 해결 방법) React 개발을 하는데 있어 useEffect 는 필수이다. 정말 많이 쓴다. 그런데 공식 문서를 읽다보니 몰랐던 것을 알게되어 정리 해보겠다. 먼저 useEffect 에 대한 정의부터 예상과 달랐다. 나는 컴포넌트가 마운트/언마운트 되었을 때 실행할 로직을 정의하는 Hook 이다 라고 생각하고 있었는데 공식 문서의 정의에는 "외부 시스템을 사용하는 컴포넌트를 동기화하는 Hook 이다." 라고 설명하고 있다. 외부 시스템은 무엇이고, 동기화는 무엇일까? External System external system 이란 React 로 control 하지 않는 코드를 의미한다. 이에 대한 예시로 setInterval(), clearInterval(), window.addEventListener(), windo.. 2023. 11. 22.
[React Hook 공식 문서 읽기] useCallback useCallback 은 함수를 cache 로 저장 해서 re-render 할 때 사용할 수 있도록 하는 React Hook 이다. 아 슈밤 글 다썼는데 코드로 테스트하다가 다 날라갔다... ㅠㅠ loop 3중첩으로 1000*1000*1000 으로 돌리니까 브라우저 바로 뻑나네............. ProductPage가 리렌더링 되면 handleSubmit 함수는 새롭게 생성될까? 아니면 동일한 로직의 함수이니 알아서 이전 렌더링 때 만든 handleSubmit 함수를 그대로 사용할까? 정답은 함수를 새롭게 생성한다. 자바스크립트에서 function () {} 혹은 () => {} 인 경우에는 함수를 새로 생성하기 때문이다. 이런식으로 함수를 useCallback 으로 감싸고 dependency ar.. 2023. 11. 9.
AWS 한국 사용자 모임 - 프론트엔드 Next.js 이미지 최적화 소모임 후기 AWS 한국 사용자 모임에서 프론트엔드 소모임이 열린다고 하여 다녀왔다. AWS 한국 사용자 모임 링크 : https://www.meetup.com/awskrug/ AWSKRUG - AWS한국사용자모임 (서울, 한국(대한민국)) 본 그룹은 AWS한국사용자모임(AWSKRUG)의 정기 모임 및 소모임 운영 사이트로서 최신 활동 소식 및 행사를 올려드릴 예정입니다. 더 자세한 것은 https://facebook.com/groups/awskrug 를 참고하세요. www.meetup.com AWS이지만 인프라나 백엔드뿐만 아니라 프론트엔드, 스타트업 등 다양한 주제의 세미나가 열린다. https://www.meetup.com/awskrug/events/292866390 Login to Meetup | Meetup.. 2023. 5. 14.