Study Output for Myself/React (9) 썸네일형 리스트형 [React]React Query 사용후기 *개인적인 공부와 사용법을 적은 것이니 정확한 정보는 공식 웹사이트를 참고해주세요. https://react-query-v3.tanstack.com/ 렌즈 이커머스 사이트를 만드는 프로젝트에서 상품 데이터를 가져오고, 로그인/회원가입 정보 등을 post, get하는 모든 API 통신에 React Query 를 사용했다. 리액트쿼리는 한마디로 서버에서 받아오는 데이터 관리, 조작, 저장을 용이하게 해주는 도구이다. 리덕스가 프론트앤드(웹)단에서 필요한 데이터 상태를 관리해주는 것처럼 리액트는 백(서버)에서 받아온 데이터 상태를 관리해준다. 물론 리액트쿼리로 받아온 데이터를 리덕스로 관리해줄 수 도 있다. 사용해보자 상태관리라이브러리는 항상 provider로 모든 컴포넌트를 감싸서 데이터를 여기저기서 다 쓸.. [React]useNavigate Hook ✅useNavigate React Router에서 사용할 수 있는 useNavigate hook에 대해 알아보자. 기존에는 useHistory 훅을 많이 사용했던 거 같은데 useNavigate가 좀 더 직관적이고 쉬워서 근래 많이 이용하는 추세다. When to Use? - 이전 페이지와 다음 페이지로 넘어갈 때 - 특정 url 로 이동할 때 How to Use? npm install history@5 react-router-dom@6 위 명령어로 react-router 을 install 한다. 그리고 사용하고자 하는 파일에서 useNavigate를 import한다 import {useNavigate] from 'react-router' 그리고 변수로 선언 let navigate - useNavigat.. [React]Redux React와 함께 쓰이는 redux라는 녀석이 있다. 이 녀석 자체만으로도 꽤 복잡해서 redux가 뭐가 어떤 원리로 사용되는지 '생활코딩'강의를 통해 공부했다. redux는 react에 종속되는 개념이 아니나 react와 함께 잘 쓰이기 때문에 react 카테고리에 글을 쓴다. 이 강의를 분명 코딩공부 초반에도 들었었는데 그 때는 진짜 이해도 안되고 지식도 삽시간에 휘발됐다. 이번에 다시 강의를 듣는데 처음 그림부터 이해가 되고 설명은 더 이해가 되고 실전은 더더더더 이해가 되서 스스로에게 놀라워하며 들었다! reducer 함수를 이해하게 될 줄이야. 이게 정말 공부라는 게 그런가보다. 모르는 것도 계속 접하고 다시 접하면 어느순간 띠링-하고 이해가 되는 순간이 온다. 감격스러움.. 그리고 나는 강의가.. [react] 6 high severity vulnerabilities create-react-app [name] 으로 react project를 시작하려 할 때마다 이 경고문구가 뜨기 시작했다. 그래서 시키는 대로 'npm audit fix --force'를 했는데 오히려 vulnerablilites가 늘어나기만 함.. 검색 결과 이 해결책이 먹혔다. 설명도 써있는데 사실 원리를 이해하긴 아직 내가 그정도 실력이 아닌 거 같다. https://github.com/facebook/create-react-app/issues/11174 Help, `npm audit` says I have a vulnerability in react-scripts! · Issue #11174 · facebook/create-react-app npm audit is broken for front-.. [React]useMemo & useCallBack useMemo와 useCallBack은 둘 다 안 써도 React가 작동하는 데 오류는 없지만 자주 rendering 되는 것을 막는 성능최적화에 사용해야하는 Hook들이다. ✅UseMemo 화면이 render될 때마다 함수가 재생성되는 것을 막기 위해 users의 값이 변할 때만 countActiveUsers함수가 다시 생성되게 한다. 첫번째 인자로 함수를 받고 두번째 인자로 dep를 받는다. 원시값(boolean, number, string), 특정 결과값을 재사용할 때 사용한다. ✅UseCallBack 함수를 재사용할 때 사용하는 hook 첫번째 인자로 함수를 받고 두번째 인자로 dep Array를 받는다. 재사용하는 함수 안에 prop가 있다면 dep에 꼭 넣어주어야 dep이 바뀔 때마다 함수가 .. react에서 Title 지정하기 useEffect를 사용해서 브라우저 title을 지정할 수 있다. useEffect(()=>{ document.title= '원하는 title' },[]) LocalStorage에 데이터 저장, 불러오기 정보를 하나씩 key , value를객체 형태로 해서 저장했더니 다루기가 쉽지 않고 문제가 많았다. key를 하나로 하고 값으로 Array를 넣고 그 Array 안에 Object형태로 데이터 하나하나를 넣으면 되는 거였음! localStorage.setItem('people',JSON.stringify(peopleArr)) localstorage 안에 객체가 들어갈 수 없기 때문에 JSON.stringify로 문자열로 만들어서 저장. JSON.parse(localStorage.get('people')) 가져올때는 JSON.parse 로 다시 객체로 변환해서 가져옴. 아, people은 이렇게 생겼음. :) const people=[{id:1, name: 'Dahye', age: 27, height:166.. useReducer useReducer useState와 같은 기능을 함. useState의 기능이 복잡해지고 많아지면 useReducer를 사용하는 게 낫다. ex) useState로 숫자를 높이고 줄이고 초기화하는 3가지 기능을 하려면 3개의 함수가 필요함. useReducer는 은행을 만드는 것 reducer = state를 변경하는 녀석:회계직원 (첫번째 parameter) initalState = state의 초기 값(두번째 parameter) dispatch = 손님의 요청(action)을 먼저 받는 창구직원 dispatch의 역할은 dispatch(여기) 괄호 안에 있는 객체를 reduce함수에게 전달. action이라는 인자로 들어 감. 객체 안에는 type:대문자명령, 과 다른 필요한 정보(?)를 넣으면 됨.. 이전 1 2 다음
