| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
- 비전공자
- react
- 모던 자바스크립트 딥 다이브
- 코딩테스트
- Github
- 이벤트
- 프로그래머스
- 입문
- 프론트엔드
- MegabyteSchool
- 자료구조
- 내일배움카드
- useRef
- 알고리즘
- 메가바이트스쿨
- CSS
- 리액트
- 국비지원교육
- styled-components
- 개발자취업부트캠프
- 자바스크립트
- 개발 공부
- next.js
- JavaScript
- GIT
- 모던 딥 다이브 자바스크립트
- 패스트캠퍼스
- 공식문서
- useMemo
- TypeScript
- Today
- Total
목록useRef (2)
개발 기록 남기기✍️
🤷🏻♀️ 문제 상황 React와 REST API를 활용하여 지난 과제 때 바닐라 JS로 만들었던 투두리스트를 다시 만들고 있는 중이다. useEffect를 사용하여 todoItem의 done 속성이 바뀔 때마다 useEffect를 실행하고 API 통신을 하도록 코드를 작성했다. 근데 useEffect의 특성 상, 컴포넌트가 처음 렌더링 될 때 state가 세팅되므로 state가 변화되었다고 감지해 종속 배열에 상관없이 초기 렌더링 때 useEffect가 항상 실행된다. 그래서 초기 렌더링 떄 useEffect가 실행되고, 수정할 todoItem이 세팅되지 않은 상태이기 때문에 API 요청에 빈 데이터가 들어가게 되고, 이로 인해 Network Error가 발생하게 되었다. 💻 해결책 - useRef를 ..
useRef... 수업 때 들었지만 어렴풋이만 알아듣고 아직 완전히 이해하지 못해서 이참에 뿌셔보려고 한다!! 정신차리고 레츠고🏃♀️ useRef는 특정한 요소의 id 처럼 활용할 수 있을 뿐만 아니라, 변수를 만드는 것에도 사용할 수 있는 리액트 훅(hook)이다. useRef의 역할과, 어떻게 사용할 수 있는지를 알아보자. 💻 첫 번째) 특정 DOM 선택 JavaScript에서는 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector같은 DOM Selector 함수를 사용해서 DOM 을 선택한다. 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 있다. 상황 예시) 특정 요소의 크기 가져오기 스크롤바의 위치를 가져오거나 설정하기 특정 요..