Coding/typescript6 React - Typescript + Hook(마무리) 기존에 있는 data에 data 추가를 했다.(데이터 안에 id에 또 한번 추가 하려고 하니 번거로움이 있어서 일단은 빼고 구현...ㄷㄷ) 그리고 수정 기능이나 삭제기능은 기존에 있는 데이터를 필터만 해줄뿐이여서 여기서 마무리... App.tsx 파일에 추가한 내용은 addData 함수와 Main component에 함수를 내려주는 것. *기존에 있는 data를 list에 받아오기 때문에 list에 있는 기존 data에 concat 메소드를 이용해서 합친다. Main.tsx *App.tsx에서 받아오는 함수를 받아오기 위해 interface에 함수 type과 인자로 들어오는 type 설정 *handleRegister 함수에서 input 값을 들어온 것을 받아와서 가공한다. *handleClick에서 in.. 2020. 11. 18. React - Typescript + Hook (4) 검색기능을 추가했다. 글자를 입력하면 바로바로 검색되는 기능으로 구현. App.tsx 파일에 기능들을 추가했다. 그리고 Main.tsx에 handleSearch 함수를 내려주고 input값을 다시 받아와서 PhoneList.tsx에 다시 내려주는 방식을 채택했다. App.tsx import React, { useState, useEffect } from "react"; import Main from "./Main"; import PhoneList from "./PhoneList"; import data from "./data"; interface EmptyArray { nickname: string; } function App() { const [list, get_list] = useState(data).. 2020. 10. 29. React - TypeScript + Hook(3) 이전에 계획 했던 대로 CSS를 적용했다. CSS를 하기 위해 많은 라이브러리가 있지만, Styled-components를 활용했다. 닫기 같은 Icon은 Bootstrap을 활용했고, 이미지들은 unsplash.com에서 받아와서 활용했다. *Styled-components 설치방법 npm install @types/syled-components *bootstrap 설치방법 npm install @types/bootstrap 대략적인 구도는 이렇게 적용하였다. Main.tsx(윗부분이 react+typescript code / 아랫부분이 styled componets code) import React from "react"; import logo from "./image/logo.jpg"; import.. 2020. 10. 28. React - TypeScript + Hook(2) 면접, 코딩과제로 인해서 2주간 신경을 못 써서... 이전 초기화 시킨 TypedScript + Hook에서 기존 기능들을 하나씩 추가할 예정이다. 전체적으로 파일 형태를 보면 컴포넌트는 이렇게 구성했다. 아직 서버를 구상하고 있지 않기 때문에, 가상 파일을 만들고 거기서 data를 불러 오려고 한다. App.tsx에 자식 component를 불러왔다. Main과 Phonlist를 불러 왔고, 자식 component에 목업 데이터를 보내주는 방식을 취했다. 이부분을 이해하는데 오래 걸렸다. "부모 component에서 자식 component로 props를 내려줄 때, 자식 component에서 Type을 정해줘야 한다." 면접, 과제 할 때, 짬짬이 찾아 봤을 때, 이해하는데 오래 걸렸던 부분이었다. 그.. 2020. 10. 27. 이전 1 2 다음 반응형
