728x90 전체 글100 리액트 - Custom Hook Custom Hook 코드를 작성하다 보면 반복되는 로직을 재사용 해야하는 상황에서 custom hook 을 만들어서 관리 할 수 있다 input 값을 작성하는 경우에 여러 폼에서 그 로직이 반복될 수 있기 때문에 해당 커스텀 훅을 만들어서 사용 - 주로 input 값 작성, fetch 호출 시에 자주 사용된다 - 항상 use로 시작해야한다. //custom hook function useInputs(initialForm){//initialForm : form에서 사용할 초기값 const [ form, setForm] = useState(initialForm); const onChange = useCallback(e =>{ const {name, value} = e.target; setForm(form .. 2022. 10. 24. 리액트 - useReducer useReducer 액션이라는 객체를 이용해서 업데이트하는 상태 관리 hook 컴포넌트 밖으로 상태 업데이트 로직을 분리할 수 있음 보다 복잡한 로직처리가 가능! 리액트 문서에 따르면 이전 값이 다음 값에 종속되는 경우가 있으면 선호된다고 나온다 기존의 값이 있고 그 값이 업데이트 되는 경우라면 선호될 것으로 예상된다. const [state, dispatch] = useReducer(reducer, initialArg, init); const [현재상태, 액션을 발생시키는 함수] = userReducer(reducer, 초기값(기본값) ) reducer : 상태를 업데이트 하는 함수 import React, { useState, useReducer } from 'react'; function reduc.. 2022. 10. 22. 리액트 - useMemo, useCallback, React.memo 알아보기 useMemo useMemo(function(), deps):특정 값이 바뀔때만 특정 함수를 실행해서 연산을 실행 deps : dependecies로 해당 내용이 변경되면 값을 연산해주고 그렇지 않으면 캐싱된 값을 사용한다. 하단 코드는 액티브 유저를 카운트 하는 경우에만 해당 컴포넌트를 리렌더링 해야하는데 유저를 추가한다거나 다른 컴포넌트에서 동작을 하는 경우에도 해당 컴포넌트가 리렌더링이된다. 이 경우에는 해당 함수의 값이 바뀔 때만 함수를 실행시키고 싶으므로 useMemo를 사용하면 된다. import React, {useRef, useState, useEffect, useMemo, useCallback} from 'react' function countActiveUsers(users){ conso.. 2022. 10. 20. 파이어베이스 onIdTokenChanged vs onAuthStateChanged firebase version9 기준으로 작성되었습니다. 파이어베이스 로그인을 사용할 때 토큰 감시가 필요한대 파이어베이스에서는 2가지를 제공하고 있다. onIdTokenChanged onAuthStateChanged 구글 공식문서에 따르면 Auth.onAuthStateChanged() 사용자의 로그인 상태 변경에 대한 관찰자를 추가합니다. Auth.onIdTokenChanged() 로그인한 사용자의 ID 토큰 변경 사항에 대한 관찰자를 추가합니다. 여기에는 로그인, 로그아웃 및 토큰 새로 고침 이벤트가 포함됩니다. 즉, onAuthStateChanged 는 로그인, 로그아웃만 감시하고 refresh token 을 호출하는 경우는 감시하지 않는다. 로그인, 로그아웃시에만 파이어베이스 토큰을 쓴다면 해당 .. 2022. 10. 18. Cypress 파일 업로드테스트 진행하는 프로젝트에 텍스트 에디터가 있어 파일 업로드를 테스트가 필요햇는데 하단의 에러 메세지와 같이 유저가 직접 진행하는 게 아니기때문에 파일 업로드 버튼을 클릭하는 이벤트는 진행이 불가능 했다. File chooser dialog can only be shown with a user activation. 하지만 그럴리가 없다. 방법을 찾아보자 https://www.cypress.io/blog/2022/01/19/uploading-files-with-selectfile/ 역시 구글 최고다 우선 파일을 cypress프로젝트 내에 넣어주어야하므로 이미지 파일을 해당 경로에 넣어주자 cypress/fixtures/ (경로는 다른곳으로해도 크게 상관은 없겠지만..!) readFile로 파일을 읽는다 selec.. 2022. 10. 13. 리액트 프로젝트 시작하기 리액트 공부와 함께 기존의 vue.js로 진행했던 프로젝트들을 리액트에서 정리해볼 겸 프로젝트를 시작하려고 한다. 지금 진행하는 프로젝트는 nuxt로 ssr을 사용하고 있지만 아직은 리액트의 전체적인 흐름을 모르기때문에 시기상조라고 생각한다. 리액트에서도 배우고 있는 사람들에게 추천하는 spa 로 먼저 진행해보려고한다. gatsby는 정~~말 예전에 사용해봤는데 포트폴리오 사이트 만들기에 정말 적합하다고 생각한다. 리액트에서 추천하는 방식을 참고해주세요 npx create-react-app side-project-react cd side-project-react npm start Ok to proceed 계속 진행하시겠습니까? yes install 이 완료 되면 프로젝트 폴더로 이동해서 npx start.. 2022. 10. 9. 이전 1 ··· 11 12 13 14 15 16 17 다음 728x90 반응형
