본문 바로가기

React

[React & 가계부프로젝트] vue와 비교한 useEffect의 2가지 방식 !! (onMounted, watch)
1. onMounted useEffect(() => { //초기 렌더링 시 }, []) useEffect 두번째 인자로 [ ] 를 넘겨주면 vue와 동일한 onMounted 가 된다. 화면 렌더링 시에 최초 1번 실행된다. 2. watch const [form, setForm] = useState(); useEffect(() => { //form값이 바뀔때마다 }, [form]) useEffect 두번째 인자로 [ 변수 ] 를 넘겨주면 vue와 동일한 watch가 된다. console.log를 찍어보면 변수의 값이 바뀔때마다 찍히는 것을 볼 수 있다.
[React & 가계부프로젝트] url query parameter 가져오고 싶을때
url query parameter 가져오고 싶을때 http://localhost:3000/addAccount?date=2022-06-01 여기서 date 쿼리값을 가져오고 싶음 방법 import { useLocation } from 'react-router-dom'; const location = useLocation(); useEffect(() => { const query = new URLSearchParams(location.search); console.log(query.get('date')); }, []); useLocation이라는게 있었다. location이라는 변수에 받아 window.location처럼 사용하면 된다.
[React & 가계부프로젝트] history.back / location.href (router.push) 하고 싶을때 v6
1. location.href (router.push) import { useNavigate } from 'react-router-dom'; const router = useNavigate(); const handleSubmit = () => { //.. router('/'); } useNavigate를 react-router-dom에서 꺼내온 후 router라는 변수에 받아 바로 router('이동할 url') 해주면 된다. 2. history.back const router = useNavigate(); return ( router(-1)}> 뒤로가기 ); 똑같이 router를 변수에 받은 다음 파라미터로 -1을 넘겨주면 history.back 이 된다.
[React & 가계부프로젝트] nextTick 사용하기
npm i progress import { nextTick } from 'process'; const handleSubmit = async (e: any) => { e.preventDefault(); if (!checkValidate()) return; nextTick(() => { //nextTick 위에줄 모두 끝난 후 실행할 구문 alert('등록이 완료되었습니다.'); }); }; progess를 다운받고, nextTick을 불러온 다음, 앞에줄이 모두 끝난 후 실행할 구문을 적으면 된다.
[React & 가계부프로젝트] warning뜨면서 input이 비활성화 된 것처럼 안써질때 (value/defaultValue)
Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly 해결1. defaultValue로 바꿔주기 하지만 onChange를 같이 사용하면 값이 정상적으로 바뀌지 않는다. 해결2. onChange와 같이 사용하기 (추천) defaultValue뿐만 아니라 defaultChecked도 동일한데, 이때는 default값이 설정이 필요하다면 default로, 계속 변경을 감지하여 v-model처럼 값..
[React & 가계부프로젝트] v-model 처럼 input값 변경 감지하기
const [form, setForm] = useState({ id: '', title: '', amount: '', }); const handleInputTitle = (e: any) => { const title = e.target.value; setForm({ ...form, title }); }; return ( ) 리액트에서는 v-model처럼 값을 한번에 변경까지 감지하는 방법은 useEffect를 쓰거나 v-model이 값과 update가 합쳐진 것이기 때문에 udpate를 onChange로 사용하는 수밖에 없다. +깨달음 처음에 onChange를 안쓰고 value={form.title}했더니 warning과 함께 input이 readonly처럼 써지지가 않았다. 하라는대로 defaultVa..
[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';
[React & 환경세팅] [sass-rem] 렌더링 시 개발자도구에서 확인하면 rem(몇px) 동작 안하고 strike 쳐질때 (sass-rem not working)
vue에서 하던대로 package.json 들고와서 sass 열심히 연결하고 sass-rem 설치해서 하려는데 렌더링 된 모습이 font-size: rem(15px) 하면서 strike 쳐지고 계속 적용이 안됐다. 해결방법 알고보니 node-sass가 문제였다. 공식문서에서 지우고 sass로 깔아서 하라길래 했더니 바로 적용완료!!! npm uninstall node-sass //node-sass 지우기 npm install sass //sass 설치하기 https://create-react-app.dev/docs/adding-a-sass-stylesheet/ Adding a Sass Stylesheet | Create React App Note: this feature is available with ..
[React & 환경세팅] .env 환경변수 파일 값 변경하기
이슈 react로 firebase 로그인기능을 구현하는데 apikey값이 잘못되었다고 error message가 나왔다. 보니 환경변수 설정할때 실수로 끝에 ; 세미콜론을 넣었는데 아무리 .env파일에서 세미콜론을 지워도 변경되지 않았다. 해결 //package.json scripts에 추가 "scripts": { "serve:local": "react-scripts start --mode development" } //터미널에서 실행 npm run serve:local package.json에 scripts안에 위에 있는 명령어를 추가하고 터미널에서 해당 명령어를 실행하였더니 정상적으로 변경된 것을 확인할 수 있었다. vue에서는 아래 명령어 추가!! "serve:local": vue-cli-servi..
[React] useEffect란 ? ? ?
useEffect란 ? 저번에 useEffect 기본에 대해 배울때 vue의 watch와 같은거구나 하고 넘어갔었는데 정리를 하고 넘어가는게 좋을 것 같다. React 공식문서에 나와있는 내용은 아래와 같다. `React의 class 생명주기 메서드에 친숙하다면, useEffect는 componentDidMount + componentDidUpdate + componentWillUnmount 이 3개가 합쳐진 것과 같다. 일단 useEffect는 처음 렌더링될때 한번 실행되고, 값이 바뀔때마다 실행이 되는데 자주 쓰는 방식은 3가지로 나뉘어지는 것 같다. 그리고 안에서 return을 해주면 clean-up 해주고 싶을때 사용하는 방식이라고 한다. 1. 콜백함수만 넘길때 useEffect(() => { r..
[React] MVC 패턴으로 코드짜기
MVC패턴 모델Model : 모델은 앱이 포함해야할 데이터가 무엇인지를 정의. ( ==데이터베이스 ) 뷰View: 레이아웃과 화면을 처리합니다.(==화면 jsx, vue) 컨트롤러Controller: 명령을 모델과 뷰 부분으로 라우팅합니다. (==비동기통신하는 부분, composable) mvc패턴으로 짜주려면 누구 하나가 모든것을 다 처리하면 안된다. 각각의 역할 만큼만 할 수 있도록 만들어주어야한다. 따라서 view에서 비동기통신과 관련된 것들을 모~두 하지 않는것이 좋고, 따로 services 폴더를 만들어 관리한다. 수정 전 코드 app.jsx import './App.css'; import React, {useState, useEffect} from 'react'; import VideoList..
[React] 깃허브에 올리면 안되는 apikey 설정하는법 (.env 파일)
이슈 api key는 소스작업시에 올라가면 안되는 아이므로 꽁꽁 숨겨두어야하는데 어떻게 숨겨두는지 강의를 통해 알았다. 해결 1. 루트폴더에 .env파일을 만든다. 2. .env 파일안에 대문자로 이루어진 이름을 지정해주고 값을 담아준다. (지정할이름=실제api키) REACT_APP_YOTUBE_API_KEY=123456789 3.index.js 등에서 process.env.지정한이름 으로 가져와서 쓴다. const youtube = new Youtube(process.env.REACT_APP_YOTUBE_API_KEY); 4. gitignore에 .env 파일을 추가한다.
[React 세팅] 리액트 create-react-app 세팅 오류 ! (You are running `create-react-app` 4.0.1, which is behind the latest release (5.0.0).)
이슈 You are running `create-react-app` 4.0.1, which is behind the latest release (5.0.0). 새로 프로젝트를 하려고 npx create-react-app my-app 명령어로 설치를 하려는데, 위와 같은 오류가 뜨면서 계속 되지 않았다..... 해결 npm uninstall -g create-react-app npm add create-react-app npx create-react-app 새로만들프로젝트명
[React 기본] React Hook
함수형 컴포넌트 할때 잠시 나왔던 react hook인데, useState, useEffect 등 유용한 것이 많다. useEffect는 vue의 watch같이 컴포넌트가 마운트, 업데이트 될때 호출되는 훅으로 많이 쓰이는데 자세한건 공식문서를 읽어보는 것이 좋을 것 같다. 자세한건 실제로 사용하면서 블로그에 정리하는 것으로..! hook 소개 https://reactjs.org/docs/hooks-intro.html#motivation Introducing Hooks – React A JavaScript library for building user interfaces reactjs.org hook 개요 https://reactjs.org/docs/hooks-overview.html Hooks at a..
[React 기본] Lifecycle Methods
Lifecycle Methods란 ? vue의 lifeCycleHook 처럼 react에도 있다. 리액트가 컴포넌트를 렌더링 하기까지 거치는 순서인데, 그 순서마다 lifeCycle이벤트로 확인해볼 수 있다. 라이프사이클 메소드는 console.log로 찍어 확인하는 것이 제일 좋은 것 같다. 자주쓰이는 lifeCycle Methods 1. constructor 마운트되기 전에 최초로 한번 호출된다. 1. this.state 초기화 2. 이벤트 핸들러 메소드를 인스턴스에 바인딩 this.state생성자는 직접 할당해야 하는 유일한 위치라고 하는데, 여기서 주의할 점은 props로 들어온 걸 state에 넣으면 안된다는 점이다. 변경이 필요한 경우에는 componentDidMount를 사용하여야한다. 2...
[React 기본] 함수형 컴포넌트의 PureComponent는? memo!
PureComponent개념보러가기 [React 기본] PureComponent란 ? (Component, PureComponent차이) pureComponent 하기 전에 알아야 할 개념 리액트의 데이터 하나 바뀐다고 계속되는 re-rendering 성능에 문제 없나요 ? 리액트는 state가 변화되면 전체 컴포넌트의 render 함수가 호출되는데, 단 한개라도 joannashin.tistory.com 함수형 컴포넌트의 PureComponent == memo 기존소스 import React from 'react'; const HabitAddForm = (props) => { const formRef = React.createRef(); const inputRef = React.createRef(); c..
[React 기본] 함수형 컴포넌트 만들어보기 (class > function Component)
단축키 vscode에서 reactjs snippet 플러그인을 설치했다면 rsi + enter 하면 자동으로 함수형 컴포넌트로 세팅해준다. (class형 컴포넌트는 rcc + enter) 함수형 컴포넌트 const HabbitAddForm = () => {} // 또는 function HabbitAddForm () {} 정말 평소 javascript에서 쓰던 함수처럼 쓸 수 있다. 아래는 class컴포넌트로 작성한 코드를 function형 컴포넌트로 바꾼예제이다. 예제1 - Class형 컴포넌트에서 function 으로 바꿔보기 class형 컴포넌트를 사용한 기존소스 import React, { PureComponent } from 'react'; class habitAddForm extends Pure..
[React 기본] PureComponent 실제로 해보기
PureComponent 개념 PureComponet는 이전의 props과 state를 비교하여 (가볍게 비교!!!! shallow !!) 진짜 필요한 컴포넌트만 업데이트 해주는 것 ! PureComponent에 대한 자세한 개념설명 [React 기본] PureComponent란 ? (Component, PureComponent차이) pureComponent 하기 전에 알아야 할 개념 리액트의 데이터 하나 바뀐다고 계속되는 re-rendering 성능에 문제 없나요 ? 리액트는 state가 변화되면 전체 컴포넌트의 render 함수가 호출되는데, 단 한개라도 joannashin.tistory.com PureComponent 실제로 적용해보기 import React, { PureComponent } fro..
[React 기본] PureComponent란 ? (Component, PureComponent차이)
pureComponent 하기 전에 알아야 할 개념 리액트의 데이터 하나 바뀐다고 계속되는 re-rendering 성능에 문제 없나요 ? 리액트는 state가 변화되면 전체 컴포넌트의 render 함수가 호출되는데, 단 한개라도 변경이 감지되면 모든 컴포넌트가 re-rendering된다. 이게 성능이나 속도에 문제가 되지 않나 ? 싶을 수 있지만, VDom(Virutal Dom)이라는 메모리상의 트리구조를 사용하기 때문에 실제로는 진짜 필요한 컴포넌트만 업데이트하므로 문제가 없다. 컴포넌트가 업데이트 되는 것을 확인하려면 어떻게 하나요 ? 개발자도구의 components탭에서 설정모양에서 high lightes when components render 체크박스를 선택하고 이벤트를 실행시켜 보면 데이터가 ..
[React 기본] ReactStrictMode란 ? 콘솔이 2번 찍힐때
이슈 이벤트가 잘 동작하나하고 console.log 를 찍어봤는데, 계속 이유없이 2번씩 찍히고 있었다. 해결 알고보니 src/index.js 에 감싸져있는 React.StrictMode 때문이었다. 이건 리액트가 한번 호출한 뒤에 또 변경된 데이터가 없는지 한번 더 체크하기 위해 한번 더 도는것이고, 개발 모드에서만 작동하므로 빼도 되지만, 오류를 체크하기 위해 넣는것이 좋다고 한다.
[React 기본] Ref 사용하기 (document.getElementById 대신에 사용하는 것 ! ref)
기본 선언하기 React.createRef() vue에서도 자주 사용하는 ref 가 react에도 동일하게 있는데, 선언하는 방식이 조금 달랐다. 1. 원하는ref이름 = React.createRef() 로 원하는 이름을 선언한 후 2. input 태그에 ref={this.원하는ref이름} 이렇게 쓰면 된다. console.log로 찍어보기 그러고나서 input의 value값을 가져오려고 console.log를 찍어보았다. 그랬더니 current라는 객체를 가지고 있었다. console.log를 찍으니 나오는 값 current를 펼치니 나오는 값 가져온 값으로 form submit이벤트 완성하기 this.inputRef.current.value submit할때 input의 value값을 this.inpu..

티스토리툴바