전체 글 (159) 썸네일형 리스트형 [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] width: 100vw; 와 width: 100%; 의 차이 css에서 최상위 요소가 화면을 가득 채우도록 할 때 100%나 100vw를 많이 사용한다(높이는 vh와 %를 많이 사용하고)둘은 별 차이가 없을 것 같지만, 한 가지 큰 차이가 존재한다. vw는 viewport를 기준으로 백분율 계산을 한 단위이다.이 때, 스크롤 바는 고려되지 않는다. 반면, %는 부모 기준으로 가용가능한 공간을 기준으로 백분율로 값을 계산한다.이 때, 스크롤 바는 고려된다. 이게 무슨 말인가.예시를 들어 보자.아래는 style 태그를 같이 넣은 html 코드다. css는 기본적인 reset css만 있다. 이 때, 요구 사항으로 body에 배경 색상 tomato, width와 height는 항상 화면을 가득 채우도록 요청받는다.그럼 아래처럼 구현 가능하다.body { b.. [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.. [js][trouble-shooting] drag and drop 이벤트 구현 시 주의 사항 - drag 이벤트가 drag를 놓은 후에 또 발생함. 근데 clientX, clientY 값은 0임. 왜??? 문제drag 이벤트는 드래그인 중에 계속 발생한다.근데, 특정 조건에서는 drag를 놓을 때 한번 더 발생한다.문제는 이 때 clientX 같은 일부 값이 제대로 안들어있고 0으로 나와서 drag 이벤트 핸들러에 clienX 관련 로직이 들어있으면 에러가 나버린다. 코드import React from "react";export default function DADMoveTest() { return ( { console.log("onDragStart"); }} // 드래그를 놓을 때 한번 더 실행됨. clientX는 0임 onDrag={(ev) => { console.log("onDrag", ev.clientX); .. 이전 1 2 3 4 ··· 20 다음
