lyuna's story

useMemo useMemo는 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅입니다. useMemo에서 memo는 memoization을 뜻하는데 해석하자면 '메모리에 넣기' 라는 의미로컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술입니다. 쉽게 말해서 , 동일한 값을 반환하는 함수를 반복적으로 호출해야 하는 경우처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때 마다 다시 계산하지 않고 메모리에서 꺼내 재사용하는 것입니다.  useMemo의 구조에 대해 간단하게 살펴봅시다const value = useMemo(() => { return calculate();}. [item..

우선 supabase 가입 후 프로젝트를 생성한다. https://supabase.com/dashboard/projects Dashboard | Supabase supabase.com    프로젝트명을 기입하고 Generate a password를 클릭하면 비밀번호를 생성해준다꼭 복사해서 저장해둘것! 그리고 프로젝트에 돌아와서 src폴더 안에 supabase 폴더를 만들고, 그 안에 supabaseClient.js 파일을 생성한다.  그리고 파일 최상단 위치에 .env.local 파일을 생성한다.  그리고 파일 안에 코드를 삽입한다. .env.local 파일 안에는 anon Api Key 와, URL을 복사해서 붙여넣는다. 그럼 이제 supabase와 내 프로젝트가 연결되었다 ! 이제 시작!! 우선 회원..

useCallback이란? useCallback은 React에서 성능 최적화를 위해 사용하는 훅으로 , 메모이제이션(memoization)된 콜백 함수를 반환하는 역할을 한다.즉, 함수의 재사용을 도와 불필요한 함수 재생성을 방지한다.레퍼런스 리렌더링 간에 함수 정의를 캐싱하려면 컴포넌트의 최상단에서 useCallback을 호출import { useCallback } from 'react';export default function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { refer..

다른 Hook 의 종속성 메모화 컴포넌트 본문에서 직접 생성된 객체에 의존하는 연산이 있다고 가정하자.function Dropdown({ allItems, text }) { const searchOptions = { matchMode: 'whole-word', text }; const visibleItems = useMemo(() => { return searchItems(allItems, searchOptions); }, [allItems, searchOptions]); // 🚩 주의: 컴포넌트 본문에서 생성된 객체에 대한 종속성 // ... 이렇게 객체에 의존하는 것은 메모이제이션의 목적을 무색하게한다. 컴포넌트가 다시 렌더링 되면 컴포넌트 본문 내부의 모든 코드가 다시 실행되기 때문이..

Tailwindcss 사용 2일차 응애인 나는 아직도 적응하는데 넘 오래걸림,, 팀 프로젝트 진행중에 피그마에서 같이 정한 색이Tailwindcss의 기본색으로 대체할 수가 없어서색을 추가할 수가 있는지이것저것 검색해보고 있었음 근데 웬걸 방법 레전드로 쉽다! tailwind.config.js파일 안에 export default { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { extend: { colors: { customPurple: '#D9B8FF', customBlue: '#80CAFF', bgDev: '#FFFFF0' } } },  theme 객체 안에 ..

useMemo 란?React에서 성능 최적화를위해 사용하는 훅이다.컴포넌트가 화면에 그려질 때, 어떤 계산이 매우 오래 걸리거나 많은 자원을 사용할 수 있다.이런 계산을 자주 하면 앱이 느려질 수 있는데 useMemo는 이런 계산을 효율적으로 처리할 수 있도록 도와준다.  레퍼런스 컴포넌트의 최상위 레벨에 있는 'useMemo'를 호출하여 재렌더링 사이의 계산을 캐싱한다. import { useMemo } from 'react';function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ...} 매개변수 계산 함수 ('calculateValu..

useEffect란? 리액트 컴포넌트가 렌더링 될 때 마다 특정 작업을 실행할 수 있도록 하는 Hook. 오래걸리는 코드(또는 렌더링과 상관없는)를 나중에 실행하게 해 준다 컴포넌트가 mount 됐을 때, 컴포넌트가 unmount 됐을 때, 컴포넌트가 update 됐을 때 특정 작업을 처리할 수 있다. 컴포넌트는 라이프 사이클 (생명주기)를 가지고 있다. mount:컴포넌트가 처음으로 화면에 렌더링 되는 시점 update: 화면을 업데이트 하는 것(count:0 ->1로 변경) unmount: 더이상 필요하지 않은 컴포넌트가 화면에서 제거되는 시점  간단한 사용예제를 통해 useEffect 사용법을 알아보자! useEffect 사용 예제 import React, { useState, useEffect }..

useLayoutEffect란? 새로운 글을 클릭하거나 메뉴를 열 때 페이지가 변하는 것을 주목했는가? 이것은 웹 개발자들이 "렌더링"이라고 하는 프로세스에 의해 가능해진다. 이 프로세스는 웹 페이지의 내용을 업데이트 하고 새로운 정보를 보여주는 역할을 한다. 여기서 useLayoutEffect라는 것이 나온다. 이것은 React라는 프레임워크에서 사용되는 특별한 기능 중 하나이다. useLayoutEffect는 렌더링이 일어나기 전에 특정 작업을 수행하는 데 사용된다. 간단히 말해서 useLayoutEffect는 페이지가 업데이트 되기 전에 어떤 일을 처리할 수 있는 것으로 일종의 준비작업 이라고 할 수 있다.페이지가 업데이트 되기 전에 필요한 작업들을 처리해 놓는 것이다.  참조 브라우저가 화면을 다..

반응형값 의존성 지정 Effect의 의존성 "선택"할 수 없다는 점에 유의하라.Effect 코드에서 사용하는 모든 반응형 값은 의존성으로 선언되어야 한다. Effect의 의존성 배열은 코드에 의해 결정된다.function ChatRoom({ roomId }) { // 이것은 반응형 값입니다 const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // 이것도 반응형 값입니다 useEffect(() => { const connection = createConnection(serverUrl, roomId); // 이 Effect는 이 반응형 값들을 읽습니다 connection.connect(); return () => c..

커스텀 훅으로 Effect 감싸기 Effect는 탈출구이다. 리액트를 벗어나야 할 때, 또는 더 나은 빌트인 솔루션이 없을 때 사용한다. Effect를 수동으로 작성해야 하는 경우가 자주 발생한다면 이는 컴포넌트가 의존하는 일반적인 동작에 대한 커스텀 훅을 추출해야 한다는 신호일 수 있다. 예를 들어 이 useChatRoom에 커스텀 훅은 Effect의 로직을 보다 선언적인 API 뒤에 숨긴다. function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnecti..