반응형 WEB4 리액트 ref react ref 사용법 예제 예시 No Rendering 리액트 ref, react ref 사용법 특정 DOM 선택하기 - ref는 reference(참조)의 준말 current라는 프로퍼티를 가진 객체이며, DOM에 직접적인 접근이 가능 - focus, 텍스트 선택영역, 미디어 재생, 애니메이션 직접 실행 등 LifeCycle상에서 componentDidMount - 라이프 사이클상에서 componentDidMount 이전에는 null이 current 프로퍼티에 담긴다 왜 DOM API가 아닌 ref를 사용하는가? - ref는 특정 DOM 요소를 가져올 때 더 신뢰 - 라이프사이클에 따라 DOM 요소를 가져오지 못하는 경우가 있다 함수형 컴포넌트에서는 useRef를 사용 - createRef를 함수형에서 사용하면 ref 값이 초기화 되어 원하는 값을 얻지 못.. 2023. 3. 21. 버블링 막기 event.stopPropagation() 이벤트 버블링 막기, event.stopPropagation() 이벤트 버블링 예시 전체 영역에 click 이벤트가 있고, 겹쳐진 영역에도 click 이벤트가 있는 상황이다. 이러한 상황에서 겹쳐진 영역을 클릭하면 겹쳐진 영역에 이벤트가 발생하고 나서 전체 영역의 이벤트도 발생한다. 이러한 사항을 이벤트 버블링이라고 한다. 우리는 겹쳐진 영역의 이벤트만 실행하고 싶다면 event.stopPropagatioin() 이라는 함수를 사용해야 한다. event.stopPropagatioin()는 현재 발생한 이벤트 이후의 상위 엘리먼트들의 이벤트 전파를 중단시킨다. 2023. 3. 21. 리액트 스크롤 상단으로 위치 시키기 리액트 라우터 리액트 스크롤 상단으로 위치 시키기, 리액트 라우터 😨 스크롤의 위치가?! 리액트 라우터를 사용하는 경우 이전 페이지에서 스크롤이 내려가 있는 상태에서 다른페이지를 불러 왔을 때, 스크롤의 위치가 이전 페이지와 동일한 현상을 경험 할 수 있다. 문서에서 scroll-restoration이라고 소개한 코드가 있다. import { useEffect } from "react"; import { useLocation } from "react-router-dom"; export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return.. 2023. 3. 15. JavaScript 기초 ✍️ 일을 그만두고 오랜만에 보는 것 같다. 반갑기도 하고, 밉기도 하다. 데이터 타입 8가지, 그리고 8가지 중 원시타입은 Boolean, Number, String, Null, Undefined 참조 타입은 Function, Array, Object 이다. 원시타입은 메모리에 값을 그대로 저장하고 데이터를 복사할 경우 데이터의 값이 복사 되며, 참조 타입은 메모리에 값을 주소로 저장하고 복사할 경우 데이터의 주소를 복사한다. 데이터 타입 8가지 증감 연산자 let num = 10; console.log(++num); // num + 1 후 num 출력 console.log(--num); // num - 1 후 num 출력 console.log(num++); // num 출력 후 num + 1 cons.. 2021. 7. 8. 이전 1 다음 반응형
