lyuna's story

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

useEffect란? React에서 사용하는 훅 중 하나로, 컴포넌트가 렌더링 될 때 특정 작업을 수행할 수 있게 도와준다.컴포넌트가 화면에 나타날 때나 사라질 때, 또는 특정 값이 변할 때 어떤 동작을 하고 싶다면 useEffect를 사용하면 된다. useEffect  컴포넌트의 최상위 레벨에서 useEffect를 호출하여 Effect를 선언한다.import { useEffect } from 'react';import { createConnection } from './chat.js';function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useEffect(() => { ..

useEffect란? React에서 사용하는 훅 중 하나로, 컴포넌트가 렌더링 될 때 특정 작업을 수행할 수 있게 도와준다.컴포넌트가 화면에 나타날 때나 사라질 때, 또는 특정 값이 변할 때 어떤 동작을 하고 싶다면 useEffect를 사용하면 된다. useEffect  컴포넌트의 최상위 레벨에서 useEffect를 호출하여 Effect를 선언한다.import { useEffect } from 'react';import { createConnection } from './chat.js';function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useEffect(() => { ..

useReducer useReducer는 리액트 내장 훅 중 하나로, 상태관리와 관련된 훅 입니다.복잡한 상태 로직을 다룰 때 매우 유용합니다.단순한 상태 변화보다 다양한 액션타입에 따라 상태를 다르게 업데이트 하고 싶을 때 많이 사용됩니다 useReducer은 어떤 상황에서 사용할까?? 컴포넌트 상태 관리 방법에는 여러가지가 있습니다가장 기본적인 방법   >> useStateBut, 상태 로직이 복잡해지면 useState 만으로 관리하기 어려운 경우가 많습니다ex) 여러 개의 관련된 상태를 업데이트 해야 하거나, 상태 업데이트 로직이 복잡한 경우> 이럴 때 useReducer가 useState 보다 더 적합합니다useReducer을 사용하면 상태와 상태 업데이트 로직을 하나의 함수로 일관되게 관리할 수..