본문 바로가기

분류 전체보기62

useLayoutEffect useRef를 좀 더 공부하다 useLayoutEffect를 보게 되었다. 처음 보는 훅이어서 찾아보게 되었고, 이 내용을 정리해보려 한다. ✔️ useEffect와 useLayoutEffect의 차이 useLayoutEffect는 useEffect와 구문이 똑같기 때문에 다른 점이 무엇인지 구분하는 것이 중요하다. 가장 큰 차이는 useEffect는 비동기적으로, useLayoutEffect는 동기적 실행된다는 것이 다르다. useEffect : 아래 그림과 같이 컴포넌트들이 render와 paint 된 후 비동기적으로 실행된다. paint 된 후 실행되어 리렌더링 되기 때문에 사용자는 화면의 깜빡임을 볼 수 있다. useLayoutEffect : useLayoutEffect는 화면에 paint가 되기.. 2021. 11. 24.
useRef & scrollIntoView 헤더를 클릭했을 때 해당 컴포넌트로 이동하는 것을 구현하고 싶었다. 그래서 useRef와 scrollIntoView 사용하여 구현하였다. 설명보다는 간단히 기록만 하고 넘어가려 한다. ✔️ useRef 특정 DOM을 선택해야 할 때, vanilla JS에서는 getElementById, querySelector 같은 DOM Selector를 사용했다면, 리액트의 함수형 컴포넌트에서는 useRef를 사용한다. 그리고 useRef로 관리하는 변수는 값이 변경되어도 컴포넌트를 리렌더링 시키지 않는다는 특징이 있다. ✔️ element.scrollIntoView() 특정 엘리먼트가 있는 위치로 스크롤을 이동시킬 수 있다. 아래와 같이 세 가지 방법으로 사용할 수 있는데 보통 option 객체를 넣어서 사용한다... 2021. 11. 20.
[17NOV, 2021] TIL TIL은 아직 블로그에 쓰는 게 편한 것 같다 힣🌝 ✔️ react-router-dom Switch 오류 포트폴리오로 사용할 웹을 만들어 놓고 싶어서 오늘 레이아웃과 라우터를 나누고 있었는데, Switch 가 안돼서 찾아보았더니 react-router-dom이 버전 6으로 업그레이드되면서 바뀐 것이었다. Switch는 Routes로 바뀌고 component는 element로 바뀌어서 수정해주니 되었다. 공식문서 import { Route, Routes } from "react-router-dom"; import Main from "components/Main"; import Project from "components/Project"; function App() { return ( ); } ✔️ wire.. 2021. 11. 18.
[14NOV, 2021] TIL 돌아오는 주부터는 TIL을 github에 작성할까 한다..! TIL 레포를 만들어놓고 안 쓰고 있었던 걸 발견했다 :) 그래도 자세히 기록해야 할 것은 블로그에 계속하고 불편하면 블로그로 돌아오는 것으로..! ✔️ 컴퓨터 개론 예전에 CS50강의를 들었는데 짧아서 아쉬웠었다. 그래서 이런 내용도 더 공부하고 싶어 외국 강의를 찾아들었었다. 하지만 자막 없는 영어로 들으니 강의 한 번들을 때마다 에너지 소비가 2배인 느낌이었다. 그러다 한국 대학 강의들을 볼 수 있는 곳을 찾게 되어서 보기 시작했다! 실제로 진행하는 대학 수업이고, 21년 강의도 많아서 좋고, 원하는 강의를 찾아 들을 수 있어서 좋다. 지금은 컴퓨터 개론을 듣고 있고, 다 들으면 예전부터 관심 있었던 인공지능에 대해서 한 번 들어볼 예정이.. 2021. 11. 15.

티스토리툴바