728x90 반응형 개발자11 리액트 타입스크립트 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. 리액트 타입스크립트 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. 리액트 타입스크립트 props 값 전달하기 - 셀프 개발자 코딩 부트캠프 부모가 자식 컴포넌트 에게 값을 넘겨줄때 사용한다. App.tsx import MyComp from './MyComp'; function App() { let name = "리액트"; return ( {name} ); } export default App; 위와같이 부모가 자식에게 보내줄 수 있다. type MyCompProps = { title: string, num: number; } // typescript에서는 propTypes를 지정 안해도 될것 같다. const defaultProps = { title : "Default Title", num : 0 }; // props라는 이름은 아무렇게나 지정도해 상관 없는것 같다. 바꿔도 잘 동작한다. const MyComp = (props:MyCompP.. 2022. 3. 15. 리액트 useState - 셀프 개발자 코딩 부트캠프 import React, { useState } from 'react'; function App() { let [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {number} -1 +1 ); } export default App; useState를 사용하면 두 개의 값이 튀어나온다. 내가 설정한 초기값을 갖는 변수(number)와 그 변수를 세팅할 수 있는 함수(setNumber)가 나온다. button을 클릭해서 버튼을 클릭해서 onIncrease, onDecrease 가 실행되면 setN.. 2022. 3. 6. 이전 1 2 다음 728x90 반응형
