본문 바로가기
  • 삽질하는 자의 블로그
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.
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. infinite 옵션과, from, to 를 이용해 빙빙 돌아가는 할일 만들기 컴포넌트 import styles from "./Todos.module.css"; const Todos = () => { return ( 할일 ); }; export default Todos; css .maindiv { height: 3rem; width: 5rem; } .rotation { font-size: 2rem; text-align: center; animation: rotation infinite 500ms linear; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 하핫 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.
1. React 에서 부트스트랩을 사용해보자 부트스트랩의 기본 사용 1. 부트스트랩 CDN 설치 https://getbootstrap.com/docs/5.2/getting-started/introduction/ 1) Create a new index.html file in your project root. Include the tag as well for proper responsive behavior in mobile devices. 인덱스 루트파일을 만들어라, 헤더가 있는 것으로 * 이미 React 만들때 만들어져있지 2) "index.html" 에 CSS 와 Javascript 를 가져오자 css : javascript : 3) 사용한다 2. 원하는 항목을, 복사해 가져와서, 컴포넌트로 뺀 후, 사용한다. ( import 하는 방법도 있지만 .. 2022. 12. 22.

티스토리툴바