lyla-bae 님의 블로그

store와 create만 기억하면 됨https://zustand-demo.pmnd.rs/ Zustand zustand-demo.pmnd.rsZustand는 크기가 작아서 가볍고 빠르며 확장성이 좋은 전역 상태 관리 라이브러리다. 이름부터 뭔가 특이한데, 독일어로 상태라는 뜻이라고 한다. 발음은 쭈스탄트 정도로 읽으면 된다 import { create } from 'zustand'export const use이름Store = create((set, get) => { //set은 상태 업데이트할 때, get은 현재 상태 가져올 때 씀 return { 상태: 초깃값, 액션: 함수 }}) Zustand에서는 create라는 함수로 store를 만든다. 그리고 이 store를 기반으로 동작한다.S..

“Make waiting times tolerable.Provide feedback during delays. UX에서 중요한 것은 기다림을 없애는 것이 아니라, 기다림을 경험하게 만드는 방식이다. 디자인을 공부할때 UX는 기획자와 디자이너만의 영역이라 생각했는데 생각해보면 개발자도 충분히 기여할수있는 방법이 많다 (보고있나 개발자여) 그 방법 중 하나가 바로 성능최적화이다그래서 개발자에 있어서 아주~~~~!!!! 중요한 역량이다리액트에서 성능최적화를 하는 방법도 아주아주 많지만 가장 많이 쓰는 방법 두가지를 디깅해보았다! 코드스플리팅하나의 거대한 JS 번들을 여러 조각으로 나누고, 필요한 코드만 로드하는 전략을 말한다.React와 같은 SPA 구조 라이브러리/프레임워크에서는보통 모든 페이지와 기능을 하..

오늘은 마지막 리액트수업이다!19.2버전 신기술도 배우고 띠용하는 시간이 많았는데 뭐하나 주제를 잡기에 애매해서간단히 마지막 실습문제와 기술면접 질문만 정리해보는 시간으로 가졌다!정말 공부할게 너무많타,,,wow1️⃣ 실전 최적화 연습해보기 try-first문제점을 파악하고, 불필요한 렌더링을 막아주세요.// 이 코드는 최적화가 잘 안 된 경우입니다. alert('hi')} />위 코드의 문제점은 아래와 같습니다.ChildComponent가 React.memo 로 감싸져 있어도 무조건 리렌더링 됩니다.매번 새로운 객체/함수라서 props 가 바뀐 것으로 간주합니다.그럼 위 코드의 문제들을 해결하여 불필요한 리렌더링을 막으려면 어떻게 해야할까요? 정답 : useMemo, useCallback으로 메모제이션..

기나긴 2주간의 방학이 끝나고 다시 수업이 재개되었다.. 그리고 오랜만의 디깅타임~!!!오늘은 가상돔과 메모이제이션으로 최적화할 수 있는 방법들을 두루 배웠다.역시나 면접 단골 질문으로 나오는 가상돔에 대해서 딥하게 알게 되었는데 파면 팔수록 뭐가 이렇게 많은지머리는 아프지만 하나씩 천천히 정리해보자 가상돔(Virtual DOM)쉽게 말해 찐 DOM의 복사본이라 생각하면 쉽다. 메모리에 저장되어 있으며 찐이 아니기 때문에UI에 접근할 수 있는 API(getElementById, querySelector 같은 친구들)이 없다. 유튜브 별코딩님이 잘 설명해주고 있어서 가져왔다. 한번 보는걸 츄라이~https://www.youtube.com/watch?v=gc-kXt0tjTM DOM 복습해보기가상돔을 이해..

오늘 useEffect 수업을 듣던중 비동기함수에 대한 설명이 나왔다.useEffect(async () => { const data = await fetchUser(userId); setUser(data);}, [userId]);useEffect에서 async를 쓰면 Promise를 반환하니까 안된다는것이다.속으로 난 왜 Promise는 안되냐...? 또 혼란스러웠다. 그냥 그러라고 있는거니까 외워야하나 싶기도하고그러니까 여기선 useEffect는 무엇을 return 하느냐가 중요한 포인트였다. useEffect는 사이드 이펙트를 위해 존재한다.먼저 useEffect가 왜 존재하는지부터 아는게 좋을거같다.react에서 컴포넌트의 주 목적은 UI를 렌더링한다는것은 다 알것이다.그러나 실제 개발을 하다..

오늘수업도 중요한 내용들을 배웠지만 나의 뇌용량은 터져나갔다덕분에 아주 기초적인 props 개념도 혼란이 오기 시작,,,,,,,,,,ㅎ그래도 흔들리지말고 하나부터 차근차근 개념을 쌓아나가보자 한다 기본적으로 Props는 객체이다.Props로 부모에서 자식에게 정보를 전달 할수 있다는건 알고있다.항상 {props.키값} 이런식으로 속성에 접근하는데 props 자체가 객체라는걸 눈치채지 못하고있었다.(여기서 알아차렸어야하는데 바보같은 나는 한참멀었다ㅠ)// props가 객체였던 몰랐던 나는 그걸 고대로 렌더링하려고 했다.function Child(props) { return 나는 {props}의 아들입니다!; // 이렇게 쓰면 당연히 아무것도 안나옴}// props를 확인해보고 싶은거라면 객체확인하듯이 속..

useState의 진짜목적usestate는 변수가 아니다. 당연한 사실이고 잘알고있었는데 막상 쓰다보면 또 변수처럼 생각하고 있는 나자신을 발견한다;;명심하자 state가 존재하는 이유는 값을 저장,수정,전달하는 것이 아닌 리렌더링을 하기 위함이다.값이 바뀔때 리렌더링을 할수있게 해주는 트리거 역할을 해주는것이다. useState는 즉시 업데이트 되지않는다.import { useState } from 'react';export default function Counter() { const [number, setNumber] = useState(0); return ( {number} { setNumber(number + 1); setNumber(nu..

createPortal게임에서 포탈을 타고 다른 맵으로 이동하듯,createPortal은 React 컴포넌트를 특정 DOM 위치로 “텔레포트”하듯 렌더링할 수 있는 API이다.createPortal(children, domNode, key?)children : 이동하고자 하는 컴포넌트, jsx 입력domNode: 텔레포트 시킬 domkey? : portal의 key값을 부여할수있는 선택옵션 인자 일반 div Modal과 createPortal Modal 비교보통 모달구현할때 dom의 최상단에 위치시키려고 position:fixed, z-index:99999 이런식으로 스타일링을 하는데부모 요소에 의해 새로운 stacking context가 생성되면, 자식의 z-index가 아무리 커도다른 stacki..