REACT

const removeDetailTime = (date: Date) => { return date.toString().split(' ').slice(0, 4).join(' ') }

부모컴포넌트자식 컴포넌트forwardRef 사용.

https://ko.reactjs.org/docs/hooks-reference.htmlhttps://ui.toast.com/weekly-pick/ko_20190731

미래의 제가 리마인드 하기 위해 기록하는 것이라 오류가 많을 수 있고 최적화 방법이 아닐 수 있습니다.. >#### 구현 목표 : api를 통해 받아온 데이터를 무한스크롤로 15개씩 페이지네이션 구현 >#### 사용한 내장함수 및 Hooks intersection

//공부하면서 내용추가예정

selector는 get 함수를 가지고 있고get 함수는첫번째 argument로 option이라는 object를 가져오는데중괄호를 열어 get이라는 함수를 다시 불러 state를 가져올 수 있는데그러면 get함수에서 어떤 값을 return하던지 간에 그 값은hourSe

atom.tsximport { recoilPersist } from 'recoil-persist';const { persistAtom } = recoilPersist({ key: 'TodoList',});키값은 사용자가 설정할 수 있다. 스토리지의 기본값은 로컬스토리

recoil 0.6 버전에서는 아직 recoil-persist를 구현하지 못하고 있고대체할 수 있는 훅을 제공하고 있다.useRecoilState_TRANSITION_SUPPORT_UNSTABLE()useRecoilValue_TRANSITION_SUPPORT_UNSTA

react hook form큰 form 을 가지고 있을 때 좋다.예를 들어, 누군가 계정을 생성하거나 회원가입을 하고 싶을때,사용자 이름사용자 성아이디비밀번호비밀번호 확인이메일관심항목작성하고 각각에 맞는 state를 설정해주고 이벤트 함수를 달아주어야 한다.여기서 끝이

recoil 사용법 - atom에서 작성한 value를 component에게 연결하는 방법. npm install recoilatoms.ts 생성atoms.ts 작성 import { atom } from 'recoil';export const (Atomname) = a

React Router는 다이나믹 URL을 지원한다.(다이나믹 URL : url에 변수를 넣을 수 있다는 뜻. )다이나믹url을 만들기 위해서는 몇가지 절차를 따라야한다.예시로 보는 Route 사용법)(react-route-dom @5버전이며, 6버전은 사용법이 다르다

styled components 기본기능styled components의 재사용 함수(props )${func}const Box = styled.div background-color: ${(props) => props.bgColor}; width: 100px; h

styled components , isActiveProp, useRouteMatch를 사용하여 Switch 만들기.useRouteMatch import 하기import { ..., useRouteMatch } from 'react-route-dom'; 2.변수에 us

사용자가 정해 놓은 상태를 변경할 수도 있다.잠재적인 성능 이슈가 발생 될 수 있다.예상치 못한 버그가 생길 수 있다.리액트는 개별 아이템을 똑같이 평가하기에 새로운 아이템이 추가되어도 감지하지 못한다.그래서 key를 설정하라는 경고문을 띄우는 것. map 함수의 2번

velog에 인사이트 문제인식-문제해결 -- 글 마무리에서 내가 깨달은 바를 조금씩 적기인풋이 두개정도라면 각각의 이밴트 함수를 만드는것도 괜찮으나많으면 하나로 묶는 것이 좋음. 객체 안에서 key를 대괄호 로 감싸면그 안에 넣은 레퍼런스가 가리키는 실제 값이key

면접마다 물어본 질문은 클로저가 뭐고 왜 필요하냐최단골문제는 브라우저 렌더링 과정 초디테일하게렌더링 최적화 했다는데 어떤 렌더링 프로세스를 생략하기에 최적화가 되는 거냐React. refHTML에서 id를 사용하여 DOM에 이름을 다는 것처럼리액트 프로젝트 내부에서도

npm add install styled-componentsimport styled from 'styled-components'유사한 스타일컴포넌트를 여러개 만들때에는 props를 이용한다이후 component 배치 시 props 입력한다

React Router설치 : npm install react-router-dom@5index.js파일에 import { BrowserRouter } from 'react-router-dom' 입력App컴포넌트의 위 아래를 로 덮는다BrowserRouter를 HashR

index.js에서는root이라는 div를 선택하고 있음.root div는 public/index.html 내부에 있는것을 볼 수 있는데,리엑트 컴포넌트가 DOM 내부에서 랜더링 될 때랜더링의 결과물이 위 div:root이 내부에 랜더링된다는 것 !ReactDom.re

리액트에서 데이터 바인딩 쉽게하는 방법스테이트의 변경 방법1.기존 state의 카피본을 만들고2.카피본을 수정하고3.modefier로 수정본을 입력한다. //ES6 destructuring 문법 사용. State는 변수 대신 쓰는 데이터 저장공간 // useStat

터미널 : npm install node-sassname.sass 파일 생성 후 name.sass파일을 적용할 곳에 @import './Name.scss'; 해준다.자주 쓰이는 샐랙터의 style을 그대로 가져오는 extend 기능도 있다.

import / export파일을 나눌 때 사용한다const name = 'Kim';내보내기export default name여러개를 내보내려면 중괄호로 묶는다 export {name1, name2}받아오기import {name, name2} from './경로'변수

React 라이브러리 자체의 주요 임무는 사용자의 입력에 반응하여 필요할 때 UI를 다시 Rendering하는 것이다.사용자의 입력에 state가 변경되거나 Event가 발생 될 때 화면에 가져와 사용자와 상호 작용하는 것이 React의 주 임무인 것이다.화면에 보이는

useReducer & useEffect 텍스트

React의 본질은 UI 라이브러리다.그리고 React의 핵심은 Component다.React는 Component를 사용하여 UI를 효과적으로 구성하며, 이에 대한 Update 역시 Component를 통해 진행한다.다만 먼저 알아두어야 할 점이 있다.바로 React

import React, {useCallback, useState} from 'react';import Button from './components/UI/Button/Button'import './App.css';import DemoOutput from './comp

// 2.// React는 state에 대한 갱신을 어떻게 진행하는가?// 컴포넌트 내에서는 useState를 통해 일부 state를 관리한다.// useState는 'React'로부터 왔기 때문에, 'React'가 state를 관리한다.// 버튼을 누를 때 setSt

App component에서 존재하는 state,함수를 props drilling없이 AuthContext.Propvider로 감싸인 컴포넌트에게 전달할수도 있다.useContext를 사용하여 props는 더이상 Navigation.js에서 사용되지 않는다.

submit 후 useRef를 사용하는 자식요소의 input을 어떻게 비워줄 수 있을까 하다가 예전에 함수를 통해 자식 컴포넌트의 state를 보낼 수 있다는 말이 떠올라 적용 해보았다.

localstorage에 setItem을 통해 값을 저장했을 때, 즉시 반영이 안되는 것처럼 보이는 경우가 있다.원인은 localstorage.setItem() 메서드가 어떤 함수의 내부에 있어, setItem이 트리거 되지 않는 경우인데 해결하는 방법은 매우 간단하나