📍 DEV12 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. Random background Image 페이지에 백그라운드 이미지가 랜덤으로 보이게 해 보았다. 대화를 하다 아이디어를 얻었고 좋은 것 같아서 만들어보았다. 새로고침 할 때마다 이미지가 바뀌며, 시간이 지나면 안내 메세지는 사라진다. (아래의 gif는 블로그 포스팅을 위해 용량을 줄여 화질이 낮다.) 그럼 오늘은 간단히 어떻게 만들었나 정리해보겠다 🎵 ✔️ Math 메서드를 이용해 랜덤 숫자 반환 우선 이미지 소스들을 배열로 모아 놓았기에 이 중에서 랜덤으로 이미지들을 선택해야했다. 그렇기에 먼저 랜덤 숫자를 구하기 위해 Math.random과 Math.floor를 사용했다. * Math.random() 함수는 0 이상 1 미만의 구간에서 근사적으로 균일한 부동소숫점 의사 난수를 반환하며, 이 값은 사용자가 원하는 범위로 변형할 수 있다. *.. 2021. 10. 9. React i18n-next를 이용한 다국어 처리 국제화할 수 있는 react i18n-next (i18next is a very popular internationalization framework for browser or any other javascript environment)를 다국어 처리를 위해 사용해보았다. 공식문서가 잘 되어 있어서 큰 어려움 없이 사용할 수 있었다. 그래서 오늘은 i18n-next에서 내가 기억하고 싶었던 부분을 정리해보겠다. ✔️ 폴더 분리 가장 먼저 폴더를 분리해줘야 한다. 언어는 locales폴더명을 사용하기에 src -> locales -> en, kr로 폴더를 분리해 해당 언어에 맞는 json 파일을 만들었다. ✔️ init options 각 언어의 json 파일이 준비되고 init을 해주면 된다. init 옵.. 2021. 9. 16. 이전 1 2 3 다음
