혜르미온느

문득 useEffect return과 beforeunload의 실행 순서가 궁금해져서 직접 실험해보았다. useEffect의 개념과 beforeunload 개념을 안다는 조건으로 포스팅을 작성해본다. ✔️ useEffect 관련 링크 https://hyermione.tistory.com/56 [뷰쟁이의 리액트 시작하기] react useEffect로 랜더링 상태 관리하자 [!이시중] 2021년 11월 1일 22:53에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/44 에서 확인할 수 있음. react에서 hook을 도입하면서 제일 좋아진 이점은 바로 함수형 컴포넌트 + 상태 관리가 한 번 hyermione.tistory.com https://hyermione.tistory...

RecoilRoot recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot가 필요하다. 루트 컴포넌트가 RecoilRoot를 넣기에 가장 좋은 장소이다. import React from 'react'; import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil'; function App() { return ( ); }​ Atom 아톰은 상태(state)의 일부를 나타낸다. Atoms는 어느 컴포넌트에서나 읽고 쓸 수 있다. 아톰의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트들이 재 랜더링 되는 결과..

리액트에서는 JSX라는 문법을 사용한다. 이는 구성 요소 랜더링 구성 방법을 제공하는 방식으로 HTML처럼 생겼지만 Javascript의 확장된 문법이라고 말할 수 있다. (리액트에서 jsx 사용이 필수는 아니다.) JSX는 한 번에 하나의 element를 반환하기 때문에 반드시 최상위 하나의 DOM을 추가해줘야한다. 다음 코드에서 최상위는 div로 구성된 마크업이다. import "./styles.css"; export default function App() { return ( Hello CodeSandbox Start editing to see some magic happen! ); } 이 때, h1, h2 두 코드만 랜더링 하고 싶으면 어떻게 해야할까? Hello CodeSandbox Start ..

프론트엔드에서 많이 사용되는 lodash. 몇 년을 들어왔지만 막상 정의하려 하니 뭐라고 정의할지 모르겠는 막막함에 갇혔다.(아무도 정의하라고 한 적 없음) 그래서 정리해보는 로다쉬! 혹은 로대쉬? https://lodash.com/ Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.InstallationIn lodash.com lodash란? 모듈..

scroll을 smoth하게 올라가는 기능이 사파리에서 지원된다고 한다. 관련해서 정리해보려고 한다. ✔️ 스크롤을 부드럽게 움직이기 https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo Window.scrollTo() - Web APIs | MDN Window.scrollTo() scrolls to a particular set of coordinates in the document. developer.mozilla.org 상단 MDN을 참고하여 보면 원하는 스크롤로 움직이기 위해서는 다음과 같은 형식으로 스크롤 위치를 지정하여주면 된다. // window.scrollTo(X, Y); window.scrollTo(0, 1000); windo..

코드를 작성하던 중 갑자기 onClick 처리의 늪에 빠져버렸다. 그래서 알아보는 시간 onClick에 화살표 함수를 사용해야하는 이유. 하단과 같은 형식으로 onClick 이후 화살표함수 없이 함수를 소환하게 된다면 button이 로드 되며, click 여부와 상관없이 해당 함수가 실행된다. // 잘못된 방법 버튼 따라서 onClick 사용의 올바른 방법은 다음과 같다 // 올바른 방법 {함수명()}}>버튼 버튼 onClick으로 변수 넘겨주기 구글에서 보던 중 생각보다 이 부분에 대한 질문을 많이 발견하였다. 결론적으로 말하면 onClick으로 변수를 넘겨주려면 화살표 함수를 사용하여 함수 호출 시 넘겨주어야 정상 동작한다. // 잘못된 방법 버튼 // 올바른 방법 {함수명('인자')}}>버튼 // ..

useMemo는 변수에 사용되고, useCallback은 함수에만 사용되는줄 알았던 나는 useCallback을 사용한 곳에 useMemo를 사용하라는 코멘트를 받게된다...! 뭐야 함수라서 useCallback을 사용했는데, useMemo가 더 잘 어울린다니. 이게 더 다른게 있는거야?!?! 라고 하여 생각한 심화학습- react는 초기 useMemo를 먼저 만들고, 추후에 함수 전용으로 useMemo를 카피한 useCallback을 만든것이기 때문에 useMemo에서도 함수를 사용할 수 있다. 다만, useMemo는 함수를 실행시킨 후, 리턴값을 저장하는 구조이기 때문에 함수 실행 시점 자체를 뒤로 미루는 것을 추가한게 useCallback. 고로 useMemo가 변수 전용은 아니며, 변수/함수 둘 ..

보통 html에서 스타일을 적용하기 위한 class 추가는 다음과 같은 형식으로 사용한다. 리액트에서는 JSX문법을 사용함으로써, class 대신 className을 사용하여 클래스명을 지정해준다. return ; 여러개의 class를 사용할 때에도 그냥 나열하면 쉽다. return ; className는 react에서 조건부로 스타일이 필요한 경우 className에서 손쉽게 사용하도록 도와주는 모듈이다. https://www.npmjs.com/package/classnames classnames A simple utility for conditionally joining classNames together. Latest version: 2.3.1, last published: a year ago. S..

web api에는 history라는 개념이 있다. 이를 MDN에서는 다음과 같이 정의하고 있다. History 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다. 즉, 사용자가 브라우저에서 활동한 세션을 기록하고, 이 기록을 조작할 수 있는 방법을 제공한다는 의미이다. history의 속성과 메서드는 그 어떤 것도 상속하지 않으며, 종류는 다음과 같다. 속성 (property) history.length : 현재 페이지 포함, 세션 기록의 길이 (read only) history.scrollRestoration : 기록 탐색 시, 스크롤 위치 복원 여부 명시 history.state : 스택 최상단의 스테이트 값 반환. popst..

우연히 아티클을 하나 보았는데, useState와 useRef를 비교하는 글이었다. 두 개념이 다른데 비교가 될 수 있는 것인가? 라는 생각에 아티클을 읽던 중 충분히 비교함직한 내용이었고, 이를 기반으로 구글에 검색하여보니 이미 많은 분들이 두 개에 대한 차이를 고민하며 글을 올려두었다. 내가 두 개념이 다르다고 단정지었던 부분은 useRef가 DOM에 관련하여서만 사용되는 줄 알았기 때문인데, 나름대로 공부한 것을 정리해보고자 한다. useState란 먼저 useState란 변수를 동적으로 수정하고, 이에따라 dom을 리랜더링시키기 위하여 사용되는 react hook 중 하나이다. useState는 다음과 같이 상태값(count)과 그 값을 갱신하는 함수(setCount)를 반환하도록 구성되어있다. ..