최근 회사에 새로 들어오신 분이 Next 를 한 번도 해보지 않은 분이셨는데, 함께 작업하게 되면서 Next 혹은 JS 초보분들이 보실 수 있는 코드 작성 팁을 굵 직하게 많이 사용하실 것 같은 내용만 몇 가지 적어보려고 한다. (생각나거나 또 생긴다면 정리할 예정) Next 개발 2년차가 되어서도 늘 느끼지만 내 코드가 모두 정답은 아닐 수 있고, 지금 적은 내용들도 나중에 가면 바뀔 수도 있으니 가볍게 읽어보셨으면 한다. (코드 작성이 옳다, 그르다 보다는 지금 현 상황에서 Next 를 이용할 때 이런 것은 주의하는게 좋다~ 가 이 글의 요지란 이야기.) useEffect 의 사용은 최대한 적게 useEffect 는 최초 한 번 혹은 의존성 리스트 안의 요소가 호출되었을 때 실행되는 성질이 있어, "..

React Jotai 사용법 총 정리(1) - Jotai는 무엇이고 어떻게 사용하나요? ( https://liebe97.tistory.com/49 ) React Jotai 사용법 총 정리(2) - atom 이해 및 기본 유용한 기능 ( https://liebe97.tistory.com/51 ) React Jotai 사용법 총 정리(3) - useAtom & provider 사용법 ( https://liebe97.tistory.com/52 ) React Jotai 사용법 총 정리(4) - Jotai 짧은 후기 atomWithStorage 에 대한 이야기 실제 프로젝트에서 atomWithStorage 로 세션스토리지를 사용할 때 문제가 있었다. const storage = { ...createJSONStor..

부모 컴포넌트에서 자식 컴포넌트를 불러와서 사용하는 도중... 부모 상태는 바뀌었는데 자식 컴포넌트가 바뀌지 않는 문제가 발생하는 경우가 있다. 그럴 때는 key 를 사용하면 useEffect 를 쓰지 않고 간단하게 처리할 수 있다. 위 코드를 보면, 키를 주지 않았을 때는 재랜더가 되지 않기 때문에 현재 시각이 업데이트 되지 않고 키를 줬을 때는 자동으로 key 값에 따라 재랜더 된다. 따라서 변하는 어떠한 값에 대해 자동으로 재랜더 되기를 원한다면, key 에 변하는 값을 넣어주면 된다.

React Jotai 사용법 총 정리(1) - Jotai는 무엇이고 어떻게 사용하나요? ( https://liebe97.tistory.com/49 ) React Jotai 사용법 총 정리(2) - atom 이해 및 기본 유용한 기능 ( https://liebe97.tistory.com/51 ) React Jotai 사용법 총 정리(3) - useAtom & provider 사용법 ( https://liebe97.tistory.com/52 ) 이번 포스팅에서는 useAtom 과 provider 사용 방법에 대해 다뤄보고자 한다. 1. useAtom 총 정리 1편에서 설명했듯이 useAtom 은 useState 와 동일한 모양으로 사용 가능하다. const [price, setPrice] = useAtom(..