반응형 develop/react9 [REACT] TypeError: Cannot read property 'map' of undefined 해결하기 React에서 리스트를 받아올 때 자주쓰는 구조로 state.map()을 사용하다 발생한 오류를 해결하지 못해 직접 찾아보고 찾은 답을 정리한다. 왜....도대체 왜..안되는걸까?? 한참 고민하다 발견한 답 React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행하기 때문이다. 즉 React는 return에서 state.map(...)을 반복실행할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 나는 것 즉 첫번째 값이 없기 때문에 생기는 오류이다. 해결방법은 2가지이다. 1. && state && state.map()구조로 사용하기. JavaScript에서 true && expression은 항상 expression으로 실행되고 fa.. 2021. 9. 9. [REACT] Font 적용하기 🧚♀️ 터미널에 해당 경로를 열어 npm install --save styled-components 를 입력해 설치해놓을 것 REACT에 FONT 적용하기 FONT를 적용하는 방법으로 두 가지 방법이 있다. CDN (Content delivery network 콘텐츠 전송 네트워크) LOCAL 1. CDN Index.html 사이에 link를 삽입하여 사용하면 된다. 사용하기 편하다는 장점이 있지만, 개인 프로젝트나 소규모에서는 상관 없지만 프로젝트 규모가 커질 수록 속도를 저하시키는 단점이 있다. 2. LOCAL FONT파일을 다운받아 사용하는 방법으로, CDN에 이용하여 사용하는 것보다 번거롭지만, 속도면에서 장점이 있다. 우선 src/styles/fonts 폴더를 생성한다. font를 다운바다 f.. 2021. 9. 5. [REACT] React Router를 이용하여 페이지 전환 하기 페이지에서 페이지로 이동하기 위해서는 React Router를 사용하면 된다. 터미널에서 프로젝트 폴더에 들어가 yarn add react-router-dom react-router-dom을 설치한 후 컴포넌트가 모여있는 app으로 이동하여 화면전환 경로를 만들어 주면 된다. BrowserRouter -> Switch -> Route순으로 경로를 작성해 준다. Route에 path를 입력하여 주소를 생성한다. (exact를 넣어주어여 정확한 값에 주소가 이동된다) 이동시킬 컴포넌트를 Route안에 묶어 페이지를 구현한다. 이 후 useHistory Hook을 이용하여 사이트 이동 주소 함수를 구현한다. goToNote라는 함수안에 history.push로 이동할 주소값 및 데이터를 입력하였다. 2021. 8. 31. [REACT] Firebase 연동 및 사용하기 [1] Firebase란? 서버를 개발하기 위해서는 인증, 데이터베이스, 푸시 알람, 스토리지, API등 여러 백엔드 요소적을 개발해야 한다. 하지만 앱 개발마다 매번 이런 과정을 진행하기에는 많은 시간이 소요된다. Firsebase는 이런 플랫폼을 프로젝트 구축 시 자동적으로 만들어주는 BaaS(Backend as a Service). 즉 Firsebase로 쉽게 백엔드를 구현하여 프로젝트를 작동할 수 있게된다. 다음은 Firebase에서 제공하는 주요서비스이다. - Firebase React에 설치하기 사용할 react폴더를 경로로 설정한 다음 yarn add firebase로 추가해주면 간단히 설치된다. 2021. 8. 29. [REACT] REACT-Icons 사용하기 Javascript에서 Icon을 사용 하는 것 보다 React에서는 훨씬 쉽게 Icon을 사용할 수 있다. yarn add react-icons 터미널에서 지정경로에 리액트 아이콘을 설치해준다. 다음 아래 사이트에 접속한다 https://react-icons.netlify.com/#/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm.. 2021. 8. 26. [REACT] Uncaught Error: Objects are not --- valid as a React child (found: object with keys {current}). If you meant to render a collection of children, use an array instead. React 오류 따라잡기 사건의 발달 To do list 를 React로 만드는 중, 할 일을 입력한 후 버튼을 누르면 useState를 사용하여 내용을 업데이트 하려 했다. addRef는 input의 현재 상태 값을 확인하기위해 useRef Hook을 사용하여 입력한 상황. 예상대로라면 addRef의 값이 업로드 되어야 하는데, 버튼을 누르면 홈페이지에는 경고창이 없이 하얀 페이지만 나오는 상황. console창에 들어가 경고를 확인 해보니 Uncaught Error: Objects are not --- valid as a React child (found: object with keys {current}). If you meant to render a collection of children, use.. 2021. 8. 25. [REACT] 글씨 타이핑 효과 내기 리액트에서 글씨 타이핑 효과 내기 위에 처럼 타이핑 효과를 Javascript 또는 css 애니메이션을 통해 코드를 작성한다. 구글에 찾아보면 작성하는 방법들이 많이 나온다. JS, CSS는 많이 나오지만 REACT에서 직접 코드로 작성하는 자료는 없어, 작성해 본다. ( 대부분 라이브러리를 사용하여 쉽게 작성하는 것 같다.) 타이핑 될 문자를 txt로 정의해주고, REACT HOOK 중 useState와 useEffect를 사용한다. setInterval과 cleaerInterval을 사용하여 코드를 작성했다. JS에서 작성하는 것과 크게 다르진 않다. useState와 useEffect의 기본적인 형식만 알고있다면 REACT HOOK을 사용하여 보다 편하게 작성할 수 있다는 장점이 있는 것 같다. 2021. 8. 23. [REACT] fontawesome 간단히 사용하기 fontawesome을 component 단위로 사용 할 수 있지만, html사용하듯이 사용하는 법도 있기에 작성해 본다. 터미널에서 해당 프로젝트 파일로 경로를 열고 yarn add @fortawesome/fontawesome-free 혹은 npm add @fortawesome/fontawesome-free 입력하여 다운받아 준다. 그 후 index.js 에 들어가 위와 같이 import한 후 각 components파일에 들어가 html코드 입력해주면 사용할 수 있다. 2021. 7. 19. [REACT] Chart legend position 오류 REACT 공부 중 chartjs-2 에서 legend의 position이 적용이 안돼 구글링을 해봤지만 해결법을 찾지 못했다. legend의 postion을 left로 입력했지만 top에 위치해 있다. legend를 plugins으로 감싸주니 이동하는 것을 확인 할 수 있다. 이유는 못 찾았지만 해결법을 찾은 것만으로 우선 감사하게 생각해야겠다. 2021. 7. 16. 이전 1 다음 반응형
