본문 바로가기
  • 삽질하는 자의 블로그
13. React 에서 MVVM 모델 구현해보기. 이거 맞나? 틀린 거 같음... Redux-toolkit 없이 과제가 있다. MVVM 모델을 구현하여, REACT 앱을 만들어보는 과제였다. 우선 내가 아는 MVVM 모델을 생각해보면... 1. VIEW 에서 ACTION 을 VM 에 날린다. 2. 커맨드 패턴으로 VM 에 ACTION 을 전달한다. 3. VM 은 MODEL 에게 데이터를 요청한다. 4. MODEL 은 VM 에게 데이터를 응답한다. 5. VM 은 응답받은 데이터를 처리한다. 6. VM 은 VIEW 와 BIDING 하여 화면에 나타낸다. 이때, VM 은 VIEW 와 바인딩 되어있기에, 바로 처리가 된다. 하여튼 그래서 어떻게 해보았냐면... 1. MODEL (App.tsx) 모든 Data 를 저장하는 저장공간을 만들었다. Redux-toolkit 을 사용하지 않고 하려니 고통이 이만저만 삼만사만이 아니.. 2023. 1. 16.
12. helper 함수에 fetch를 정의하고, 가져올 때 Type을 지정해보자 매번 실패했던 fetch 가져올때 responseData 의 Type 지정 실패로, State 에 넣지 못했던 것을 드디어 해결했따! helper / fetch.ts export const getEurInfo = async ():Promise => {// fetch 를 할때 Promise 를 받을 타입을 지정 try { const response = await fetch( "https://quo...EUR" ); if (!response.ok) { throw new Error("failed to fetch data"); } const responseData = await response.json(); const krweurData = responseData[0]; .. 2023. 1. 16.
11. type? interface? 무엇을 써야 할까? 타입을 지정하기 위해서는, type 과 interface 를 사용한다. interface PersonInterface { name: string age: number } const person1: Person = { name: 'ms', age: 29, } type PersonType = { name: string age: number } const person2: PersonType = { name: 'js', age: 30, } 각각의 사용 이유에 대해 알아보도록 하자 1. 사용하는 데이터의 형태 interface PersonInterface { // 척봐도 객체만 사용가능하게 생겼다. name: string age: number } type PersonType = {// 여러가지 타입에 전부 사용 .. 2022. 12. 29.
10. Redux-toolkit 과 함께 Typescript 사용하기 (2) 실전, useRef 를 이용해 받은 값, Redux Store 에 넣기 1. Todo-Slice 만들기 import { createSlice, PayloadAction } from "@reduxjs/toolkit"; export type TodoType = { todos: { todoTitle: string; todoText: string }[]; // 타입 aliases }; const initialState: TodoType = { todos: [{ todoTitle: "첫번째할일", todoText: "일어나기" }], // 초기값 설정 }; const TodoSlice = createSlice({ name: "todos", initialState, reducers: { addTodo( state, action: PayloadAction // PayloadAction .. 2022. 12. 27.
9. Redux-toolkit 과 함께 Typescript 사용하기 (1)기본 사용 최고의 레퍼런스 https://bluelight.co/blog/redux-toolkit-with-typescript#Getting-Started-with-the-Redux-Toolkit Redux Toolkit with Typescript: How to Get Started Learn how to use Redux with Typescript to set up production-level state management for web applications. bluelight.co 1. 슬라이스 만들기 1. "initialState" 의 "타입"을 정해야한다. 2. "PayloadAction" 을 통해, "action 으로 받은 payload 의 타입을 정해야 한다". < 코드 "store/ms-Slic.. 2022. 12. 27.
8. 코드의 타입을 모르겠다고? 걱정하지 말자! 마우스를 올려봐! 1. useState 를 사용하고 싶은데 타입을 모르겠다? 마우스를 올리면 친절하게 설명해준다. 2022. 12. 26.
7. React와 함께 TypeScript 사용하기(6), [ Context ] import { useState } from "react"; import { createContext } from "react"; const msContext = createContext void; }>( { name: "ms", addTodo: (textId) => { return textId; }, }); export const msContextProvider: React.FC = (props) => { const [name, setName] = useState(""); const addTodo = (textId: string) => { return textId; }; const context: { name: string; addTodo: (textId: string).. 2022. 12. 26.
6. React와 함께 TypeScript 사용하기(5), [ State ] 1. State 다루기 const items = [ { name: "ms", age: 3, address: "csd-x5", phone: 323 }, { name: "cs", age: 5, address: "csd-x7", phone: 2323 }, ]; function App() { const [todo, setTodo] = useState([]); 2. 타입 별칭을 이용해, 아웃소싱하자 import { Todo } from "./models/todos"; const items = [ { name: "ms", age: 3, address: "csd-x5", phone: 323 }, { name: "cs", age: 5, address: "csd-x7", phone.. 2022. 12. 26.
5. React와 함께 TypeScript 사용하기(4), [ props.children 의 사용, Layout 만들기] props.children 을 사용하기 위해, 컴포넌트 함수에 React.FC 타입을 지정하면, 자동으로, children 이 나온다고 한다. 하지만 나는 React18 버젼을 쓰고있다. https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions How to Upgrade to React 18 – React Blog As we shared in the release post, React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applic.. 2022. 12. 25.
4. React와 함께 TypeScript 사용하기(3), [ 상향식 State 이동 (함수) 사용하기, props 와 함수 ] 상향식 State 이동을 사용해보자 = ( 상위컴포넌트에서 하위로, 함수를 넘겨주고 실행시키자 ) 혹시 까먹었을 수 있으니 타입스크립트가 없는 코드는 ======================================== function App() { const onAddTodo = (text) =>{ console.log(text) } return ( ); } export default App; ======================================== import React from "react"; import { useRef } from "react"; const NewTodo = (props) => { const { onAddTodo } = props co.. 2022. 12. 24.
3. React와 함께 TypeScript 사용하기(2), [ useRef 와 양식 제출, event ] useRef 를 이용한 양식 제출 import React from "react"; import { useRef } from "react"; const NewTodo: React.FC = () => { const textRef = useRef(null); // 1* const submitHandler = (event: React.FormEvent) => {// 2* event.preventDefault(); const textData = textRef.current?.value; // 3* ? 가 있는 이유. ?는 자동생성 console.log(textData); }; return ( 제출 ); }; export default NewTodo; 1*. 특수한 타입의"HTML 요소"(우리가 연결한 것은 INP.. 2022. 12. 24.
2. React와 함께 TypeScript 사용하기(1), [ props 와 React.FC , 타입 아웃소싱, Type Aliases ] https://ko.reactjs.org/docs/static-type-checking.html#adding-typescript-to-a-project Static Type Checking – React A JavaScript library for building user interfaces ko.reactjs.org 1. 리액트와 함께 타입스크립트 사용하기 만들때 함께 설치한다. npx create-react-app my-app --template typescript 2. 만들고 나면 "자바스크립트는 tsx 로 변경"되어있고, 패키지에는 "@types/jest": "^27.5.2", "@types/node": "^16.18.10", "@types/react": "^18.0.26", 가 추가되어있다. 파.. 2022. 12. 23.

티스토리툴바