반응형 REACT6 초 간단 Redux 사용법 https://redux.js.org/tutorials/quick-start Quick Start | Redux - How to set up and use Redux Toolkit with React-Redux redux.js.org Redux란? state를 관리해주는 라이브러리 왜씁니까? state를 선언했는데 이를 어디 저 밑에 있는 자식컴포넌트한테 줘서 쓸일이 있다고 칩시다. 그럼 죄다 props 뚫어줘서 state랑 setState함수 넘겨줘야 되는데 끔찍함. 그래서 state를 전역으로 관리하는게 필요할 때 씀 1. 설치 npm install @reduxjs/toolkit react-redux 2. 개념 알아둬야할 개념 세가지가 있음 Store : 말그대로 상태를 저장하는곳 Provider :.. 2022. 11. 8. useHref() may be used only in the context of a <Router> component. 문제원인 리액트 라우터를 사용할 때 컴포넌트를 바깥쪽에서 사용하여 생긴 문제이다. 라우터 바깥에 있으니 Link가 가리키는 곳이 어딘지 몰라 에러가 나는 것이다. 해결방법 를 라우터 안쪽으로 옮겨주면 해결된다 2022. 9. 19. Objects are not valid as a react child 해결법 문제 원인 자바스크립트 Object를 리액트 컴포넌트처럼 사용하려 했을 때 생기는 문제이다 function myComponent() { const jsObject = { abc: 1, edf : 2}; return ( {jsObject} // jsObject는 리액트 컴포넌트가 아니므로 에러! ); } 해결방법 리액트 컴포넌트가 아닌 jsObject가 마치 리액트 컴포넌트처럼 사용된 부분이 있는지 확인한다 2022. 9. 19. React Router v6.4 튜토리얼 배우기 https://reactrouter.com/en/main/start/tutorial Tutorial Tutorial Welcome to the tutorial! We'll be building a small, but feature-rich app that let's you keep track of your contacts. We expect it to take between 30-60m if you're following along. 👉 Every time you see this it means you need to do something in t reactrouter.com All images and contents from above link 양이 조금 방대해서, 순서나 내용에 오류가 조금 있을 수 .. 2022. 9. 16. 리액트 커스텀 환경변수 사용하기 https://create-react-app.dev/docs/adding-custom-environment-variables/ Adding Custom Environment Variables | Create React App Note: this feature is available with react-scripts@0.2.3 and higher. create-react-app.dev 1. 개요 Create Recat App에서는 커스텀 환경변수를 추가하여 마치 local variable 처럼 접근하여 사용이 가능하다. 리액트에서는 기본적으로 NODE_ENV라는 환경변수가 정의되어 있으며 커스텀으로 사용하는 환경변수는 REACT_APP_ 으로 시작한다. 2. 환경변수를 정의하는법 환경변수를 정의하는 방법은.. 2022. 9. 14. useEffect 이해하기 https://reactjs.org/docs/hooks-effect.html Using the Effect Hook – React A JavaScript library for building user interfaces reactjs.org 공식문서 설명이 한글로 거지같아서 영어로 읽고 한번 정리하는 내용임 useEffect는 class Component의 componentDidMount, componentDidUpdate, componentWillUnmount 에 대응되는 개념이다. 많은 케이스에서 componentDidMount와 componentDidUpdate에 똑같은 작업을 동시에 수행하는 경우가 있었다. 이에 페이스북은 useEffect에 두 기능을 한번에 묶어버렸다. 물론 따로 if문으로 두.. 2022. 9. 6. 이전 1 다음 반응형
