본문 바로가기
반응형

전체 글174

[글또] 삶의 지도💫 본 글은 글또 10기 지원을 위해 작성하는 글입니다.양식 : [글또를 신규로 참여하는 분들은 “자신이 어떻게 살아왔는지 - 삶의 지도”에 대한 글을 작성해서 제출해주셔야 합니다] 막상 나에 대해 글을 쓰려고 하니 어떻게 써야 하나 생각이 먼저 들어 바로 못 쓰겠더라구요... 그래서 추석 연휴 기간 쉬는 김에 차분하게 저의 삶을 돌이켜보고자 합니다. 우선 글또에서 제시해준 삶의 지도는 '자신이 어떤 사람이고 어떤 성격을 가지고 있고, 어떤 사건으로 지금의 내가 되었는가' 라고 자세하게 나열해주셔서 요약하여 제 삶을 풀어보면 되지 않을까 생각했습니다. 🤔 다이나믹한 나의 삶?저는 제 삶이 제법 다이나믹한 삶이라고 생각합니다. 어릴적부터 유난히 내성적인 어린시절을...(밈이 아니라 진짜) 보내서 정말 .. 2024. 9. 18.
[React]페이지 이탈 시 확인 모달창 띄우기 참고한 블로그https://choisuhyeok.tistory.com/m/140 [React] React Router로 페이지 이동 시 폼 데이터 손실 방지하기: usePrompt와 beforeunload 활용법폼을 작성하는 페이지에서 다른 페이지로 이동하려는 시도 시, 이동 전에 현재 작성된 내용이 손실될 수 있다는 경고 메시지가 나타나는 UI는 많은 사용자들이 익히 본 경험이choisuhyeok.tistory.com ❌❌❌❌제대로 동작되지 않은 코드입니다 참고하지 말기❌❌❌❌내가 작성한 코드communitywrite import React, { useState, useRef, useEffect } from "react";import { CustomHeader, Button, Selectbox,.. 2024. 9. 13.
[React]useCallback ✔️useCallback이란? useCallback은 함수를 메모이제이션합니다. 주어진 종속성 배열이 변경되지 않으면, 동일한 함수 인스턴스를 반환합니다. 이는 컴포넌트가 불필요하게 다시 렌더링되는 것을 방지하는 데 도움을 줍니다.언제 사용: 컴포넌트가 자주 다시 렌더링되면서 동일한 함수가 다시 생성되는 것을 피하고 싶을 때, 특히 자식 컴포넌트에 콜백 함수를 props로 전달할 때 사용합니다.usememo랑 너무 헷갈렸는데 둘 다 비슷하긴 하지만 usememo는 특정 결과값을 재사용하는 반면, usecallback은 특정 함수를 새로 만들지 않고 다시 재사용하는 것이다.  1. useCallback의 구조import React, { useState, useCallback } from 'react';fu.. 2024. 9. 3.
[React] useMemo ✔️useMemo란?useMemo는 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅이다.useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.그래서 복잡한 계산이 있을때 사용을 하는 것이며 동일한 값을 반환하는 함수를 반복적으로 호출해야한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것이다.너무 많이 남용해서 안되는 이유가 의존성 값 비교를 수행해야 하기 때문에 컴포넌트 함수가 재실행되어야 하는 함수가 .. 2024. 9. 3.
[React] 리액트 반응형 useMediaQuery 리액트 디바이스 자체의 화면 폭을 확인해서 true/ false를 반환해주는 useMediaQuery 리액트 전용 훅을 사용할 수 있다. 디바이스 폭 기준이라, 창을 늘리거나 줄여도 반응하지 않는다.그래서 모바일,태블릿, pc 같이 디바이스 자체를 가늠하려는 경우 사용하면 유용하게 쓸 수 있음 1. install 필요함 터미널창에서 react-responsive 설치npm install react-responsive 2. import 해주기 import { useMediaQuery } from "react-responsive"; 3. 변수 세팅 const isDesktop = useMediaQuery({ query: "(min-width: 1024px)" }); const isMobile =.. 2024. 8. 30.
[React] useContext api useContext 훅은 어떻게 사용할까?리액트의 일반적인 데이터 흐름은 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 '단방향'으로 흐른다. 엄청 큰 컴포넌트 트리가 있다고 가정할 때 공통적으로 필요한 전역적인 데이터가 있을 수 있다. 예를 들어 userdata전역 데이터를 일일이 props로 단계별로 전달해야 한다면 정말 비효율 적이다.리액트는 이러한 문제점을 해결해 주는 Context API를 제공한다.Context는 앱 안에서 전역적으로 사용되는 데이터를 여러 컴포넌트끼리 쉽게 공유할 수 있는 방법을 제공한다. Context를 사용하면 Props로 데이터를 일일이 전달해 주지 않아도 해당 데이터를 가지고 있는 상 위 컴포넌트에 그 데이터가 필요한 하위 컴포넌트가 접근할 수 있다. 즉 사용자 .. 2024. 8. 27.
728x90
반응형

티스토리툴바