react-query로 서버에서 리스트를 get 해오는 로직을 짜다가 데이터를 가져오는 loading 일 때는 초반에 Loading... 를 띄워주려고 했다. "Uncaught Error: Rendered more hooks than during the previous render." 하지만 위와 같은 에러가 발생했다. 이유를 찾아보니 if (isLoading) return Loading...; 이 부분을 hook보다 상위에 두어서 생긴 문제였다. 리액트에서는 컴포넌트의 렌더링 중 훅의 호출 순서와 횟수가 일관되어야 한다. 컴포넌트가 처음 렌더링될 때 호출된 훅의 순서와 갯수는 이후 렌더링에서 동일해야한다. = 훅의 호출 규칙 처음 코드에서 if (isLoading) 조건에 따라 로딩 상태가 변경..
{assistantList.data.map((assistant: ResGetAssistantListDataType) => ( { setCurrentAssistant(assistant); postThread(); }}> {assistant.name} ))} currentAssistant와 assistant가 동일할 때 다른 컬러로 변경하는 효과를 주고 싶었다. 분명 같은 값을 가진 객체인데 색이 변하지 않는 문제가 발생했다. 그렇게 취준할 때 익히 배웠던 참조타입, 원시타입의 차이점이다..이렇게 실제 현업에서 실수해보니 다시금 중요성을 느끼는 1인.. 객체는 값이 아닌 주소 값을 바라보기 때문에 두 객체가 같은 값을 가지고 있어도 다른 주소 값을 참조하고 있기 때문에 다른 값이라고..
{assistantList?.data.map((assistant: ResGetAssistantListDataType) => ( { console.log('click chatbot ::: ', assistant); setCurrentAssistant(assistant); }} > {assistant.name} ))} 이렇게 하니까 이유 모를 클릭 이벤트가 먹지 않았다. 뭐가 잘못되었는지 살펴보다 uuid를 assistant.id로 변경하니까 문제가 해결되었다, uuid() 는 컴포넌트가 리렌더링될 때마다 새로운 값이 생성되므로, 리액트가 각 리스트 아이템을 동일한 아이템으로 인식하지 못할 수 있다는 것. 이로 인해 불필요한 리렌더링이 발생하고, 상태가 제대로 유지되지 않을 수 있다. 리..
프로젝트를 하면서 회원가입이 페이지가 총 두 페이지로 나눠진다. 첫 번째는 이메일과 비밀번호를 입력하는 페이지고 두 번째는 프로필(닉네임, 프로필 사진) 을 입력하는 페이지이다. 페이지는 두개지만 서버에서 받는 회원가입 api는 하나였다. 여기서 고민은 1. 서버 회원가입 api를 둘로 나눌지 2. props로 전달해줄지 고민이 되었다. 유저가 프로필 설정 없이 이메일, 비밀번호를 설정하고 나가버리면 db에 데이터가 쌓여버리고 그렇다고 db에 저장하지 않으면 api를 분리하는 이유가 없어지는 문제가 발생한다. 따라서 서버 api는 하나로 두고 props로 전달해주는 방법을 쓰기로 했다. 여기서도 redux를 이용하여 이메일, 비밀번호를 전역으로 저장하여 프로필..
