전체 글
-
React+TypeScript Form 형식을 공부해보자!React/React+TypeScript 2023. 2. 22. 02:58
📌 e : React.FormEvent ...(중략) const [value, setValue] = useState(""); const onchange = (e: React.FormEvent) => { const { value } = e.currentTarget; setValue(value); }; const onSubmit = (e: React.FormEvent) => { e.preventDefault(); console.log(`Hello ${value}`) }; return ( Log in )
-
? / ?? 리액트 타입스크립트 props 전달할때 optional Chaining & null CheckReact/React+TypeScript 2023. 2. 21. 20:37
📌 지난 시간 리액트 타입스크립트 기반으로 props 를 전달해주는 방법을 배웠다. optional chaining 은 해당 prop은 전달되지 않을 수도 있다는 표현을 해줄 때 사용한다. personobj.name 은 .(chaining) personobj?.name 은 ?.(optional chaining) 이 된다. 즉 왼쪽 값이 비어있다면 해당 코드를 undefined 처리하라는 것과 같다. 아래 코드에서 추가로 보면 // interface 를 통해 전달하려고 하는 props 들의 타입을 지정해준다. interface personobj { name : string, age? : number // 🔥age가 비어있을 수도 있다. 라는 것을 암시한다. //age : number | undefined ..
-
React + TypeScript 에서 props 전달하는 법 with styled-componentsReact/React+TypeScript 2023. 2. 21. 19:51
📌 TypeScript 타입스크립트 기반 React 에서 props 를 전달하려면 어떻게 해야할까? // interface 를 통해 전달하려고 하는 props 들의 타입을 지정해준다. interface personobj { name : string, age : number } // 전달하려는 props 뒤에 interface 를 지정해준다. const SayHello = ({name, age} : personobj) =>{ return( sayHello {name} you are {age} ) } function App() { return } 📌 그렇다면 Styled-components 스타일 컴포넌트에 props 를 전달하려면 어떻게 해야할까? interface BoxProps { bgcolor : s..
-
Styled-Components 의 애니메이션 과 Pseudo Selector 를 배워보자!React/Styled-Components 2023. 2. 20. 21:34
📌 css 에서 keyframe 을 사용한 animation 은 styled-components에서 어떻게 구현할까? ...(중략) const animation1 = keyframes` from { transform:rotate(0deg); border-radius: 0px; } to { transform:rotate(360deg); border-radius: 100px; } `; ...(중략) const AnimationBox1 = styled.div` height: 200px; width: 200px; background-color: black; animation: ${animation1} 10s linear infinite; `; ...(중략) 📌 styled-components 안에서 pseudo..
-
Styled-Components 의 as 와 attrs 를 알아보자!React/Styled-Components 2023. 2. 20. 20:27
📌 스타일 속성은 같은데 태그만 바꾸고 싶을 땐 어떻게 할까? as 를 통해 기존 button 태그였던 것을 a 태그로 바꿀 수 있다! return button 📌 태그에 속성을 부여하고 싶다면 attrs를 사용해보자! 스타일 컴포넌트로 생성한 Input 은 required 와 maxLength 를 속성으로 가질 수 있다! const Input = styled.input.attrs({ required: true, maxLength: 10 })``;
-
Styled-Components 리액트 스타일 컴포넌트 props 와 extendingReact/Styled-Components 2023. 2. 20. 17:50
📌 스타일 컴포넌트에서 반복되는 코드를 줄일 수는 없는걸까? const BoxOne = styled.div` background-color: red; width: 100px; height: 100px; `; const BoxTwo = styled.div` background-color: blue; width: 100px; height: 100px; `; 📌 해결방안 : props 로 변수를 지정해주며 styled( ) 로 확장할 수 있다. ...(중략) const Box = styled.div` display: flex; align-items: center; background-color: ${(props) => props.bgcolor}; width: 100px; height: 100px; `; con..
-
Styled-Components / React 리액트 스타일 컴포넌트 공부하기React/Styled-Components 2023. 2. 20. 16:47
📌 설치하기 vscode 터미널에 npm i styled-components js file에 임포트해준다 : import styled from "styled-components" 📌 사용하기 : Html + CSS vs Styled-Components 비교 import styled from "styled-components"; const Father = styled.div` display: flex; `; const BoxOne = styled.div` background-color: red; width: 100px; height: 100px; `; const BoxTwo = styled.div` background-color: blue; width: 100px; height: 100px; `; cons..
-
자바스크립트 prototype 이란 무엇일까?Javascript/JS 문법 2023. 2. 18. 19:08
JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다. 모든 객체타입의 자료형(객체, 함수 ,배열)들은 메소드와 속성들을 상속 받기 위해 프로토타입 객체(prototype object)를 가진다는 의미입니다. 무슨 말인지 이해가 안되니 조금 더 쉽게 생각해봅시다.아래 두 문장은 동일하게 [ 4 , 5 , 1 ] 이라는 배열을 생성하는 방식입니다. const arr = [4,5,1] const arr = new Array(4,5,1) 그런데 우리는 sort() , 나 length 라는 메소드를 집어넣어 둔 적이 없습니다. console.log(arr.sort()) // [1,4,5] console.log(arr.length) // 3 그럼에도 불구하고 s..