본문 바로가기
  • 삽질하는 자의 블로그
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.
1. TypeScript 의 기본 설명과 문법, 그리고 redeclare 오류 타입스크립트에 대하여 1. TypeScript 는 JavaScript 의 슈퍼셋(Superset) 이다. 이미 자바스크립트의 기능은 전부 존재하고, 추가적인 기능들을 넣어둔 슈퍼셋이다. 2. JavaScript 는 "동적 타입" 언어이다. 자바스크립트는 동적 타입 언어이다. function add (a,b){ return a + b } const result = add(2,3) // 5 const result2 = add("2","3") // "23" 위의 파라미터 a 와 b 의 타입은 string 일 수도, number 일 수도 있다. 이는 "암묵적 타입 변환" 에 의해, 판단되고, 변하게 된다. 이게 좋을 수도 있다. 하지만, 유동성이 있다는 것은 그만큼 "버그" 를 불러온다. 3. TypeScrip.. 2022. 12. 23.
3. React Transition Group 으로, 자체 애니메이션 컴포넌트 만들기 React Transition Group 의 두번째 기능으로 CSSTransition 이 존재한다. CSSTransition 은 Transition 과는 달리, state 를 주어주지 않고, classNames 를 지정하면 자동으로 className 이 state 에 따라 달라진다. 혹은, className 을 상태에 따라 직접 지정할 수 있다. 가장 중요한 점은 컴포넌트 자체를 감싸기만 해도, 전체에 대한 애니메이션 효과를 만들 수 있다는 것이다. 무슨말인지 모르겠지! 직접 보면서 이야기해보자! 이 기능을 사용하는 가장 큰 이유인, 컴포넌트 자체를 애니메이션이 있는 상태로 만들어 보자. 0. CSSTransition 의 기본 설명 이거다! [원래대로라면] classNames ={"fade"}라고 할당하.. 2022. 12. 23.
2. React Transition Group 의 기본 사용 https://reactcommunity.org/react-transition-group/ React Transition Group Exposes simple components useful for defining entering and exiting transitions. React Transition Group is not an animation library like React-Motion, it does not animate styles by itself. Instead it exposes transition stages, manages classes and group elem reactcommunity.org 1. 설치와 기능 npm install react-transition-group --s.. 2022. 12. 22.
1. CSS 전환과 애니메이션의 한계 CSS 전환과 애니메이션 1) CSS 전환 (tansition) : "class 의 변경에 의해" 스타일이 변화할때, 변환되는 시간을 조절해서, 애니메이션 "처럼" 보이게 만드는 방법 tansition : all 300ms ease-out 처럼 사용하는 그것 2) 애니메이션 ( animation ) : 컴포넌트가 동작할때, 애니메이션을 주는 진짜 애니메이션 CSS 전환의 한계 : 컴포넌트가, css 에 의해 변경될 때 만 가능하다. 조건에 만족하면, DOM에서 생성되거나 사라지는, Modal 과 컴포넌트 들에서는 사용 자체가 불가능하다. CSS 애니메이션의 사용 1) animation 옵션을 사용하여, [애니메이션 이름], [시간], [타이밍] 을 정한다. 2) @keyframes 을 사용하여, [애니메.. 2022. 12. 22.
9. [리액트- 라우터 - 배포시 주의사항] SPA 의 장점을 잃어버리지 말 것 리액트는 결국 정적 앱이다. ** 리액트앱은 어쨌든 서버측 코드가 없는, "정적 앱" 이라는 것을 반드시 인지하자. ** Nextjs 나, Nodejs 처럼 "서버측 코드가 존재하는 앱이 아니다." React를 만들 때 "서버에 요청"만 할뿐, 우리가 직접 "서버가 되어, 그 요청을 응답" 하는 코드는 없었다. 반면, Nextjs 나, Nodejs 를 만들 때에는, (req,res) 를 통해서, 받은 응답을 검사하고, 응답하는 코드를 작성 할 수 있었다. 그게 REST API 의 핵심이자, "서버측 코드를 보유" 하고 있는 상태이다. 라우터가 있는 앱을 배포할 때 주의 할 것 클라이언트 사이드와 서버사이드에서의 인식 차이를 알아보자. [클라이언트측] 1) 리액트는 SPA 를 만들때 유용한 라이브러리 이다.. 2022. 12. 22.
8. [리액트- 라우터 배포준비- 최적화] LazyLoading 과 React.memo() 1. React.memo() https://dive-into-frontend.tistory.com/79 7. 리액트의 최적화 With React.memo(), useCallback(), useMemo() 서론. 리액트가 작동하는 방식 리액트는 오로지 "컴포넌트" 에만 초점이 맞추어져 있다. 1) 컴포넌트 끼리 props 를 넘긴다던가 [ props 전달 ] 2) 컴포넌트의 State 를 변화시킨다던가 [ internal-component S dive-into-frontend.tistory.com 2. LazyLoading 레이지 로딩이란, 필요할 때, 로딩을 하는 것을 말한다. 기본적인 SPA 의 배포 에서, 클라이언트는, 배포된 사이트를 들어갈때, 모든 자바스크립트를 포함한 코드를 전부 다운받고, 페이.. 2022. 12. 22.
7. V6 업그레이드 방법 기초(1) 0. App 을 감싸는 는 동일하다 1. Switch 대신 Routes, 2. Route의 자식으로, 컴포넌트가 아니라, element 안에 컴포넌트 [v5]=================== // 1. Switch 대신 Routes, // 2. "자식" 대신 "element" [v6]=================== // 1. Switch 대신 Routes, // 2. "자식" 대신 "element" ... 3. exact 의 삭제, 기본적으로 exact, "동시에 렌더되는 라우트를 실행하고 싶다면 (중첩 X ) * " [v5]=================== [v6]=================== // exact 의 제거, 기본적으로 exact 가 들어가있다. // * 을 추가하여, 앞의 경로.. 2022. 12. 22.
6. useHistory, 복잡한 쿼리매개변수와 path 를 가지고 있을 때, 사용방법 복잡한 로직(이라기엔 그냥 긴)으로, 쿼리매개변수가 바뀌고, path 가 많이 길어지면, 가독성이 너무 떨어진다. history.push( `/.../.../.../......... ? xxx= ${(isAscending ? yyy : zzz)}`) 위의 history를 가독성 있는 코드로 변경시키자. history.push({ pathname: "xxx/xxx/xxx/..." search : `?arrangeRule = ${(isAscending ? yyy : zzz)}` }) 마치, useLocation 의 프로퍼티를 보는 듯 하다. 같을 것이다. 두개 모두 "URL" 에 포커스가 맞춰져있는 훅이므로! 2022. 12. 22.
5. onFocus 리스너와 함께하는 Prompt 로 "정말 뒤로 갈건지 한번 딱 물어봐주기" 1. "정말로 이 페이지를 나가시겠습니까?" 가끔 길고 긴 회원가입 칸을 적어나가다, 실수로 "뒤로가기" 를 누를 때가 있다. 절망에 빠지지 않도록 Prompt 를 사용해서 한번 물어보도록 하자. 2. Prompt Prompt 는, 유저의 행동을 추적해, 페이지에서 벗어나려 하는지 확인한다. 그리고 벗어나려 한다면, 준비된 코드를 실행한다. import { Prompt } from "react-router-dom" Prompt : "렌더" 하는 요소로, 1) when : 언제 Prompt 를 실행시킬지(참이라면 실행) 2) message : 무슨 말을 할까 "정말로 나가시겠습니까?"} /> 3. onFocus 이벤트 리스너 onFocus 는 유저가 인풋을 클릭하고, 나면 true 를 반환한다. 4. 유저.. 2022. 12. 22.
4. 잘못된 URL 주소로 들어간다면, Not Found Page 돌려주기 1. 가끔 주소를 잘못 칠 때가 있다. 주소를 잘못 쳤는데, 전혀 이상한 페이지가 나오면, 기분이 상할 수 있다. 그래도, "너는 아직 우리 웹사이트에 있어!" 라고 말하기 위한 자체 제작 Not Found 페이지를 보여주자 2. 와일드 카드 페이지의 사용 와일드 카드 ( * ) 는 "모든 경로" 를 의미한다. Switch 를 통해, 모든 경로에 대해, 순차적으로 하나씩 대조하고 있는데 아무것도 맞는게 없다. 그렇다면 마지막에 "무조건 들어가지는 페이지" 의 path 로 * 을 준비해주도록 하자. import { Route, Switch } from "react-router-dom"; import AllQuotes from "./pages/quotes-all"; import QuotesDetail fro.. 2022. 12. 22.

티스토리툴바