본문 바로가기

리액트27

[React] TypeScript useRef 사용법 (+ ref 객체 타입) # TypeScript에서 useRef 사용 방법 TypeScript에서 useRef 사용시, 아래와 같이 제네릭과 초기값을 설정해야 한다. 1. 값 저장 용도 - 제네릭 : 값의 타입을 넣어준다. - 초기값 : 반드시 타입에 맞는 초기값을 할당해준다. // 값 저장 용도(number) const count = useRef(0); const text = useRef("") 2. DOM 취득 용도 - 제네릭 : 참조하는 HTML 엘리먼트를 넣어준다. - 초기값: null을 넣어준다. // DOM button 참조: 제네릭으로 html엘리먼트(button) 설정. 초기값은 null로 설정 const buttonRef = useRef(null); // DOM input 참조 : 제네릭으로 html엘리먼트(in.. 2022. 8. 11.
[React] useRef로 DOM 취득시, null | undefined 되는 이유와 해결방법 # useRef : DOM 취득시 null이 되는 이유 useRef로 DOM을 취득시, 사용 시점에 따라 null 이나 undefined가 될 수 있다. 예를 들어 아래 코드는 작동하지 않는다. import React, { useEffect, useRef } from 'react'; import './App.css'; function App() { // useRef 사용 const inputRef = useRef(null); // 최초 실행시 input에 focus 주기: 실패한다. inputRef.current.focus(); console.log(inputRef.current); // null 이 찍힌다. return ( {/* input 을 useRef로 참조 */} ); } export defau.. 2022. 8. 9.
[React] 컴포넌트 렌더링 과정 정리(useLayoutEffect vs. useEffect) # React 컴포넌트 재렌더링 케이스 - React 컴포넌트는 아래의 2가지 상황에서 재렌더링(Re-rendering) 된다. 1. 내부 상태값(state)이나 중앙 상태값(redux store 등)이 변경되는 경우 2. 부모 컴포넌트가 재렌더링되는 경우, 자식 컴포넌트도 재렌더링. - 컴포넌트가 렌더링되면, 해당 컴포넌트 함수가 호출되어 화면을 다시 그리는데, 이 과정을 정리해둔다. # React 마운트 과정 1. 함수 컴포넌트 호출 2. 구현부 실행 - props 취득, hook 실행, 내부 변수 및 함수 생성 - 단, hook 에 등록해둔 상태값, 부수함수 효과 등은 별도 메모리에 저장되어 관리된다. 3. return 실행 - 렌더링 시작 4. 렌더 단계(Render Phase) - 가상DOM을 .. 2022. 8. 9.
[React] create-react-app (CRA) 기초 정리 (Feat. 환경변수) Create-React-App(CRA) 란? - 리액트 개발환경을 쉽게 구축해준다.(by 페이스북 리액트팀) - 대략 아래의 것들 + 알파가 자동으로 세팅된다. webpack(모듈+라이브러리 번들링) babel(jsx 컴파일) jest(테스트) eslint(코드형상관리) polyfill(구형 브라우저 미지원 문법 등 대응) HMR(Hot Module Replacement: 재시작 없이 변경사항 반영) CSS 후처리(SASS 컴파일, 벤더접두사prefix 등) - 위의 것들을 알아서 설정해주므로 매우 편리하지만, eslint 등의 설정 변경이 불편하다는 단점은 있다. CRA 사용법 - React npx create-reat-app 폴더명(현재경로는 .) - React + TypeScript npx crea.. 2022. 8. 8.
[React] 리액트 기초 동작 원리(Feat. Virtual DOM : 가상돔이란?) 리액트란? 자바스크립트 UI 라이브러리이다. 좀더 친절하게 요약하면, "상태값이 변경되거나, 부모가 재렌더링 될 때마다 UI를 자동으로 업데이트해주는 JS 라이브러리" 이다. 그리고 이를 위해 "가상DOM 을 통해 변경된 부분만 효율적으로 업데이트" 해주는 구조를 채택했다. 사실 리액트 자체는 이게 다다. 자칫하면 잊기 쉬운 리액트의 알몸을 간략하게 정리해둔다. # 리액트는 자바스크립트 UI 라이브러리다. 1. 리액트는 컴포넌트의 1) 상태값이 변경되거나 부모가 재렌더링되면, 2) UI를 자동 업데이트 해주는 라이브러리다. * 즉, state, redux store 등의 상태값이 변경되거나, 부모 컴포넌트가 재렌더링 되면, * 리액트가 해당 컴포넌트 함수를 자동으로 재호출하여 재렌더링 해준다. 2. 이 .. 2022. 8. 6.
[React] Toast-UI Editor/Viewer 유튜브 동영상 삽입/표시 방법 Toast-UI 에디터, 뷰어에서 유튜브를 삽입하고, 표시하는 방법을 정리한다. 1. Toast-UI Editor 유튜브 삽입 방법 - 마크다운 모드에서 iframe 으로 유튜브 동영상을 삽입하고, 미리보기(preview) 하는 방법 2. Toast-UI Viewer 유튜브 표시 방법 - iframe 으로된 유튜브 공유 태그를 토스트 뷰어에서 렌더링하는 방법 1. Toast-UI Editor 유튜브 삽입 방법 - Editor 컴포넌트에 customHTMLRenderer 속성을 추가하고, iframe 을 입력할 수 있도록 정의해준다. import { Editor } from '@toast-ui/react-editor'; import '@toast-ui/editor/dist/toastui-editor.css.. 2022. 8. 6.
[React] create-react-app 리액트 버전 변경 및 에러 처리 방법 npx create-react-app 으로 리액트 프로젝트를 세팅하면, 항상 최신 버전의 react, react-dom 으로 설치가 된다. 그러나 다른 라이브러리와 호환이 안되는 등의 이슈로 인해, react의 버전을 변경해야 할 때가 있다. 혹은, GitHub 레퍼지터리 등에서 clone/pull 해온 프로젝트에서 npm install || yarn install 을 실행하면 버전이 서로 안 맞는다는 식의 에러코드가 쏟아질 때가 있다. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! Found: react@18.0.0 npm ERR! node_modules/react npm ERR! react@"^18.. 2022. 6. 23.
[React] Toast-UI Viewer 글자 크기, 행 간격, 마진 등 CSS 조정 방법 리액트에서 Toast-UI Viewer에 html문서를 렌더링하면, 아래처럼 글자 크기, 행간 간격, 마진 등이 자동 적용 되는 이슈가 있다. 확인해보면 toast-ui 자체에서 설정된 css 값임을 알 수 있다. 원치 않는 margin이 위아래로 10px 적용되어 있는데, 바꾸고 싶다면, CSS로 조정해주면 된다. # Toast-ui Viewer CSS 조정 방법 다양한 방법이 있겠지만, 필자는 편의상 App.css 파일에서 아래와 같이 !important 로 지정하여 우선순위를 높여주었다. (CSS Selector 는 크롬 inspect/검사 기능 등을 통해 파악하면 된다) .toastui-editor-contents p, .toastui-editor-contents h1, .toastui-edito.. 2022. 5. 31.
[React] Router v6 리다이렉트 및 경로 이동 처리(새로고침X): 404에러 페이지 렌더링 활용 # React-Router-Dom V6 리다이렉션 및 경로이동 처리 방법 일반 자바스크립트에서는 window.location 을 이용해 특정 경로로 이동시킬 수 있다. 리액트에서도 물론 이용 가능하지만, 페이지가 새로고침되는 이슈가 있다. 이 글은 리액트 라우터 v6 에서 새로고침 없이 경로 이동 및 리다이렉션 처리 방법을 정리한다. 방법은 2가지 인데, 1. 컴포넌트 내부에서 useNavigate hook을 사용는 방법과 2. useNavigate을 사용할 수 없을 때, Navigation 컴포넌트를 사용하는 방법이다. 이를 이용해 없는 주소로 접근시, 404에러 페이지 리다이렉션 처리도 가능하다. 1. useNavigate 훅 useNavigate() 를 호출하면, 경로 이동 처리를 할 수 있는 "함.. 2022. 5. 23.

티스토리툴바