코딩 오름길

*다크모드 설정 App.tsx function App() { const [isDark, setIsDark] = useState(false); const toggleDark = () => setIsDark((current) => !current); return ( Toggle Mode ); } * react-hook-form import import {useForm} from "react-hook-form" register = onChange 이벤트와, value, useState를 모두 대체해준다. watch = form의 입력값들의 변화를 관찰 할 수 있게 해주는 함수 const {register, watch} = useForm(); ... register 만적으면 input에 정보들이 들어온다 이제 ..

* useParams() Router.tsx function Router() { return ( ); } Coin.tsx import { useParams } from "react-router-dom"; function Coin() { const { coinId } = useParams(); console.log(coinId); return Coin : {coinId} ; } export default Coin; useParams를 써서 Route에 있는 path 값을 가져와서 쓸수있다! * 랜더링을 막기위해 state 값을 전달하는 법 (기존에 있던 데이터를 다시 api에서 불러오게 되면 랜더링이 되는데 그것을 막기위해 state를 쓴다 !) {coins.map((coin) => ( interface ..

Theming styled components는 ThemeProvider wrapper 컴포넌트를 통해 전체 테마를 지원합니다. 주로 다크모드 할때 쓰인다! 이 컴포넌트는 컨텍스트 API를 통해 자체 아래에 있는 모든 React 구성 요소에 테마를 제공합니다. 렌더 트리에서 모든 스타일 구성 요소는 여러 수준의 깊이에 있는 경우에도 제공된 테마에 액세스할 수 있습니다. ex) ThemeProvider theme={theme} https://styled-components.com/docs/advanced styled-components: Advanced Usage Theming, refs, Security, Existing CSS, Tagged Template Literals, Server-Side Ren..

Styled-components * 기존에 있던 styled components에 중복되는 css가 많을때 효율적으로 코드를 짜는 법 const Father = styled.div` display: flex; `; const Box = styled.div` background-color: ${(props) => props.bgColor} ; width: 100px; height: 100px; `; function App() { return( ); } 이런식으로 Box 2개가 비슷한 css를 쓰고 있으면, Box 1 , Box2로 나뉘는 것이 아니고 props를 이용해서 코드를 더 간결하게 할 수 있다. * 기존에 있던거에 새로운 css만 넣어 추가하고 싶을 때 const Box = styled.div` ..