본문 바로가기

React58

React17일차-Portal,fowardRef 오늘은 portal,forwardRef라는 API에 대해서 알아 보겠습니다. 우선 create-react-app으로 만들어주시고 코드 열어주세요 public/index.html로 이동 거시 바디 부분 밑에 추가해주세요 src/index.css로 이동해서 #modal { position: absolute; top: 0; left: 0; } 추가 해주세요 src/component/Modal.jsx 이렇게 폴더랑 파일 만들고 import ReactDOM from "react-dom"; const Modal = ({ children }) => ReactDOM.createPortal(children, document.querySelector("#modal")); export default Modal; 작성해주세요.. 2022. 2. 6.
React16일차-최적화로 돌리기 오늘은 최대한 랜더나 디스마운트나 이런것을 줄일수 있는 것에 대해서 알아보겟습니다. 어떻게 하면 마운트가 되고 어떻게하면 마운트가 안되고 이런것을 중점을 봐주시면 좋겠습니다. 오늘은 따라하면 좋겠지만 따라하지 않고 글만 보고 이해 할수 있다면 꼭 따라하지 않아도 되요 안따라하실거면 굵은 글자만 읽고 지나가시면 됩니다. 우선 create react app 만들고 npm start 해주세요 그리고 src/App.js를 변경 오늘은 App.js만 변경 할것 입니다 import "./App.css"; import React from "react"; class Foo extends React.Component { componentDidMount() { console.log("foo didmount"); } com.. 2022. 2. 5.
React15일차-CRA -UnitTest(jest) 이제 create-react-app에서 test를 해보겠습니다. creat-react-app만들어주시고 터미널에서 npm test 해주세요 기본적으로 한개가 있어서 그것이 자동으로 실행되겠습니다. src/App/test.js가 테스트 파일입니다 그럼 우선 component파일 만들어주시고Button.jsx만들어주세요 import { useEffect, useRef, useState } from "react"; const Button_text = { normal: "버튼이 눌리지 않았다.", clicked: "버튼이 방금 눌렸다.", }; export default function Button() { const timer = useRef(); const [message, setMessage] = useSt.. 2022. 2. 4.
React15일차-UnitTest(jest) 어제는 오랜만에 친구를 만나고 와서 쉬었습니다....ㅎㅎㅎ 오늘은 UnitTest에 대해서 알아보겠습니다. 즉 전체가아닌 일부분중 하나만 검사하는 것이라고 생각하시면 됩니다. 여러가지가 있지만 create-react-app에서 하는 jest에 대해서 알아보겠습니다. 우선 파일 만들 vscode열어서 npm init -y 하고npm i jest -D로 jest 설치해주세요 이렇게 나오고 package.json으로 가서 "test": "echo \"Error: no test specified\" && exit 1" 를 "test": "jest" ㄹ로변경해주세요 npm test를 치면 jest가 실행되도록 해주는 것입니다. 이제 ex.test.js를 만들어서 테스트 할 내용을 하나 하나씩 만들어 봅시다. 우선.. 2022. 2. 4.

티스토리툴바