본문 바로가기
반응형

개발 Study/React26

[React] 부모 컴포넌트에서 자식 컴포넌트 참조하기 - forwardRef&useImparativeHandle 사용법 부모 컴포넌트에서 자식 컴포넌트 참조하기 - forwardRef & useImparativeHandle 사용법 1. forwardRef 란? React의 ForwardRef는 개발자가 구성 요소를 통해 하위 요소 중 하나에 참조를 전달할 수 있는 강력하고 다재다능한 기능이다. React 16.3에 도입된 ForwardRef는 고차 구성 요소, 래퍼 구성 요소를 처리할 때 또는 하위 구성 요소의 인스턴스에 직접 접근해야 할 때 특히 유용하다. 대부분의 경우 ref를 사용하는 것은 간단하지만, 고차 구성 요소나 래퍼 구성 요소를 통해 ref를 전달하려고 하면 문제가 발생한다. ForwardRef를 사용하면 상위 구성 요소의 참조를 하위 구성 요소로 전달할 수 있으므로 하위 인스턴스에 원활하게 접근할 수 있다.. 2023. 12. 5.
[Vite/React] Vite에서 env 파일로 환경 변수 사용하기 Vite에서 env 파일로 환경변수 사용하기 1. env 파일 작성하기 우리는 아래와 같이 .env 파일을 작성함으로써 프로젝트 전역으로 사용되는 환경변수들을 지정할 수 있다. .env # 모든 상황에서 사용될 환경 변수 .env.local # 모든 상황에서 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수 .env.[mode] # 특정 모드에서만 사용될 환경 변수 .env.[mode].local # 특정 모드에서만 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수 mode에 production이나 development를 넣어서 개발모드/제품모드를 나눠서 적용시킬 수 있다. 2. env 환경변수 사용 방법 기존 react app에서 처럼 dotenv를 설치해.. 2023. 6. 13.
[React/TypeScript] VSCode code snippet 사용법 VSCode에서 Code snippet을 사용하여 개발 속도 빨라지는 법 1. Code snippet이란? 코드 스니펫은 특정 작업을 수행하거나 프로그래밍 개념을 보여주는 작은 코드 조각이다. 공유, 학습 및 개발 가속화에 사용되는 재사용 가능한 코드 부분이다. VSCode의 Extension에서도 내가 원하는 언어에 맞는 Code snippet을 다운받아 사용할 수도 있고, 직접 파일을 생성하여 나만의 Code snippet을 만듬으로서 개발 생산성을 높일 수 있다. 특정 약어를 입력하면 그 약어랑 매칭된 코드를 바로 쓸 수 있으므로 코드 재사용에도 유용하며 시간과 노력을 절약할 수 있다. 2. Code snippet 생성 방법 2-1. Code snippet 파일 생성하기 Ctrl+shift+p 를 .. 2023. 6. 9.
[React/Recoil] React-Query + Recoil로 SessionStorage에 상태 값 저장하기 React-Query + Recoil 을 사용하여 SessionStorage에 상태 값 저장하기 React-Query로 비동기 API 통신으로 얻은 값을 Recoil을 사용하여 저장하지만, 새로고침을 클릭할 경우 값이 날아갈 수 있다. 이런 경우, SessionStorage나 LocalStorage에 저장하여 값을 유지할 수 있는데 오늘은 SessionStorage에 저장하는 방법을 알아보자. 2023.04.04 - [개발 Study/React] - [React/Recoil] Recoil 을 상태관리 라이브러리로 선택한 이유 [React/Recoil] Recoil 을 상태관리 라이브러리로 선택한 이유 상태관리 라이브러리로 Recoil 을 선택하다. 1. Recoil 이란? Recoil은 Facebook(.. 2023. 4. 7.
[React/Recoil] Recoil 을 상태관리 라이브러리로 선택한 이유 상태관리 라이브러리로 Recoil 을 선택하다. 1. Recoil 이란? Recoil은 Facebook(현 Meta)에서 개발한 React 애플리케이션용 상태 관리 라이브러리다. Atom 및 Selector의 개념을 도입하여 응용 프로그램의 상태를 효율적이고 유연하게 관리할 수 있는 방법을 제공한다. Value, Array, String, Object와 같은 모든 유형의 데이터를 저장할 수 있는 변수와 유사한 Atom 으로 정의할 수 있도록 한다. 이러한 Atom은 각 Component에서 접근 가능하고 수정이 가능하다. 구독한 Atom에 대해 변경이 일어나면 각 Component들이 Re-Rendering된다. https://recoiljs.org/ko/docs/introduction/core-conc.. 2023. 4. 4.
[React] React-Query를 사용하는 이유? (Feat.Redux) React-Query를 사용하는 이유 React-Query는 React 애플리케이션에서 데이터를 관리하기 위한 비교적 새로운 라이브러리다. 애플리케이션에서 데이터 가져오기, 캐싱 및 업데이트를 위한 간단하고 강력한 솔루션을 제공한다. 이 글에서는 React-Query를 자세히 살펴보고 Redux말고 React-Query를 사용해야 하는지 살펴보자. 1. React-Query란 무엇인가? React-Query는 React 애플리케이션에서 비동기 데이터를 관리하는 방법을 제공하는 라이브러리다. 가볍고 사용하기 쉽고 유연하게 설계되었다. 캐시를 사용하여 데이터를 저장(Caching)하므로 API에서 데이터를 한 번 가져온 다음 애플리케이션 전체에서 재사용(refetch)할 수 있다. 지금은 React-Quer.. 2023. 4. 3.
[React/Vite] CRA(Create-React-App) 프로젝트를 Vite 로 변환하기 CRA(Create-React-App)을 Vite로 변환 1. Vite란? Vite는 최신 웹 애플리케이션의 개발 환경을 최적화하도록 설계된 최신 빌드 도구 및 개발 서버다. 기본 ES 모듈을 사용하여 시작 시간을 단축하고 핫 모듈을 효율적으로 교체할 수 있으므로 보다 원활하고 빠른 개발 프로세스가 가능하다. Vite는 매우 유연하고 사용자 정의가 가능하므로 프로젝트 구성을 더 많이 제어하려는 개발자에게 매력적인 선택이다. 전반적으로 Vite는 최신 웹 애플리케이션을 더 빠르고 효율적으로 구축하는 것을 목표로 하는 도구다. https://vitejs-kr.github.io/ Vite Vite, 차세대 프런트엔드 개발 툴 vitejs-kr.github.io 2. Vite를 써야하는 이유 Vite와 CRA(.. 2023. 3. 27.
[React] 개발 환경 설정 ESLint(eslint-config-airbnb-typescript) + Prettier + React + TypeScript 개발 환경 설정 ESLint + Prettier + React + Typescript 1. ESLint 설치하기 yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser 우선 ESLint와 Typescript용 plugin, parser를 설치한다. 설치과 완료되면 root폴더에 .eslintrc.json 파일을 생성하거나 커맨드 창에 npx eslint --init 을 치면 아래와 같은 순서로 답변하면 그대로 설정파일이 만들어 진다. 1. check syntax and find problems 2. Javascript modules 3. React 4. Yes 5. Browser 6. JSON 7. Yes 설치가 안되는 .. 2023. 3. 2.
[React/NextJS] 무료 웹 에디터 TinyMCE 사용하기 무료 웹 에디터 TinyMCE 사용하기 지난번 CKEditor로 image load까지 커버하려고 했으나 webpack 설정 및 다른 plugin을 사용할 경우 dependency가 더 복잡해지고 파일 수 및 용량도 많아져 좀 더 가벼운 TinyMCE로 대체해야 했다. (Next framework이랑 좀 충돌이 많기도...) 찾다보니 기본 Image 라는 OpenSource plugin에 input file uploader를 연결하여 blob형태로 이미지를 캐쉬에 저장하는 예제가 있었다. 좀 더 가볍고 손쉽게 사용이 가능한 아기자기하게 생긴 TinyMCE를 사용해보자. 1. TinyMCE 설치하기 https://www.tiny.cloud/docs/tinymce/6/react-zip-host/ Hostin.. 2023. 1. 26.
반응형

티스토리툴바