전체 글134 [DIL] useMemo useMemo(calculateValue, dependencies) useMemo는 리렌더링 사이의 계산 결과를 캐시할 수 있는 리액트 훅이다.컴포넌트 최상단에서 useMemo를 호출하여 리렌더링 사이의 계산 결과를 캐시한다.*캐시 : 자주 사용하는 데이터를 임시로 저장해 두었다가, 필요할 때 바로 꺼내 쓰는 저장소.import { useMemo } from 'react';function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ...} 매개변수calculateValue : 캐시하려는 값을 계산하는 함수이다. 이 함수는 순수함수여야 하며, .. 2024. 6. 17. [TIL] 옵셔널 체이닝(Optional Chaining)이란 프로그래밍 언어에서 특정 값이나 객체가 존재하는지 확인하고, 존재할 때만 그 값에 접근하는 방법. api로 회원 정보를 가져와서 MyProfile에 가져온 닉네임을 띄우려 했으나해당 페이지를 새로고침하면 데이터가 다 날라가버리는 현상이 일어났다. // 문제 로직//생략function MyProfile() { const { userData, setUserData } = useContext(ListContext); const [nickname, setNickname] = useState(''); return ( 프로필 변경 setNickname(e.target.value)}/> 닉네임 변경 )}//생략 .. 2024. 6. 14. [DIL] useLayoutEffect * useLayoutEffect는 성능을 저하시킬 수 있다. 가급적이면 useEffect를 사용하는 것이 좋다. useLayoutEffect는 브라우저가 화면을 다시 채우기 전에 실행되는 버전의 useEffect이다.useLayoutEffect(setup, dependencies?) useLayoutEffect(setup, dependencies?)브라우저가 화면을 다시 그리기 전에 useLayoutEffect를 호출하여 레이아웃을 측정한다.import { useState, useRef, useLayoutEffect } from 'react';function Tooltip() { const ref = useRef(null); const [tooltipHeight, setTooltipHeight] = .. 2024. 6. 11. [TIL] React 'react-router-dom'으로 페이지 연결하기 메인페이지에서 로그인 버튼을 누르면 로그인 할 수 있는 페이지로 넘어가도록 연결해보자 ! 1. 먼저 터미널에서 `react-router-dom` 설치한다.npm install react-router-dom또는yarn add react-router-dom // Home.jsximport { useContext, useEffect, useState } from "react";// 생략import { Link } from "react-router-dom";import Header from "../loginpages/Header.jsx";function Home({ contents, setContents }) { //생략 return ( // 생략 .. 2024. 6. 11. [발표] useEffect와 useLayoutEffect useEffect는 컴포넌트를 외부 시스템과 동기화할 수 있는 리액트의 훅으로 구조는 다음과 같다.useEffect(setup, dependencies?) setup : 흔히 화살표함수로 할당하는 셋업함수이다. dependencies : 흔히 [] 로 useEffect 훅이 다시 실행될지 여부를 결정한다. 1. 기본사용 : 아래 예제에서 useEffect는 count가 변경될 때마다 실행된다. 의존성 배열 안에 count 확인.import React, { useState, useEffect } from 'react';function MyComponent() { const [count, setCount] = useState(0); useEffect(() => { console.log('coun.. 2024. 6. 4. [DIL] useEffect useEffect는 컴포넌트를 외부 시스템과 동기화할 수 있는 리액트 훅이다.useEffect(setup, dependencies?) 컴포넌트의 최상위 레벨에서 useEffect를 호출하여 Effect를 선언하다. import { useEffect } from 'react';import { createConnection } from './chat.js';function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useEffect(() => { const connection = createConnection(serverUrl, roomId); connection.conn.. 2024. 6. 4. [TIL] 벤토 그리드 레이아웃 넣기 홈페이지 메인을 벤토 그리드로 꾸미고 싶을 때, 아래의 공식문서를 통해 원하는 그리드를 가져오면된다.https://mui.com/material-ui/react-masonry/ React Masonry component - Material UIMasonry lays out contents of varying dimensions as blocks of the same width and different height with configurable gaps.mui.com 코드를 가져와 사용하던 중 Uncaught SyntaxError: Export 'import_react3' is not defined in module (at chunk-ALR5B6M7.js?v=aa4e0109:17143:3) 위처럼 경고.. 2024. 6. 4. [발표] useReducer / useContext / useRef useReducer상태 관리를 위해 사용하는 훅 중 하나로 상태가 복잡하거나 상태 변화 로직이 여러가지로 나뉠 때 유용함.상태(state): 컴포넌트의 현재 상태. 어떤 값이나 객체일 수 있음reducer: 상태와 액션을 받아 새로운 상태를 반환하는 함수이다. 액션 : 상태를 어떻게 변경할지를 설명하는 객체이다. 일반적으로 type 속성을 가집니다. 예: { type: 'increment' }useReducer를 사용하기 위해서는 다음 세 가지가 필요하다.초기 상태 (initial state)리듀서 함수 (reducer function)디스패치 함수 (dispatch function) import React, { useReducer } from 'react';// 초기 상태 정의const initial.. 2024. 5. 30. [DIL] useRef useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 훅이다.const ref = useRef(initialValue) 컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언한다. import { useRef } from 'react';function MyComponent() { const intervalRef = useRef(0); const inputRef = useRef(null); // ... 매개변수useRef는 단일 프로퍼티를 가진 객체를 반환한다. current : 처음에는 전달한 initialValue로 설정된다. 나중에 다른 값으로 바꿀 수 있고 ref객체를 JSX노드의 ref속성으로 리액트에 전달하면 리액트는 current 프로퍼티를 설정한다. 다음 렌더링에서 use.. 2024. 5. 30. [DIL] useContext useContext는 컴포넌트에서 context를 읽고 구독할 수 있게 해주는 리액트 훅이다.const value = useContext(SomeContext) 컴포넌트의 최상위 레벨에서 useContext를 호출하여 context를 읽고 구독한다. import { useContext } from 'react';function MyComponent() { const theme = useContext(ThemeContext); // ... 매개변수 context : 이전에 createContext로 생성한 context 이다. context자체는 정보를 보유하지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타낼 뿐이다. 반환값useContext는 호출하는 컴포넌트에 대한 context.. 2024. 5. 29. [TIL] 주석으로 함수에 추가설명 넣기 협업 시 다른 개발자가 한번에 알아 볼 수 있도록함수이름을 잘 지어줘야하는데 가끔 애매한 경우가 생긴다.그럴때에는 작성함 함수 위에 주석을 넣어주면 된다.이때 주석을 // 이 아닌 /** */로 써줘야 한다. 위에 처럼 주석을 적고해당 함수가 사용되는 곳으로 가서 마우스 오버를 하면 2024. 5. 29. [DIL] useReducer(2) 초기 state 재생성 방지하기React는 초기 state를 한번 저장하고 다음 렌더링에서 이를 무시한다.function createInitialState(username) { // ...}function TodoList({ username }) { const [state, dispatch] = useReducer(reducer, createInitialState(username)); // ... createInitialState(username)의 결과는 초기 렌더링에만 사용되지만, 이후의 모든 렌더링에서도 여전히 이 함수를 호출한다. 이는 큰 배열을 만들거나 값비싼 계산을 수행하는 경우 낭비가 될 수 있다. 이 문제를 해결하려면 useReducer 세번째 인수에 초기화 함수를 전달할 수 있다... 2024. 5. 28. 이전 1 ··· 6 7 8 9 10 11 12 다음
