Today . .
TodoList 기능을 10명이 쪼개서 완성해야 하는 것이 과제다.
리스트 삭제, 추가, 수정, 드래그 앤 드롭 등등 독립적인 components는 아니기 때문에
Custom Hooks를 만들어 사용해보기로 했다!
팀원분이 제안해주신 Recoil도 짧은 강의를 들으며 느낌?만 살짝 스쳤ㄷr ....
모든게 익숙치 않기 때문에, 팀원분들과 함께 배워가며 성장해야겠다 ✊🏼
오늘 배운 것 🖌
1. Custom Hooks
-
useState, useEffect 등등 hook을 사용하며 보기 좋은 코드를 작성할 수 있다.
하지만! 반복되는 훅 메소드들을 하나로 줄이고, 더 간결하고 보기 좋은 코드를 만들 수 있는 것이 custom hooks다.
custom hook은 개발자 본인이 직접 hook을 만드는 것! -
custom hook의 이름은
use로 시작해야한다. 무조건!! ex)useDragDrop -
hooks라는 디렉토리 따로 만들기! custom hooks가 많아진다면 디렉토리 구조가 복잡해질 수 있다. 그때그때 꺼내서 사용하기도 편리하도록.
2. Recoil
-
왜?
일단 왜 Recoil을 사용할까? (기업협업 나갔을 때, redux로 울고불고 했던 때가 기억이 난다..)
- 리코일은 기존의 리덕스와 MobX 같은 상태관리 도구들에 비해 가볍고 유연하게 사용할 수 있는 라이브러리이다. 이것 만으로도 recoil을 사용할 이유 만족,.
-
Atoms
- 아톰은 유니크 키 값이 필요하다. (같은 키 값을 두개의 아톰이 들고 있으면 오류남)
const fontSizeState=atom({
key: 'fontSizeState',
default: 14,
})- useRecoilState
- 컴포넌트에서 아톰을 읽고 쓰기 위해서는 useRecoilState라는 훅을 사용한다. 리액트의 useState와 다른점은 상태는 컴포넌트 간에 공유가 가능하다는 것
const [fontSize, setFontSize]=useRecoilState(fontSizeState);Ps. Selectors에 대해서는.. 적용해보고 다시 정리할 것 🤯
내일 할 일 🔥
- 오늘 만든 drag and drop 코드 css 추가, 코드 뜯어보기
- 개인 과제 시작하기
개발자