fullfish의 개발자 도전기

사용하기 쉬운 유효성 검사를 통해 성능이 뛰어나고 유연하며 확장 가능한 form입니다. npm i react-hook-form 아래 처럼 쓰면 저런 객체가 만들어짐 const {register} = useForm() console.log(register('toDo')) watch는 값을 추적함 (state를 만들고 onCahge함수를 만들고 input에 props를 주는것과 같음) const { register, watch } = useForm() console.log(watch) 예를 들어 여러개의 from이 있을때 원래는 하나하나 state만들고 그랬어야하는데 function ToDoList() { const { register, watch } = useForm() console.log(watch()..

npm i recoil // index.tsx root.render( ) atom 만들기 // src/atoms.tc import { atom } from 'recoil' export const isDarkAtom = atom({ key: 'isDark', // 유일해야함 default: true, }) atom 받아오기 // src/App.tsx const isDark = useRecoilValue(isDarkAtom) atom 값 바꾸기 // coins.tsx const setDarkAtom = useSetRecoilState(isDarkAtom) const toggleDarkAtom = () => setDarkAtom(prev => !prev) Toggle Mode useRecoilValue와 us..

https://full-fish.github.io/nomardcoders-ReactJSmasterClass-cryptoTracker/ React App full-fish.github.io 시간이 없어서 css는 안건드렸다...

Route src/routes 폴더에 각각의 페이지 컴포넌트 만들고 src/Router.tsx에 아래처럼 라우팅을 한다 // Router.tsx import { BrowserRouter, Switch, Route } from 'react-router-dom' import Coin from './routes/Coin' import Coins from './routes/Coins' function Router() { return ( ; ) } export default Router useParams로 해당 url의 params를 가져올 수 있다 // /src/routes/Coin.tsx import { useParams } from 'react-router' interface Params { coinId: ..

npx create-react-app 내 앱 이름 --template typescript npm i --save-dev @유형/styled-components npm i styled-components // index에서 root에러가 난다면 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) //이렇게 수정 interface : object shape(객체모양)을 TypeScript에게 설명해주는 개념 interface PlayerShape { name: string age: number } const sayHello = (playerObj: PlayerShape) => `Hello ${playerObj.nam..

tag에 style 직접 먹일 때 일반적 사용법 : 이름을 붙여 줄 수 있다 const BoxOne = styled.div` background-color: teal; width: 100px; height: 100px; ` props내리기 가능 const Box = styled.div` background-color: ${props => props.bgColor}; width: 100px; height: 100px; ` 컴포넌트 extend하기 const Box = styled.div` background-color: ${props => props.bgColor}; width: 100px; height: 100px; ` const Circle = styled(Box)` border-radius: 50px..