문제리액트로 파일 등록을 구현 중에 문제가 발생했다.처음 파일 등록할 때 잘 되고, 삭제하고 다른 파일 등록도 잘 되는데, 삭제하고 동일한 파일을 다시 올리면 등록이 안되는 것이었다. 원인문제는 브라우저의 file input에 대한 작동 방식 때문이었다.브라우저가 '같은 파일'이라고 판단하면 `onChange` 이벤트를 발생시키지 않는다고 한다.리액트에서는 file input의 보안을 위해 다른 input들과 달리 비제어 컴포넌트로만 사용하도록 강제하는데,때문에 file input은 `useRef`를 통해 해당 input을 ref로 컨트롤하게 된다.const removeImageFile = () => { setPreviewUrl("");};이 함수는 파일 미리보기 이미지 위에 떠있는 파일 제거 버튼을..

Navigate특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때쇼핑몰의 회원 전용 페이지에 로그인없이 들어와서 로그인 페이지로 리다이렉트하는 경우쇼핑몰의 상품 상세 페이지에서 제품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우useNavigate특정한 코드의 실행이 끝나고 나서 페이지를 이동시키고 싶을 때쇼핑몰에서 장바구니에 담기를 눌렀을 때 리퀘스트를 보내고 장바구니 페이지로 이동시키는 경우쇼핑몰에서 결제하기 버튼을 누르고 나서 모든 결제가 완료된 후에 페이지를 이동시키는 경우리다이렉트된 로그인 페이지에서 로그인을 완료한 후에 처음 진입했던 페이지로 돌아가는 경우

useReducer먼저, useReducer는 어떤 역할을 하는지 간단히 정리하고 넘어가려 한다.useReducer는 useState를 온전히 대체할 수 있는 메서드로,useState로 관리되는 상태들은 모두 컴포넌트 내부에서만 관리되어야 하며, 관련 로직도 모두 컴포넌트 내부에서만 작성되어야 한다. 때문에 UI 렌더링만 담당하면 되는 App 컴포넌트에서 굳이 노출될 필요 없는 로직들이 useState에 의해 모두 담겨있어야 하고, 이는 가독성과 유지보수성을 해친다. 이렇게 useState로 인해 컴포넌트 내부 코드가 쓸데없이 복잡해질 경우, useReducer를 사용해서 상태 관리 함수들을 모두 외부로 분리하여 컴포넌트를 정리할 수 있다. 단, 그렇다고 해서 모든 state를 useReducer로 사용..

setCount((prev) => prev + 1);리액트를 하다 보면 이러한 형태의 setter 함수를 쓰게 된다. 이는 `useState`의 setter 함수에서 콜백 형태로 상태를 업데이트 하는 것인데, 이를 '함수형 업데이트' 방식이라고 한다. 이번에는 값 기반 업데이트와 함수형 업데이트의 차이, 그리고 함수형 업데이트에 담긴 '클로저'에 대해 이해해보려고 한다. (사실 후자가 목적) 1. 값 기반 업데이트 (단순히 '새 값'으로 상태 변경)const CountExample = () => { const [count, setCount] = useState(0); const action = async () => { const n = await new Promise((resolve) => s..

결론부터:브라우저는 빌드된 리액트 소스들(html, css, js)을 실행하는데,빌드에는 1. 트랜스파일링과 2. 번들링 단계가 있다. 리액트 빌드 단계 1. Transpiling(트랜스파일링)Babel(바벨), SWC와 같은 'jsx to js' 번역기가 리액트의 jsx → 순수 js로 변환해준다. 2. Bundling(번들링)번역되어 복잡하고 길어진 순수 js 코드를 여백없이 쫙 압축시켜 '자바스크립트 코드 묶음 처리'를 한다.여러 개를 한데 묶어놓으면 가져가기 쉬운 것처럼, 브라우저가 이 묶음을 다운받기 쉬워진다.이렇게 js 코드를 압축해서 묶어(번들링) 브라우저에게 보내면, 브라우저는 효율적으로 신속하게 코드를 실행할 수 있다.

왜 push로 배열 상태를 변경하면 안되는 걸까?const handleRollClick = () => { const [num, setNum] = useState(1); const [sum, setSum] = useState(0); const [gameHistory, setGameHistory] = useState([]); const nextNum = random(6); setNum(nextNum); setSum(sum + nextNum); gameHistory.push(nextNum); setGameHistory(gameHistory);};handleRollClick은 '주사위 굴리기'를 클릭했을 때랜덤으로 주사위 숫자를 바꾸고, (setNum)나왔던 숫자들을 모두 더하고, (setSu..