lyla-bae 님의 블로그

오늘은 마지막 리액트수업이다!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를 렌더링한다는것은 다 알것이다.그러나 실제 개발을 하다..

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..

useState는 어떻더라기억이 가물가물하기 때문에 다시 복습을 해보기위해 아래코드를 참고해보자function App() { const [todos, setTodos] = useState(mockDate); const idRef = useRef(3); const onCreate = (content) => { const newTodo = { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }; setTodos([newTodo, ...todos]); }; const onUpdate = (targetId) => { setTodos( tod..