반응형 react16 [React] 부모 컴포넌트에서 자식 컴포넌트 참조하기 - forwardRef&useImparativeHandle 사용법 부모 컴포넌트에서 자식 컴포넌트 참조하기 - forwardRef & useImparativeHandle 사용법 1. forwardRef 란? React의 ForwardRef는 개발자가 구성 요소를 통해 하위 요소 중 하나에 참조를 전달할 수 있는 강력하고 다재다능한 기능이다. React 16.3에 도입된 ForwardRef는 고차 구성 요소, 래퍼 구성 요소를 처리할 때 또는 하위 구성 요소의 인스턴스에 직접 접근해야 할 때 특히 유용하다. 대부분의 경우 ref를 사용하는 것은 간단하지만, 고차 구성 요소나 래퍼 구성 요소를 통해 ref를 전달하려고 하면 문제가 발생한다. ForwardRef를 사용하면 상위 구성 요소의 참조를 하위 구성 요소로 전달할 수 있으므로 하위 인스턴스에 원활하게 접근할 수 있다.. 2023. 12. 5. [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. [React/NextJS] 무료 웹 에디터 CKEditor 사용하기 React에 CKEditor5 추가하기 React에서 많이 쓰이는 오픈소스 에디터들 중 두가지가 후보에 있었는데 하나는 CKEditor5고 https://ckeditor.com/ckeditor-5/ CKEditor 5 | Powerful Framework with Modular Architecture Easy to customize RichText Editor with a powerful framework, a modular architecture, and modern features like Collaborative Editing. ckeditor.com 나머지 하나는 Tinymce 다. https://www.tiny.cloud/ The Most Advanced WYSIWYG Editor | Trust.. 2023. 1. 25. [React/NextJS] NextJS 시작하기 (2) - fetch, redirect/rewrite, router NextJS 시작하기 Fetch Data API통신을 통해서 무료 movie data 사이트로 부터 정보를 json 값으로 얻어 온다. 얻어온 값으 각각의 카드 형태로 만들어 보여주는 예제다. CSR(Client-Side-Rendering) 버전 const API_KEY = "10923b261ba94d897ac6b81148314a3f"; export default function Home() { const [movies, setMovies] = useState(); useEffect(() => { (async () => { const { results } = await ( await fetch( `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY.. 2022. 9. 6. [React/NextJS] NextJS 시작하기 (1) - NextJS vs ReactJS / CSR vs SSR NextJS 시작하기 NextJS란? NextJS란 React 프레임워크 중 하나로 React의 CSR(Client-Side-Rendering) 의 단점을 보완하여 SSR(Server-Side-Rendering)도 가능하게 만들었다. 기본 원리로는 브라우저로 서버에서 렌더링된 html을 먼저 보내서 SEO(검색 엔진 최적화)에 용이하게 한 후, JS를 다운로드하여 기존 React처럼 사용가능하게 한다. 사용자 측에선 렌더링된 html 화면까지는 바로 보이고 그 다음 동작하는 JS 관련 부분은 다운로드 후 사용할 수 있게 된다. 따라서 로딩이 길 경우 빈 화면만 보이는 (CSR)방식과는 달리 HTML이 렌더링된 화면 만으로도 사용자는 미리 정보를 확인할 수 있다. Next에는 React에서 기존에 만들어 .. 2022. 9. 5. [React/Redux] Redux 사용법 (2) - UseDispatch/UseSelector 2022.08.04 - [개발 Study/Node, js, react] - [React/Redux] Redux 사용법 (1) -State/Action/Reducer/Store [React/Redux] Redux 사용법 (1) -State/Action/Reducer/Store Redux란? 상태 관리 라이브러리로 Component별로 props/state를 바꿔주는 복잡한 관계를 redux 하나로 외부에서 state들을 공용으로 관리하여 가져다 쓸 수 있다. 1. State(상태) State란 React Component 내에.. chuun92.tistory.com 로그인 페이지에서 지난번에 작성했던 UserReducer의 LOGIN 액션을 실행시키고 User State를 변경하여 Main 페이지에서 Us.. 2022. 8. 5. 이전 1 2 다음 반응형
