목록🌐 Web/⚛️ React (6)
Land of Joe
Link와 useNavigate의 활용도 차이 (Link태그 내 이벤트 존재 시 이벤트 작동 안 함 문제 해결을 위한 useNavigate 활용)
[ 내가 원하는 작동 방식 ]회색 알람 아이템을 하나 누르면 그 아이템의 type에 해당하는 url로 이동한다. 그러나 알람 아이템 안의 DELETE 버튼을 누르면 url 이동이 아닌, deleteAlarmEvent 이벤트가 작동해야한다! import React from "react";import styled from "styled-components";import { Span } from "../style/TextStyle";import { Div, Article } from "../style/LayoutStyle";import ImgTextBtnItem from "./ImgTextBtnItem";import DeleteIcon from "../img/deleteIcon.svg"..
CRA 생성 안됨 오류 Unknown command: "create-react-app"
Unknown command: "create-react-app" 계속 이런 오류가 나오고 npm ERR! Your cache folder contains root-owned files, due to a bug in npm ERR! previous versions of npm which has since been addressed. npm ERR! npm ERR! To permanently fix this problem, please run: npm ERR! sudo chown -R 501:20 "/Users/jke/.npm" 이런 오류가 나오고... 개발 진행하는 것도 두려운데 왜 시작부터 날 어렵게 하는지.....ㅠㅠㅠㅠ 오류를 읽고도 캐쉬 폴터 권한에 문제가 있구나까진 파악을 했는데 아래 떡하니 su..
[react-redux] Actions must be plain objects. 오류
Actions must be plain objects. Instead, the actual type was: 'function'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware for example..
[React] CRA 내 파일 구성에 대한 개인적 고찰
[ CRA가 기본으로 제공하는 초기 구성 ] => 폴더: node_modules, public, src => 파일: .gitgnore, package-lock.json, package.json, README.md public 폴더엔 정적 파일들을, src 폴더엔 동적 파일들을 넣는다고 한다. 그래서 public 폴더에 index.html 파일을 넣고, src 폴더에 App.js와 index.js 파일을 넣는 것으로 보통 CRA를 시작한다. 내가 고민한 부분은 위 세 파일을 제외한 프로젝트 설계를 하는 과정에서 발생하는 파일들을 어떻게 구조화할 것이냐에 대한 것이다. (public / src 폴더에 넣을 것이냐, 폴더 내부에서 하위 폴더 구조화는 어떻게 할 것이냐 등..) 이 것엔 정답은 물론 없거니와, ..
[React] 리액트 바보짓은 끝이 없고~~ Module not found: 멈춰!
* name can no longer contain capital letters Please choose a different project name. create-react-app으로 파일을 만드려는데 이런 오류가 난다. 전부 다 소문자로 갈기면 괜찮아진다................ 내힘들다.... Module not found: Can't resolve 'react-router-dom' npm install react-router-dom --save Module not found: Can't resolve styled-components npm install --save styled-components Module not found: Can't resolve './reportWebVitals' Re..
const food = ['tomato', 'potato']; const [veg1, veg2] = food; // console.log(veg1) ->> tomato // console.log(veg2) ->> potato const [counter, setCounter] = React.useState(0); const onClick = () => { setCounter(counter+1) setCounter((current) => current +1); }; modifier함수를 이용해 state 변경하면 해당 컴포넌트 전체가 재생산(re-render)된다. const [counter, setCounter] = React.useState(); 에서 React.useState() 는 react기능을 ..