TIL (27) 썸네일형 리스트형 React) Recoil - 페이지 이동 시 비동기 데이터를 state로 넘긴 후 redirect될때 state값이 사라져서 발생하는 에러 해결 (selectorFamily) <TIL_2022_07_27> 특정 유저에게 아래와 같이 질문 내용을 전달하는 기능을 구현하고자 하였다. 서버로 POST 요청을 보냈더니 아래와 같은 에러가 뜬다 POST 요청은 정상적으로 처리되었다. 그렇다면 프론트엔드 코드의 문제인데, 콘솔창을 뜯어본 결과 POST 요청 후 리디렉팅될때 이전 라우팅 경로에서 전달 받은 state 값이 사라지는 현상이 발생해서 에러가 뜬 것이었다. 해결방안 Recoil을 사용하여 비동기로 받아온 유저 정보를 전역상태로 관리하는 방법으로 해결. API에 파라미터를 전달할 필요가 없는 경우 다음과 같이 selector를 사용하여 비동기 데이터를 전역상태로 관리하고 사용하였다. // atoms.js export const userInfoSelector = selector({ key: "userInfoSe.. React) Recoil - recoilPersist, selector <TIL_2022_07_26> recoilPersist() https://velog.io/@tamagoyakii/42byte-Recoil%EB%A1%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0 페이지가 변경되더라도 상태관리를 유지하기 위해 생성 로그인 상태 관리할때, export const isLoggedIn = atom({ key: `isLoggedIn${v1}`, default: false, }); 이렇게 atom 형태로 저장해서 사용하면 컴포넌트가 전환될때 새로고침하면 값 보존이 안된다. const { persistAtom } = recoilPersist(); export const LoginState = atom({ .. React) 객체 형태로 여러개의 state 관리하기 <TIL_2022_07_25> 프로필 정보 수정 - 객체 형태로 여러개의 state 관리하기 이렇게 총 네가지 항목의 값을 수정하는 기능을 구현해야 하는 경우, onChangeNickname, onChangeJob, … 이렇게 onChange와 useState를 변수마다 각각 지정하여 사용하는 방법도 있지만 최선은 아니다. (코드도 더 길어지고, 메모리 측면에서도 비효율적인 것 같다. 자세한 원리까지는 아직 잘 모르겠다) 가장 좋은 방법은 각 태그에 name 속성을 지정하여 이벤트가 발생했을때 그 값을 참조하는 것. useState로 문자열이나 배열 뿐만 아니라 객체 형태도 관리할 수 있다. // user는 DB에서 받아온 유저 정보 객체 const [userInputs, setUserInputs] = useState({ nickna.. 이전 1 2 3 4 다음
