useCallback이 뭔지 모르겠어요 ㅜㅜ 리액트는 컴포넌트의 상태가 변경되면 리렌더링을 진행한다고 useState편에서 설명했다 리액트는 리렌더링을 진행하면서 컴포넌트의 코드를 위에서부터 다시 읽어내는데이 과정에서 함수를 만나게 된다면, 똑같은 함수여도 새롭게 메모리에 할당해 버리는 것이다리액트 : ㅎㅎ 아래와 같은 코드가 있다고 가정해보자 (설명을 위해 많은 부분을 생략한 코드임)...const handleClick = () => { doSomething();} 수상한 버튼 ... 이 버튼 위에 뭔가 바뀌어서 컴포넌트가 리렌더링 된다면 버튼은 전혀 바뀌지 않았는데, props 받고 있는 handleClick의 참조값이 변경되어(리액트가 새롭게 메모리에 할당해버렸기 때문)버튼이 새롭게 렌더링 되어버리..

useEffect를 사용해서 state값을 변경했더니 무한반복이 발생해요 ㅜㅜ useEffect가 뭔지 먼저 알고가보자 useEffect는 컴포넌트 마운트 이후 외부 효과(Effect)를 동기화하기 위한 훅임(ex. 데이터 패칭, api 호출, 채팅방 연결...)useEffect(() => {setup func}, [deps]) setup 함수와 의존성 배열로 이루어져 있으며의존성 배열의 값이 변경되면 useEffect의 콜백함수가 실행된다 무한 반복이 발생한다?혹시 의존성 배열에 state 값을 넣지 않았나 확인해보자const [count, setCount] = useState(0);useEffect(() => { setCount(count + 1);}, [count]); 마운트 이후 state값이 ..

리액트에서 useState의 setter 함수를 사용해서 값을 변경해도 보이는 값은 변경되지 않는 일이 발생할 때가 있음 콘솔을 찍어봐도 값이 바뀌었지만, 화면에 표시되고 있는 값이 바뀌지 않는다면분노를 잠시 추스리고, 리액트가 상태변경을 어떻게 감지하는지 알아야 리액트의 밀당을 이해할 수 있다 type User = { name: string; age: number; }; const [user, setUser] = useState({ name: "John", age: 20 });위와 같은 코드에서, 인풋값으로 새로운 나이를 받는다고 생각해보자 const onClickChangeAge() => { //잘못된 예제 user.age = Number(inputRef.current..

공통 발표회까지 드디어 끝 ㅜSSAFY 2학기 공통 프로젝트의 주제는 스마트 결혼준비 플래너같은 데이터(일정, 완료상태)를 한 페이지의 여러 컴포넌트(캘린더, 남은 일정, 다음 일정)에서 공유했음axios만을 사용해서 데이터를 요청했다면, 매 컴포넌트마다 불필요하게 동일한 요청을 보냈을 것(store에 저장하기에는 데이터 양이 많아질 수도 있고, 내 기준 변경이 많은 데이터라고 생각하여 store에 저장하지 않았음)React-Query의 useQuery를 사용시 불필요한 여러 번의 네트워크 전송을 막을 수 있을 것이라고 생각, 일정 호출에서 useQuery를 사용(신부 혹은 신랑이 배우자의 아이디를 등록하면 일정이 공유되어 같은 데이터를 수정하기에, staleTime은 따로 설정하지 않았음) 1.0 us..

React 18.2 + Vite 환경에서 작성되었습니다. SSAFY 공통프로젝트에서 전역 상태관리툴로 Redux대신 Zustand를 사용하기로 결정했다.실습코치님께 여쭤봤던 다른 팀 친구가 6인 정도 규모의 프로젝트에서는 더 가벼운 Zustand사용을 추천받았다고 알려줬기 때문..Redux는 아무래도 더 큰 엔터프라이즈급 툴인 모양임..방학 동안 공부했던 Redux를 내려놓고 다시 Zustand에 대해 공부하며 주요 함수에 대해 정리했다.Redux보다 훨씬 작고 가볍고, 짧은 Hook형식의 코드를 보며 왜 Zustand를 사용하는지 이해했음0. Installnpm install zustand1. CreateStore 생성 함수 현재 state와 setter를 저장할 store를 생성합니다.import {..