react
1.[React-Router-dom-v.6] useNavigate로 props 전달하기 (Querystring 포함)
토이 프로젝트 진행 중 router를 이용해서 Link to가 아닌, 특정 상황에서 input button을 클릭해서 fetch된 데이터를 전달해야하는 경우가 생겼다.useNavigate를 사용해서 가공된 데이터를 state로 보내준다.state로 받아온 데이터는 st
2.[React-Router-dom-v.6] NaviLink로 현재 location에 active css 적용하기
Link 컴포넌트가 아닌 NavLink로 현재 location의 pathname를 확인하여 해당 pathname과 일치할 경우 커스텀한 css 적용하기 (ex. font-bold / color 바꾸기 등등)메뉴 컴포넌트의 상단에서 pathname별 react-route
3.[React Typescript] 이미지 데이터 엑박 처리, img onError={}
토이프로젝트 진행시 fetch로 가져온 data.img가 404 에러, 엑박으로 주소가 잘못된 img를 가져오는 경우가 발생됐다. 프로젝트 완성도를 떨어뜨리지 않기 위해 에러시 보여주는 img를 생성해 주어야 한다.img 태그에 이미지 404 에러시 다른 이미지를 보여
4.[TIL] Invalid hook call. Hooks can only be called inside of the body of a function component. & You might be breaking the Rules of Hooks
토이 프로젝트를 진행하면서 auth 관련하여 로그아웃 함수를 모듈로 분리하여 사용해야할 경우가 생겼다.하지만 콘솔 창에서 React Hooks must be called in the exact same order in every component render 라는 에러
5.[Font Awesome v.6] React에서 Font Awesome 무료 아이콘 사용방법
개인 프로젝트를 진행하면서 가장 많이 쓰는 icon library는 Font Awesome이다.컴포넌트 형태로 쉽게 사용할 수 있다.크기와 애니메이션도 쉽게 적용 할 수 있다.svg형태로 렌더링, 다운로드가 가능하므로 다른 이미지 작업(favicon, 로고 만들기 등)
6.당신의 useEffect, 안녕하신가요?
useEffect 여러 개 사용이 찝찝한 적이 있으신가요? useEffect를 잘 사용하는 것도 좋지만 useRef, 커스텀 훅, 선언적 컴포넌트 등의 대안으로 적용하는 법을 검토해봤습니다.
7.JSX는 객체다 : React 리렌더링 구조 이해하기
리액트 훅 없이 React 최적화가 가능하다고요? JSX는 결국 객체입니다. 참조를 이해하면 훅을 사용하지 않고도 리렌더를 막을 수 있습니다.
8.React 19 공식문서 딥다이브 - 1편 상태와 사이드 이펙트
React 19 공식 문서를 바탕으로 딥다이브 스터디한 정리 글 첫번째 - useState, useEffect, useContext, createContext, useReducer, useLayoutEffect. "실행 시점과 동작 흐름"을 기준으로 명확하게 공부해보자
9.React 19 공식문서 딥다이브 - 2편 리렌더링 제어와 외부 스토어
React 19 공식 문서를 바탕으로 딥다이브 스터디한 정리 글 두번째 - memo, useCallback, useImperativeHandle, useSyncExternalStore. "리렌더링 최적화와 참조 비교"를 기준으로 공부해보자