[Portfolio Log] NFT 가구점 3

 

개발내역

방명록에 댓글 편집 버튼을 추가했다. 팔로잉 탭 내용을 추가하여 하트 애니메이션을 공통으로 적용했다. 기존에 댓글마다 다이얼로그가 있던 형태를 수정하여 탭이 가지고 있도록 했다. (리팩토링)

 

배운 내용

리액트의 다이얼로그는 매번 재생성 되는 형태가 아니라, 한번 그리고 flag로 애니메이션 처리만 해주는 형태이다. 따라서 useState로 초기값을 들고 있을 때, 변경되는 전역변수의 값이 처리되지 않더라. 그래서 useAtom(jotai 라이브러리)를 써서 전역변수에 대해 변하는 값을 인식하도록 처리한다. 

 

export const userAtom = atom(null);

Const [item, setItem] = useAtom(userAtom);

 

내가하고 싶은 처리는 특정 전역 변수가 변했을 때, 특정 컴포넌트를 다시 그리는 것이 아니라 특정 함수를 호출하도록 하고 싶다. useAtom으로 가져온 값을 useEffect의 의존성으로 데입하면 전역 변수가 변할 때, useEffect내에 존재하는 함수가 호출되면 된다.

 

아마 내부적으로는 useAtom을 사용하고 있는 컴포넌트가 재렌더링이 되서 컴포넌트도 다시 그리고 특정 처리도 다시 해줄 것이다. 즉, 전역변수의 변경이 특정 컴포넌트의 함수처리까지 이어진다.

 

그러나 결론적으로 전역변수 값이 변경되지 않으면 다시 값이 설정되지 않는 문제가 있어서 그냥 다이얼로그 isOpen을 useEffect의 의존성으로 하여 문제를 해결했다. 

 

useContext를 코드 내에서 적용해봤다. 전역적으로 선언, <이름.Provider value={}>로 감싸고 내부 자식에서 useContext 훅으로 사용한다. props로 넘기기에는 더러워지는 상황에서 괜찮더라. (하트 애니메이션에서 썼다.)