본문 바로가기

FA/React

(16)

20221001 React Hooks - useRef 변수관리, DOM 요소 접근 Hook의 규칙 React 함수 구성 요소 내에서만 호출할 수 있음(반드시 Functional Component 안에서 사용해야 함) 구성 요소의 최상위에서만 호출할 수 있음 조건문, 반복문 안에서 못 씀 useRef 렌더링 간에 값을 유지 업데이트 시 다시 렌더링되지 않는 변경 가능한 값을 저장하는 데 사용 DOM 요소에 직접 액세스하는 데 사용 //생성하고 DOM 노드에 연결하기 const ref = useRef(); // ... return 레프레프; //DOM 노드 참조하기 const node = ref.current; if (node) { // node를 사용하는 코드 } 변화는 감지해야 되지만, 그 변화가 렌더링을 발생시키면 안되는 값을 다룰 때 편리 import { useState, useE..

20220928 React에서 인스타 스토리처럼 하기 react-insta-stories mohitk05.github.io 인스타스토리처럼 표현가능한 라이브러리 1. 설치 yarn add react-insta-stories GitHub - mohitk05/react-insta-stories: A React component for Instagram like stories A React component for Instagram like stories. Contribute to mohitk05/react-insta-stories development by creating an account on GitHub. github.com import Stories from "react-insta-stories"; const initialStories = [ //이걸 ..

20220927 React에서 sweetalert2 사용하기 1. 설치 npm install --save sweetalert2 sweetalert2-react-content 2. import 해주기 import Swal from "sweetalert2"; 3. const로 선언 const deleteAlert = () => { Swal.fire({ title: "일정삭제", text: "정말로 삭제하시겠어요?", //난 이미지 저장해서 사용했지만, url로 불러올수도있음/이미지 크기 지정 %및 px 등 사용안됨 imageUrl: calendarIcon, imageWidth: 50, imageHeight: 50, //취소버튼 표시 및 버튼 색상 텍스트 showCancelButton: true, confirmButtonColor: "#47AFDB", cancelBut..

22020926 React Hooks - useState, useEffect Hook은 class를 작성하지 않고도 state등 다른 React의 기능들을 사용할 수 있도록 한다. Hook의 규칙 React 함수 구성 요소 내에서만 호출할 수 있음(반드시 Functional Component 안에서 사용해야 함) 구성 요소의 최상위에서만 호출할 수 있음 조건문, 반복문 안에서 못 씀 useState State: 컴포넌트의 상태 //State 사용하기 const [state, setState] = useState(initialState); //콜백으로 초깃값 지정하기 //초깃값을 계산하는 코드가 복잡한 경우에 활용 const [state, setState] = useState(() => { // ... return initialState; }); //State 변경 setState..

20220924 React에서 Dark모드 적용하기 Dark 모드를 적용하는 방법에는 여러가지 방법이 있는데, App.js에서 useState를 사용해서 css, scss로 적용하는 방법 1. 전역에서 사용되어야 되기 때문에 App.js에 작성하기 - useState 사용 import React, { useState } from "react"; import styled from "styled-components"; import "./app.scss"; function App() { const [dark, setDark] = useState(false); return ( { setDark(!dark); }} > 다크모드 ); } export default App; 2. app.css에 다크모드일때 css 적용하기 .App { background-color:..

220919 React 타이틀, 아이콘 바꾸는 방법 public 파일에 index.html파일에서 바꿔주기 https://www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org 여기서 아이폰+ 안드로이드 모든 아이콘 대응가능한 아이콘 만들 수 있음 1. 파일선택해서 > Favicon 만들기하고 2. 네모칸안에 나오는 것들 헤드안에 추가하고 Download the generated favicon 눌러서 다운로드하고 3. pu..

220917 배경에서 랜덤으로 이미지 나오게 하기 //랜덤으로 돌릴 이미지 가져오기 import img1 from "../../asset/assetLogin/img1.png"; import img2 from "../../asset/assetLogin/img2.png"; import img3 from "../../asset/assetLogin/img3.png"; //backgroundArr로 배열 만들어주기 const backgroundArr = [img1, img2, img3] //Math로 랜덤 함수 만들어주기 const randomIndex = Math.floor(Math.random() * backgroundArr.length); const backgroundImg = backgroundArr[randomIndex]; //리턴에서 return ( ..

React의 JSX / Javascript와 다른 점 / JSX 규칙 JSX (JavaScript XML) Javascript에 XML을 추가한 확장 문법 XML(eXtensible Markup Language)은 데이터를 저장하고 전송하기 위한 소프트웨어 및 하드웨어 독립적인 도구 JS와 JSX는 어떻게 다른가요? JS와 JSX는 둘 다 호환 가능하지만 차이점은 사용자 인터페이스가 생성되는 방식과 기능이 애플리케이션에서 분할되는 방식에 있습니다. JS의 경우 간단한 HTML이 먼저 작성되고 다음과 같이 스크립트 태그 내에 JS가 작성됩니다. Fruit List Orange 그런 다음 기능을 수행하는 JavaScript가 추가됩니다. 그러나 React의 유사한 JSX 코드는 고정 HTML 파일로 시작합니다. 그런 다음 HTML과 유사하지만 JSX인 코드가 작성됩니다. fu..

이전 1 2 다음

티스토리툴바