본문 바로가기

전체 글

[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..
[typescript] 같은 interface인데 이름만 다르게 쓰고 싶을때 ! 인터페이스 복사하기 (type이용하기)
이슈 interface Code { code: string; codeName: string; } interface BasePageInfo { code: string; codeName: string; } 위에 2개의 interface를 보면 안에 내용은 같지만 이름이 달라야하는 상황이다. 은근 이런 상황이 많았는데 이럴때 합치는 법을 몰라 한참 헤맸다.. 해결 type interface Code { code: string; codeName: string; } type BasePageInfo = Code; type 새로운이름 = 복사할코드 로 해결하였다. 다른예시 type을 이용하여 아래 긴 소스를 더 간단하게 줄일 수도 있다. 기존소스 //기존 소스 interface ExcelCategoryPayloadI..
[React 기본] 컴포넌트간 props와 이벤트 전달해보기
위와같은 걸 만드는데 컴포넌트를 쪼개어 만들어보았다. vue와 비슷한데 조금은 더 간단(?)하게 전달할 수 있었다. 부모 -> 자식으로 props로 데이터를 전달하고, 자식은 props를 변경하고 싶으면 vue의 emit처럼 부모로 이벤트를 전달하여 값을 변경하였다. 1. props 전달해보기 (부모 > 자식) 부모 컴포넌트 import React, { Component } from 'react'; import Habit from './habit'; class Habits extends Component { state = { habits: [ { name: 'Reading', count: 0, }, { name: 'Running', count: 0, }, { name: 'Coading', count: 0..
[React 기본] class형 컴포넌트로 state와 onClick 사용해보기
1. 기본 생김새 만들어보기 class Habit extends Component { render() { return ( Reading {/* 숫자 */} 0 {/* 더하기버튼 */} {/* 빼기 버튼*/} ) } } 2. 숫자를 하드코딩 0 에서 변수로 변경해보기 ( {this.state.count} ) class Habit extends Component { state = { count: 0, }; render() { return ( Reading {/* 숫자 */} {this.state.count} {/* 더하기버튼 */} {/* 빼기 버튼*/} ) } } render 함수 위에 state를 만들고 그 안에 변수를 만든다. 만든 변수를 0 대신에 중괄호를 이용하여 변수로 바꿔준다. {this.sta..
[React 기본] React 시작 전 기본개념 정리 (class와 함수형, jsx, public과 src폴더)
class 와 함수형 컴포넌트의 차이 기존(16.8.0 이전) class function 관련된 데이터와 함수가 하나로 묶여져 있는 형태 javascript에서 쓰던 흔한 함수 state라는 데이터 묶음과 라이프사이클 훅이 들어있음 { {item} }) } 폴더 구조 public 정적인 요소들 src 동적인 요소들 (실제 작업 폴더라고 생각하면 된다.)
[React 기본] React 세팅하기 (fontawesome 설치하기)
1. 설치목록 node.js 크롬 확장도구 react dev 2. vscode 에디터 확장 툴 설치목록 reactjs snippet (rcc enter 하면 자동으로 기본 형태 만들어줌) auto import (컴포넌트 자동으로 import 해주는 툴) 3. 북마크하기 리액트공식문서: https://ko.reactjs.org/docs/getting-started.html 4 작업할 폴더에서 터미널 열어서 아래 명령어 실행 (my-app 대신에 본인이 하고싶은 이름) npx create-react-app my-app 5. 설치가 되면 해당 폴더로 이동하여 (cd my-app) 서버를 실행한다. (npm run start) cd my-app npm run start ** 만약 create-react-app ..
[typescript] emit 에 타입지정하기 (ts파일 분리)
이슈 Emit에 타입을 지정하고 싶은데 막상 쪼갠 ts파일에서 하려니 쉽지 않았다. 아래는 공식문서에 있는 emit 타입지정에 관한 내용이다. 출처: https://v3.vuejs.org/api/sfc-script-setup.html#typescript-only-features 해결 vue파일 import fbDepthCategoryComposable, { Emits } from '@/composables/modules/fb-depth-category' const emit = defineEmits(); const { categories, defaultLabel, handleUpdateCategory, } = fbDepthCategoryComposable(emit); ts파일 import { Selecte..
[Vue3] v-model 삽질기 (양방향 통신)
이슈 출처: https://v3.vuejs.org/guide/migration/v-model.html#_3-x-syntax 위에는 vue3 공식문서에 있는 내용인데 이걸 제대로 이해하지 않고 넘어가서 삽질을 했다.. v-bind는 단방향통신, v-model은 양방향 통신이라는걸 알고있으면서도 저걸 대충 보고 v-bind하면 컴포넌트에서 emit으로 update:modelValue하면 되는구나~ 하고 시작했는데 watch를 걸어놔도 값이 변경되는게 감지가 되지 않았다. 기존에 내가 생각했던 내용 부모 컴포넌트 자식 컴포넌트 resetData이라는 데이터를 reset이라는 이름으로 전달 reset이라는 props로 전달받음 resetData를 바꾸면 알아서 자식컴포넌트에 전달될것이라 생각 여기서 값을 바꾸고..
[Vue3] 배열 Array Watch 제대로 하는법 (lodash의 _cloneDeep)
이슈 배열안에 객체형태로 있는데 watch를 하니 변경하는 값을 찍어보는데 잘 동작하지 않았다. (계속 같은 값이 찍힘) 해결 lodash의 _cloneDeep을 이용하여 해결하였다. watch(()=> _cloneDeep(selectedList), (newValue, oldValue) => { console.log(newValue, oldValue) }, { deep: true } )

티스토리툴바