본문 바로가기
반응형

온라인 강의(유데미, 인프런 등)/React 완벽 가이드(유데미)

 (25)
[react & typescript] 타입스크립트 빈 배열 선언하기 오랜시간을 서치했는데, 정확히 알려주는 글은 찾지 못했지만 우연찮게 발견한 이 한 줄을 쓰니 되는 것 같다(약간 구글 피셜이라 확실치는 않음^^) [] = []
[react & typescript] event에 type 지정해주기 타입스크립트에 익숙해지려고 여러가지를 시도해보는데, 아직까지는 많이 생소한 것 같다. 특히 이벤트 객체에 대한 타입을 지정할 때 매번 구글링하는 것이 비효율적인 것 같아 자주 쓰는 것은 정리해둬야겠다. 하나씩 차차 늘려가기! 1. form submit event e: React.FormEvent 2. click event e: React.MouseEvent
[react & typescript] typescript로 forwardRef 사용하기(feat.'Component definition is missing display name' 에러) typescript를 통해 forwardRef 사용시 eslint에서 다음과 같은 에러가 발생했다. error Component definition is missing display name react/display-name 스택오버플로우를 참고하여 에러 해결! 형태도 꼭 기억해두자! const Input = React.forwardRef( ({ label, input }, ref) => { return ( {label} ); } ); 참고 사이트) https://stackoverflow.com/questions/67992894/component-definition-is-missing-display-name-for-forwardref
[react & typescript] CRA로 typescript 설정하기(feat. esLint, styled-component) 두 시간 이상을 삽질했던.. CRA로 typescript 프로젝트 만든 후 esLint, styled-component 관련 설정 과정을 정리해보자. 언젠간 꼭 이 글이 도움이 되기를 엉엉 1. CRA 사용 npx create-react-app [프로젝트 이름] --template typescript 2. tsconfig 설정 { "compilerOptions": { "target": "es6", "lib": [ "dom", "dom.iterable", "esnext" ], "noImplicitAny": true, "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "stri..
[react] forwardRef stackoverflow 클론 코딩 프로젝트를 진행하던 중이였다. 질문 등록 페이지를 만들며 input 또는 editor가 focus 될 경우 해당 컴포넌트로 스크롤될 수 있도록 하는 기능을 만들고 싶었다. 그래서 질문 양식에 따라 input 또는 editor 컴포넌트가 담긴 각각의 custom component에 ref를 주어 각 컴포넌트들이 focus됨에 따라 참조되어 스크롤이 해당 컴포넌트로 이동할 수 있도록 해야겠다~~ 싶었는데 왠걸!! 스크롤 이벤트가 전혀 일어나지 않는 것이였다! 그때 당시에는 이유를 찾지못하고 각 custom component를 div 태그로 감싸 그 div에 ref를 주는 것으로 땜빵(?) 해결을 하였고, 여러가지 구글링을 해보았지만 문제 자체를 파악하지 못해 제대로 된 검..
[react] context API context API란? props drilling을 사용하기 싫을 때, 즉 컴포넌트에 상관없이 전역적으로 데이터를 이용하고 싶을 때 사용한다. context API 사용 시 전역 데이터를 Context에 저장한 후, 데이터가 필요한 컴포넌트에서 해당 데이터를 불러와 사용할 수 있다. 로그인 데이터, 웹 내 사용자가 쓰는 설정파일, 테마, 언어 등등 다양하게 컴포넌트 간 공유되어야 할 데이터로 사용하면 좋다. context API를 사용하고 싶을 때에는 context, provider, consumer 이 세 가지 개념만 숙지하면 된다. 1. Context(전역 값 저장) Context 를 만들 땐 다음과 같이 React.createContext() 라는 함수를 사용한다. // context.js imp..
[react] useReducer(feat. useState와 비교) useReducer React(리액트)에서는 useReducer란 훅(Hook)을 제공하는데, 이 reducer(리듀서)로 상태 관리(state management)를 할 수 있다. useState와 비슷하지만 가령 두 개의 상태가 컴바인 되어 관리되어야 할 경우 같은(아이디 상태 값, 아이디 유효성 검사 통과 여부 상태 값) 조금 더 복잡한 상태 관리가 필요할 때 사용할 수 있다. useReducer 문법은 간단하다. reducer(리듀서) 함수와 initialState(초기 상태)를 전달하면 useReducer라는 훅(Hook)이 새로운 상태(state)와 dispatch(디스패치)함수를 리턴해준다. const [state, dispatchFn] = useReducer(reducerFn, initia..
[react] useEffect에서 Clean-up 함수 사용하기 Debouncing : 연이어 발생한 이벤트를 하나로 묶어 처리하는 방식 onChange 이벤트를 통해 입력값에 대한 유효성 검사를 하다 보면 값을 입력할 때마다 상태를 변경하는 경우가 생긴다. 상태가 변경될 때마다 화면이 리렌더링 되거나, 처리 로직을 재수행 하는 경우 과부하가 생길 수 있으므로 디바운싱을 통해 그룹 단위로 이벤트를 처리해보자. 아래는 로그인 시 id/pw입력 값 유효성 검사 로직이다. [디바운싱 전] const [enteredEmail, setEnteredEmail] = useState(''); //이메일(아이디) 입력값 저장 const [emailIsValid, setEmailIsValid] = useState(); //패스워드 입력값 저장 const [formIsValid, set..
반응형

티스토리툴바