React.js 썸네일형 리스트형 [React] state prev 는 무엇인가? https://velog.io/@blee94/React-state-prev-%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-%ED%95%9C%EB%B2%88-ARABOZA stateChange한번에 여러개의" data-og-host="velog.io" data-og-source-url="https://velog.io/@blee94/React-state-prev-%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-%ED%95%9C%EB%B2%88-ARABOZA" data-og-url="https://velog.io/@blee94/React-state-prev-는-무엇인가-한번-ARABOZA" data-og-image="https://scr.. 더보기 [React.js + TypeScript] react-dnd 안쓰고 드래그앤 드랍 구현하기 간단한 재정렬 기능을 가진 todolist이다.이동 시 해당 아이템이 마우스 커서를 따라오도록 구현:draggingItem 상태를 추가하여 현재 드래그 중인 아이템을 추적합니다.드래그 중인 아이템의 복사본을 마우스 커서 위치에 표시합니다.이동 시 커서가 e-resize 모양이 되도록 변경:각 todo 아이템에 cursor-e-resize 클래스를 추가했습니다.메뉴 목록을 가로로 나열하고 left-align 정렬: 요소에 flex flex-wrap gap-2 items-start 클래스를 적용하여 가로 정렬과 왼쪽 정렬을 구현했습니다.추가한 글자 길이에 맞게 아이템의 너비가 fit되도록 변경:각 요소에 inline-block 클래스를 추가하여 내용에 맞게 너비가 조정되도록 했습니다.드래그 중인 아이템의 .. 더보기 [React] MutableRefObject와 LegacyRef [React] MutableRefObject와 LegacyRef출처: https://zerodice0.tistory.com/244 [React] MutableRefObject와 LegacyRefInput의 onChange에 setState를 할당해서 값이 바뀔때마다 상태값이 변경되도록 설정했더니, 매번 Input에 입력한 값이 변경될 때마다 렌더링이 다시 되는 기염을 토했다. 당연한 얘긴 줄 알고 있었는데zerodice0.tistory.com 우선 Input의 ref를 보면 요 녀석은 LegacyRef|undefined를 받게 되어있다. 요 녀석을 따라가보자. ref 자체가 LegacyRef나 undefined만 할당할 수 있는 녀석이었다. Input이 어째서 LegacyRef를 참조하는지는 Intri.. 더보기 [React.19] 메모이제이션이 필요 없는 리액트 컴파일러 https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%99%84%EB%B2%BD-%EA%B0%80%EC%9D%B4%EB%93%9C-a6a0e96edc97 (번역) 리액트 컴파일러 사용법 — 완벽 가이드원문: https://www.freecodecamp.org/news/react-compiler-complete-guide-react-19/junghan92.medium.com리액트 컴파일러 사용하여 문제 해결하기다시 말씀드리면, 리액트 컴파일러는 빌드 과정에서 선택적으로 사용할 수 있는 도구입니다. 리액트.. 더보기 React.memo, useMemo, useCallback 역할 및 차이점 https://develogger.kro.kr/blog/LKHcoding/112 React.memo, useMemo, useCallback 역할 및 차이점React.memo React는 컴포넌트를 렌더링 한 뒤, 이전 렌더된 결과와 비교하여 Dom 업데이트를 결정한다. 상황에 따라 이 과정의 속도를 높이기 위해 React.memo를 사용 한다. 먼저 HOC에 대해 알아보자. Reactdevelogger.kro.kr 더보기 [React] forwardRef란? https://velog.io/@hygge31/forwardRef은 ref 속성에 값을 설정할 수 있지만,사용자 컴포넌트의 경우 ref 속성을 forwardRef 함" data-og-host="velog.io" data-og-source-url="https://velog.io/@hygge31/forwardRef" data-og-url="https://velog.io/@hygge31/forwardRef" data-og-image="https://blog.kakaocdn.net/dna/dzA6vL/hyWV0oYms3/AAAAAAAAAAAAAAAAAAAAADfbU-7XV6XEhRciA-lNOrbp00bg9EMWLjoLrb8fdP5-/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1759244399&allow_ip=&allow_referer=&signature=P7%2FLIbyrm%2FiMbFjdBeLzE4mdQ8I%3D 더보기 섹션 5: 렌더링 리스트 및 조건부 Content 섹션 5: 렌더링 리스트 및 조건부 Content 67. 모듈 소개 www.notion.so 67. 모듈 소개 Rendering Lists & Conditional content Working with Really Dynamic Content 지난 섹션에서: 다수의 컴포넌트와 작업하는 방법 state로 작업하고 사용자 이벤트를 다루는 방법 이번 섹션에서: Outputting Dynamic Lists Of content 목록과 조건부 컨텐츠를 렌더링하는 법 페이지에서 어떻게 다양한 데이터의 배열을 출력할 수 있는지 Rendering Content Under Certain Conditions 다양한 조건에서 다양한 컨텐츠들을 보여주는 법 68. 데이터의 렌더링 목록 목록의 동적 렌더링 목록이 총 몇 개가 생.. 더보기 섹션 4: 리액트 State 및 이벤트 다루기 48. 모듈 소개 User Interaction & State Making Apps Interactive & Reactive 지난 섹션에서: 컴포넌트와 Props 이번 섹션에서: Handling Events 이벤트 핸들링 (클릭, 텍스트 입력창에 입력 등) 이벤트 핸들러를 추가하는 방법 Updating the UI & Working with “State” 사용자와의 상호작용 (화면에 표시되는 내용 변경, 목표 상태 도달 방법) State 조정 방법 (How Transition State A to State B) A Closer Look At Components & “State” State State: React & Components React allows you to create re-usable an.. 더보기 이전 1 2 다음
