부트캠프교육중301 [TS] event.currentTarget.value event: React.FormEvent 이렇게 해서 이 함수가 InputElement에 의해서 실행될것을 아는거다. const onChange = (event: React.FormEvent) => console.log(event.currentTarget.value); 타입스크립트에서는 event.target.value가 아니고 event.currentTarget.value 이거 해주면된다. 2023. 8. 20. [TS] TS에서 props하는법 interface CircleProps { bgColor: string; } function Circle({ bgColor }: CircleProps){ return ; } export default Circle; 2023. 8. 18. [React] dark모드, white모드의 첫걸음 # theme - 기본적으로 모든 색상들을 가지고 있는 object - 모든 색깔을 하나의 object 안에 넣어놨기때문에 매우 유용하다. 왜냐하면, 나중에 색깔을 바꿀때 그냥 그 object만 바꿔주면 된다. index.js에서 import { ThemeProvider } from "styled-components"; const darkTheme = { textColor:"whitesmoke", backgroundColor:"#111", } const lightTheme = { textColor:"#111", backgroundColor:"whitesmoke", } ReactDom.render( // 여기추가 // 여기추가 , document.getElementById("root") ); 그리고 app.. 2023. 8. 18. [React] styled component 활용 # Circle 컴포넌트에서 Box의 컴포넌트 css를 사용하려고 할때 이렇게 하면 Box의 모든걸 Circle에서도 쓴다. const Box = styled.div` background-color: ${(props)=> props.bgColor}; width: 100px; height: 100px; `; const Circle = styled(Box)` border-radius: 50px; `; # 어떤 component의 모든걸 같게 하고 싶지만, html 태그만 바꾸고 싶을때 const Btn = styled.button` color: tomato; `; Login Go home 이렇게 하면 button태그가 a태그로 바뀐다. # animation적용할거면 keyframes 이용해야 한다. cons.. 2023. 8. 18. 이전 1 ··· 5 6 7 8 9 10 11 ··· 76 다음