728x90 반응형 타입스크립트11 타입스크립트 Type Aliases Type 'string | string[]' is not assignable to type 'string'. Type 'string[]' is not assignable to type 'string'.ts(2322) 타입스크립트로 작업을 하다가 위와같은 에러가 발생 했습니다. 'string | string[]’ 을 string에 넣을 수 없다는 말인데 이유는 Type Aliases때문입니다. type Fruit = "Orange" | "Apple" | "Banana"; 타입스크립트에서는 위와 같이 타입을 만들 수 있습니다. Fruit 에는 "Orange" 또는 "Apple" 또는 "Banana”을 넣을 수 있습니다. type Fruit = "Orange" | "Apple" | "Banana"; let f.. 2022. 5. 29. 리액트 타입스크립트 zustand - 셀프 개발자 코딩 부트캠프 리액트에서 상태 관리를 할 때 대부분 리덕스(Redux)라는 것을 사용하는 것 같았다. 쉬운 작업도 복잡하게 되어 있는 것 같아서 심플한 것 찾아봄. zustand라는 게 좋아 보임. 아래는 github 주소. https://github.com/pmndrs/zustand import create from 'zustand' interface CounterState { count: number; increase:()=>void; decrease:()=>void; } const useStore = create(set => ({ count: 0, increase: () => set(state => ({ count: state.count + 1 })), decrease: () => set(state => ({ c.. 2022. 3. 23. 리액트 타입스크립트 css, sass, styled-components 리액트 컴포넌트를 스타일링할 때 여러 가지 방법 있다. css : html에서 기본적으로 사용하는 방법 sass : 확장된 css 로 작성하고 컴파일해서 사용 styled-components : 자바스크립트 안에 스타일 작성 개인적으로는 styled-components 이 가장 좋아 보였다. 정의한 스타일을 컴포넌트 처럼 사용 가능하다. props를 넘겨줄 수 있어서 상황에따라 마음데로 조절가능하다. 잘 쓰면 코드를 많이 줄일 수 있을듯 하다. react native 에서도 사용할 수 있다. # 공식사이트 https://styled-components.com/ # 참고 https://github.com/rebassjs/rebass https://github.com/styled-components/awes.. 2022. 3. 21. 리액트 타입스크립트 array map - 셀프 개발자 코딩 부트캠프 function App() { let names:Array = ["사과", "고구마", "오렌지"]; let nameList = names.map(name => ({name})); return ( {nameList} ); } export default App; array 를 render 부분에서 보여줄 수 있다. map 은 c# linq에 있는 select 와 비슷하다. c# 에 있는 extension method같은 기능이 typescript에 있다면 위와 같은 상황에서 편할것 같다. 귀찮아서 조사는 안해봄. https://jinibh.tistory.com/711 리액트 useState - 셀프 개발자 코딩 부트캠프 import React, { useState } from 'react'; functio.. 2022. 3. 15. 리액트 타입스크립트 useRef - 셀프 개발자 코딩 부트캠프 useRef를 이용하면 DOM을 직접 참조할 수 있다. import { createRef } from "react"; function App() { let refInput = createRef(); function handleClick(e:React.MouseEvent) { refInput.current?.focus(); } return ( Click!! ); } export default App; 버튼을 클릭하면 input에 포커스 된다. import { createRef } from "react"; function App() { let refDiv = createRef(); return ( ); } export default App; div 를 참조할수도 있다. https://jinibh.tistor.. 2022. 3. 15. 리액트 타입스크립트 onClick, onChange 코드 - 셀프 개발자 코딩 부트캠프 import { useState } from "react"; function App() { let [value, setValue] = useState(""); function handleChange(e:React.ChangeEvent) { setValue(e.target.value); } function handleClick(e:React.MouseEvent) { alert(value); } return ( Click!! ); } export default App; https://jinibh.tistory.com/711 리액트 useState - 셀프 개발자 코딩 부트캠프 import React, { useState } from 'react'; function App() { let [number, set.. 2022. 3. 15. 이전 1 2 다음 728x90 반응형
