본문 바로가기

FA

(40)

20221005 React Hooks - useContext useContext 여러 곳에 쓰이는 데이터를 내려주고 싶을 때 컴포넌트의 단계가 많다면 여러 번 반복해서 Prop을 내려줘야 하는데, 이런 문제점을 프롭 드릴링(Prop Drilling) 이라고 함. Context는 프롭 드릴링을 해결하기 위해 사용하는 기능 React Context는 전역적으로 상태를 관리하는 방법 전역을 프롭스로 단계적으로 하려고한다고하면 힘듬 컨텍스트가 앱안에서 전역적으로 사용하는 여러 컴포넌트를 쉽게 공유할 수 있도록 해줌 전역적인 데이터를 전달하기에 편함 상위컴포넌트에서 필요한 값을 단계로별로 통하는게 아니라 바로 넘겨줄 수 있음 Context로 공유한걸 > useContext로 바로 받아와서 쓸 수 있음 단점 컨텐스트는 꼭 필요할 때만 써야됌 이유 - 컴포넌트를 재사용하기 어..

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:..

20220923 모바일 창에서 input 클릭 시 확대 방지 모바일에서 input 입력창을 클릭하면, 화면이 확대될 때 화면 자동확대 방지 방법 meta 태그를 추가 (react 같은 경우 index.html에 추가) viewport 속성 width=device-width 화면 너비를 기계 너비로 맞춤 initial-scale=1.0 초기 화면 크기 배율 설정 minimum-scale=1 최소 화면 크기 설정 maximum-scale=1 최대 화면 크기 설정 user-scalable=no 사용자가 화면 확대/축소 가능 여부 설정 target-densitydpi=device-dpi 해당도를 기기에 맞춤 설정 참고 및 출처 https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag Viewport meta..

20220921 block / inline-block / inline 차이점 See the Pen block / inline-block / inline by rimrim (@s2hl) on CodePen. block inline-block inline ,,등 , , 등 , , 등 무조건 한줄을 점유 크기만큼만 공간을 점유 text 크기만큼만 공간을 점유 다음 태그는 무조건 줄바꿈이 적용 줄바꿈을 하지 않고, 동일한 라인에 작성가능 줄바꿈을 하지 않고, 동일한 라인에 작성가능 width, height, margin, padding 속성이 모두 반영 width, height, margin, padding 속성이 모두 반영 margin과 padding 속성은 좌우 간격만 반영 / 상하 간격은 반영X 내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규..

이전 1 2 3 4 5 다음

티스토리툴바