React (43) 썸네일형 리스트형 [react] useState에 함수를 저장하면 생길 수 있는 문제 (반복 실행, useRef의 경우) 문제 상황업무 중 모달 컴포넌트를 만들면서 다음 요구사항이 주어졌다.모달 컴포넌트 우측 상단에 X 버튼을 넣어서 모달창을 끌 수 있게 해주세요.경우에 따라, X 버튼을 눌러도 모달창이 꺼지지 않도록 해주세요.요구사항1을 위해서 X버튼에 모달창을 끄는 이벤트 핸들러를 달아야 한다.요구사항2를 위해서 이벤트 핸들러를 동적으로 변경하고 모달창을 리렌더링해야 한다.따라서 아래처럼 이벤트 핸들러를 useState로 저장하고 동적으로 변경하려고 했다..import React, { useState } from "react";export default function Modal1() { const [callback1, setCallback1] = useState(() => console.log("모달창을 끄는 .. [CSS][React] 사용자 상호작용에 따른 UI 변경 피드백을 state와 의사 클래스를 함께 쓸 때 주의점 배경 지식프론트엔드에서는 통상 사용자가 클릭이나 마우스 호버 등의 상호작용을 할 때 ui 스타일이 변경되어 상호작용을 표현한다.이 표현을 구현하기 위해 React를 기준으로 두 가지 방식 중 하나을 사용할 수 있다. 이는 아래와 같다.하나, 의사 클래스를 이용한 style 변경 | css에서는 :hover과 같은 의사 클래스를 이용하여 몇 가지 상호작용에 대해 스타일 분기처리를 할 수 있다.스타일의 on off에 대한 분기처리가 css만으로 간단하게 구현 가능하다.:hover, :active, :focus 처럼 간단한 상호작용만 처리 가능하여 복잡한 이벤트의 처리를 할 수 없다.다른 하나, state를 이용한 style 변경 | react의 useState를 이용하여 className이나 style 속성.. [react] SPA에서 라우팅 2: 쿼리 파라미터를 사용하는 이유 이 글은 SPA에서 라우팅을 하는 전략에 대해 개괄한다.이전 글의 링크는 아래와 같다.[react] SPA에서 쿼리 파라미터를 사용하는 이유 [react] SPA에서 라우팅 1: 기본 전략SPA는 기술적으로 단일 페이지인 프론트엔드 앱이지만, 유저에게는 몇 가지 이유로 MPA처럼 보여야 하는 경우가 있다. SPA에서는 UX를 위해 라우팅 기능이 기본적으로 필요하다.프레임워크가 없는chartist1206.tistory.com 이전 글에서는 SPA에서 MPA처럼 라우트를 적극 사용하는 이유에 대해 알아보았다.이번에는 라우팅 전략에서도 동적 처리에 중요한 쿼리 파라미터에 대해 말해보자. 앞의 글에서는 라우팅 전략을 pathname, nested route, dynamic route로 구분했고, 특히 dynam.. [react] SPA에서 라우팅 1: 기본 전략 SPA는 기술적으로 단일 페이지인 프론트엔드 앱이지만, 유저에게는 몇 가지 이유로 MPA처럼 보여야 하는 경우가 있다. SPA에서는 UX를 위해 라우팅 기능이 기본적으로 필요하다.프레임워크가 없는 리엑트는 SPA가 적합하다. 이는 유저가 앱에 접속하면 단일한 html 파일 내에서 자바스크립트(중략 js) 파일로 UI를 변경하는 방식이다. 그런데, 유저는 프론트엔드를 앱이 아니라 '페이지 혹은 문서'처럼 인식하는 경향이 있다. 만약 유저가 프로그램을 실행하는 거라면 언제나 메인화면이 뜨는 것에 이상함을 느끼지 않겠지만, 웹 브라우저로 접속하는 경우에는 내가 보던 페이지에 바로 접근하지 못하는 것에 이상함을 느낄 가능성이 크다. 이는 관습적으로 웹 페이지가 하나의 앱이 아니라 여러 문서 페이지처럼 여겨져오던.. [React] 드래그 앤 드롭 처음부터 공부, UI 만들기, 관련 라이브러리 추천 목표드래그 앤 드롭 기능은 웹 UI에서 흔히 사용되는 기능이다. 이 글은 드래그 앤 드롭을 처음부터 실무 적용까지 공부했던 기록이다. 목차1. 드래그 앤 드롭의 기본 원리 탐구2. 실무에서 사용하는 대표 기능- 파일 드래그 앤 드롭- 박스 내 정렬 및 이동- 자유 이동3. 유용한 라이브러리- react-dropzone- dnd-kit 드래그 앤 드롭의 기본 원리 탐구 나는 드래그 앤 드롭 기반 기능의 구조 구상이나 이벤트에 대해 전혀 몰랐는데, 아래 글 두개면 충분했다. 빠르게 기능을 파악하고 싶다면https://inpa.tistory.com/entry/%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-Drag-Drop-%EA%B8%B0%EB%8A%A.. [React] 함수형 컴포넌트를 JSX(<Component/>)로 호출하는 것과 일반 함수(Component())로 호출하는 것의 차이 (never-call-component-functions-directly 의 의미) 최신 버전 리엑트는 보통 함수형으로 컴포넌트를 작성한다. 그리고 컴포넌트를 호출할 때는 JSX형식(처럼 대괄호를 붙이는 방식)으로 호출한다. 그렇다면 JSX형식이 아니라 일반적인 함수처럼 Component1()로 호출하면 안될까? 공식문서에서는 컴포넌트 함수의 일반적인 호출(직접 호출)을 금기시합니다.https://ko.react.dev/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly문서에 따르면 직접 호출이 반드시 에러를 일으키는 것은 아니지만 컴포넌트 사이클에 필요한 몇 가지 사이드 이펙트가 발생하지 않는다. 그래서 당장에 에러가 안난다고 직접호출을 하면 예상했던대로 작동하지 않을 수 있다... [react-query] react-query의 useQueries나 useQuery 반환 값을 useEffect에 걸면 무한 리렌더링에 빠지는 이유 문제상황react-query로 데이터를 받아서 변수 fetchData에 저장했다. 그리고 useEffect의 의존성 배열에 fetchData를 넣어서, 해당 작업이 완료되면 useState인 otherData에 임의의 객체인 {}를 setState로 담도록 코드를 짰다.(즉, fetchData 와 otherData는 완전히 다른 값을 저장한다)function App(){const [otherData, setOtherData] = useState(undefined); const fetchData = useGetDatasetList(); useEffect(() => { console.log('data 변경');if(!fetchData.isLoading && fetchData.data) .. [React] CSR에서 SSR로의 전환, react 18은 어떤 SSR을 하는가. 이 글은 react 18버전 도입 시기에 주요 기능이었던 ssr과 그것의 개선점에 대한 정리이다.글의 내용은 아래의 글을 정리한 것이다.(글의 초반에서 SSR의 필요성과 CSR의 한계점에 대한 내용은 필자 개인의 정리를 첨가했으며 이 부분에 대해 오류나 부족한 점이 있다면 말씀해주시면 감사하겠습니다)https://github.com/reactwg/react-18/discussions/37 New Suspense SSR Architecture in React 18 · reactwg react-18 · Discussion #37Overview React 18 will include architectural improvements to React server-side rendering (SSR) perform.. 이전 1 2 3 4 ··· 6 다음
