본문 바로가기

React33

[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] Toast-UI Editor 게시물 수정 방법(에디터 html/markdown표시) # Toast-UI Editor 게시물 수정 방법(== 에디터에 HTML/Markdown 표시) Toast-UI Editor 로 작성된 HTML/Markdown 문서를 DB에 저장했다가, 글 수정 기능 등을 구현하기 위해 다시 Editor 로 불러와 노출해야 하는 경우가 있다. *** 그냥 HTML이나 Markdown으로 작성된 글을 Viewer로 띄우는 방법은 아래글 참고. [React] Toast UI Viewer 사용 방법: HTML태그, Markdown 표시 뷰어 이 글은 Toast-UI Editor의 "에디터 편집 영역" 에 HTML이나 Markdown을 표시하는 방법을 정리한다. 아래의 코드 한줄이면 끝이다. // 1. HTML을 에디터에 표시 설정 Editor.prototype.getInst.. 2022. 5. 18.
[React] Toast-UI Editor 이미지 파일 서버 업로드 방법 (base64 인코딩 X) # Toast-UI Editor 이미지 파일 서버 업로드 방법 일반적으로 이미지를 관리하는 방식은 첨부 이미지 파일은 서버 디스크에 저장해두고, 해당 경로만 DB에 저장해두는 것이다. 그러나 Toast-UI Editor 에서 이미지를 첨부하면 img 태그의 src에 이미지 데이터 전체가 base64로 인코딩 되어 주입된다. Markdown 의 경우에도 형식은 다르지만 결과적으로 동일하다. 만약 이 상태 그대로 DB에 저장해두면, 레코드 한 줄마다 몇 Mb씩 차지하는 곤란한 상황이 발생할 수 있다. 우리가 원하는 건. 1. 이미지 파일은 서버로 전송하고, 2. 파일이 저장된 경로만 DB에 저장해두고, img 태그의 src 속성값으로 사용하는 것 일 것이다. 지금부터 Toast-UI Editor 에서 첨부한.. 2022. 5. 16.
[React] Toast-UI Editor 이미지 업로드/드래그 첨부 막기 방법 # Toast-UI Editor 이미지 업로드 기능 제거 방법 Toat-UI Editor에서 이미지를 업로드하면, multipart 형식으로 파일 첨부가 되는 것이 아니라 이미지 데이터 자체를 base64로 인코딩하여 img 태그의 src로 주입해버린다. 사이즈가 큰 이미지 파일을 이 상태 그대로 DB에 저장하고 싶지 않다면, 다른 방식을 생각해야 할 것이다. 이 글에서는 Toat-UI Editor의 이미지 첨부 자체를 막는 방법을 정리한다. * 이미지를 첨부 파일로 서버에 전송하는 방법은 아래글 참고 [React] Toast-UI Editor 이미지 파일 서버 업로드 방법 (base64 인코딩 X) 방법은 코드 한줄이다. Editor.prototype.getInstance().removeHook('ad.. 2022. 5. 16.

티스토리툴바