본문 바로가기

전체 글

[React & 가계부프로젝트] Object 내부 key 한개 값만 변경하기
const [form, setForm] = useState({ id: '', date: '2022-06-23', category: '', title: '', amount: '', method: '2', type: 'send', }); const handleInputTitle = (e: any) => { const title = e.target.value; setForm({ ...form, title }); }; ...form 이렇게 form 객체를 복사하고 title: title 객체를 붙여서 title만 값을 업데이트 할 수 있었다. ** ...form, title은 Object.assign({ ...form}, { title: title } ) 을 축약한 형태이다.
[React & 가계부프로젝트] 모달만들기 props.children ( v-slot 같은 개념 만들어보기)
모달 컴포넌트 //Modal 컴포넌트 import React, { ReactNode } from 'react'; type Props = { children: ReactNode; }; function ModalComponent(props: Props) { const { children } = props; return ( 딤영역 제목 {children} ); } export default ModalComponent; vue에서는 v-slot을 사용하여 안에 내용을 커스텀 하게 해줄 수 있는데, react에서는 태그안에 무언가를 넣어서 쓰면 그게 props.children으로 전달이 된다고 한다. 그래서 그 내용을 modal의 content 안에 넣어주었다. (+ 제목과 닫는이벤트는 props로 따로 받아 처..
[React & 가계부프로젝트] JSX if else 문 만들기 (리액트로 v-if / v-else 만들어보기)
if / else if //react {modal.data ? (true) : (false) } //vue true false modal.data가 있으면 true가 찍히는 span태그가 렌더링 될것이고, 없으면 false가 있는 span태그가 렌더링 된다. if만 필요할때 //react {modal.data && (콘텐츠)} //vue 콘텐츠
[React & 가계부프로젝트] onClick 함수에 파라미터 같이 넘기기 (e도 같이 넘기기)
별다른 생각없이 강의나 다른 소스들 봐도 onClick={handleClick} 이렇게 쓰길래 그대로 쓰다가 onClick 함수에 파라미터를 넘겨서 처리할 일이 있어서 onClick={handleClick('month')} 이렇게 사용헀더니 바~로 오류가 났다. 해결 //오류 onClick={handleClick('month')} //해결 onClick={() => handleClick('month')} 리액트는 컴파일 시 js로 컴파일 되기 떄문에 () 를 붙여놓으면 바로 실행이 되버린다. 따라서 onClick할때마다 실행되게 하려면 () => { 실행할 이벤트 } 이렇게 작성해야한다. +깨달음 만약 event도 같이 넘기고 싶다면 아래처럼 사용하면 된다. onClick={(event) => handl..
[React & 가계부프로젝트] router 설정하기
router설정하기 1. index.js에 로 감싸기 import React from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; if (typeof window !== 'undefined') { const rootNode = document.getElementById('root'); if (rootNode) { ReactDOM.createRoot(rootNode).render( , ); } } 처음에 이걸 안감싸서 Link를 쓰는 모든곳에 BrowerRouter와 라우터를 설정해줘야했다;; router설정하기 2. Routes..
[React & 가계부프로젝트] useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a component. useHistory, useNavigator, useLocation 모두 라우터 안에 사용해야한다고 오류났다. 문제는 이미.. router안에 사용하고 있는데.. 자꾸 오류가 나는것이였다.. 해결 를 매번 감싸는게 아니라 index.js 에서 한번만 딱 감싸야한다!! 몰라서 매 페이지마다 BrowerRouter가 필요한 곳에 넣어놨는데 index.js에서 한번만 감싸서 넣으면 전체페이지에 BrowerRouter 넣을 필요가 없어진다.
[React & 가계부프로젝트] useEffect 콘솔에 자꾸 2번씩 찍힐때
useEffct 처음에 잘못써서 끝에 , [] 안 붙였더니 콘솔이 계속해서 찍혔다 (렉걸려서 멈췄다..) useEffect(() => { console.log('useEffect') }, [])​ 근데 이번에는 []를 넣어줘도 2번씩 콘솔이 찍혔다. 원인 구글링 해봐도 다른사람들이 여러 이유가 있다는데 해당이 안되었다. 알고보니 index.js에 로 감싸놨는데 그것때문이었다. 리액트에서 strict하게 한번더 검사한다고 콘솔을 찍는것이었다. 따라서 실제로 함수가 2번 실행되는것은 아니니 무시하고 실행해도 된다.
[React & 환경세팅] [eslint] document is not defined / window is not defined
typescript 로 바꾸면서 여러가지 에러가 났는데, document와 window를 못찾는다고 해서 빠른변경을 사용하면 그 위에만 eslint 안타게끔 하는 주석 달아서 하는게 나오는데 매번쓰기 귀찮아서 eslint 관련해서 구글링을 해보았다. 해결방법 module.exports = { rules: { 'no-restricted-globals': ['error', 'event', 'fdescribe'], }, env: { browser: true, node: true, }, globals: { document: false, }, }; .eslintrc.js 에 위 내용을 추가해서 넣으면 된다.
[React & 환경세팅] [prettier] 한줄 자동 줄바꿈 방지 설정하기
자꾸 prettier 에서 자동으로 한줄로 모든 코드를 바꿔놓는 것 같았다. 구글링해서 이것저것 설정 바꾸고 넣어봐도 되지않았는데 처음에 어딘가에서 복사해서 넣었던 "printWidth": 240 이거 때문이었다. 해결방법 공식문서 들어가니 "가독성을 위해 80자 이상을 사용하지 않는 것이 좋습니다."라고 나와있다. "printWidth": 80 로 변경하였더니 자동으로 한줄로 바꿔지지 않았다. 몇 번 바꿔서 테스트 해보니 80까지는 써도 줄바꿈 되지 않고, 240으로 해놓으면 240까지 줄바꿈 되지 않는다. https://prettier.io/docs/en/options.html Prettier · Opinionated Code Formatter Opinionated Code Formatter pret..
[React & 환경세팅] [eslint] import ~~~.tsx 오류 (An import path cannot end with a '.tsx' extension)
import Property from '../views/property/index.tsx'; 리액트 환경세팅을 하다가 typescript 로 바꿨더니 무수히 많은 오류가 났다. 구글링하여 다른건 해결했는데 tsx 파일 import 하는게 계속 오류가 났다. An import path cannot end with a '.tsx' extension 해결방법 1. eslint 설정 // .eslintrc.js '@typescript-eslint/ban-ts-comment': 'off', 2. ~~.tsx 는 모두 쓰지 않기! //오류 import Property from '../views/property/index.tsx'; //해결 import Property from '../views/property';

티스토리툴바