영원히 흘러가는 강

많은 분들이 NEXT js에서 react-quill 사용하려 노력하신 결과로 아래의 코드는 많이 있을테니 간단히 설명하고 넘어가기~ 변경전 import ReactQuill from 'react-quill' 변경후 const ReactQuill = dynamic(() => import("react-quill"), { ssr: false, }); next js에서 제공하는 dynamic import 활용하여 빌드타임이 아닌 런타임에 불러오도록 함 이제 문제는 그안에 Quill도 어떻게 가져오는지 그리고 안에서 어떻게 Quill에 저장하여 사용하는지 인거 같다 많이 찾아봤지만... 그어떠한 것도 확실한 답이 되지 않았다... 나도 더 찾아보고 수정해봤지만 나의 경우를 설명해보려한다.!! import dynam..

{children} 내부에 값을 내려주고 싶은 상황이 있어 찾아보다가 cloneElement() 가 있어서 확인 및 정리해보고자 작성해본다 React 에서의 cloneElement() 에 대한 설명이다. React.cloneElement(element,[config],[...children]) element를 기준으로 새로운 React 엘리먼트를 복사하고 반환합니다. config는 key와 ref 그리고 모든 새로운 props를 포함합니다. 새로운 엘리먼트에는 원본 엘리먼트가 가졌던 props가 새로운 props와 얕게 합쳐진 뒤 주어집니다. 새로운 자식들은 기존의 자식들을 대체합니다. config에 key와 ref가 없다면 원본 엘리먼트의 key와 ref는 그대로 유지됩니다. 아래의 구문과 동일하다고 ..

ts . 2786 위 제목과 같은 오류 발생시 괄호 잘 닫혔는지 확인하기 혹은 retrun 안에서 map 사용시에 { } 사용하기

가장 흔히 볼 수 있는 문제.!! 항상 넣어야지 하면서 까먹는 게 반복된다. 요번에는 key 값을 넣어줬어도 문제가 되었는데 React Fragments 이게 문제일 수도 있다.!

Styled-Component 를 사용한 react 프로젝트! 제작해본 이유는 간단하다 Styled-Component 사용법 익히려고! 그리하여 Styled-Component 에 대해 정리를 해보려한다 🎨 S t y l e d - C o m p o n e n t s javascript 파일 내에서 css를 사용할 수 있게 해준 대표적 css in js 라이브러리 js 코드 내에서 css 스타일 지정 가능 ❔ 그 렇 다 면 왜 쓰 는 가 ?! component가 많을 경우 class명이 중복될수 있는 문제 발생할수 있어서 이를 방지하기 위해 class 선언 없이 component에 접목 💾 설 치 법 npm install styled-components 🚀 사 용 법 const 태그이름 = styled.d..

개인적으로는 러닝커브가 매우 높은거 같아서 정리해본다! 리덕스란? 상태관리 라이브러리 복잡한 리액트 구조에서 state를 쉽게 공유하기 위한 방식 액션? state에 변화 필요시 액션 발생 동작에 대해 선언된 객체 type을 반드시 가지고 있어야한다 export const addSomething=()=>{ return{ type:ADD_SOMETHING // 필수 }} export const minusSomething=()=>{ return{ type:MINUS_SOMETHING } } 리듀서? state에 변화를 일으키는 실질적 수행 현재의 state와 action을 인자로 받아 store에 접근해 action에 맞춰 state 변경 (⭐x 100 중요) const initialState={ count..

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. 아무리 읽어봐도 어려운거 같다.. 각설하고 코드부터 보는게 더 나을수도 있다는 생각에 장바구니 예제를 꼼꼼히 뜯어보자! 파일 구조 보기 더보기 src ㄴApp.js ㄴcomponents ㄴCart ㄴCart..js ㄴCartItem ㄴCartItem.js ㄴNavbar ㄴNavber.js ㄴProducts ㄴProducts.js ㄴProduct ㄴProduct.js ㄴredux ㄴstore.js ㄴrootReducer.js ㄴShopping ㄴshopping-actions.js ㄴshopping-reducers.js ㄴshopping-types.js components에 들어가 있는 부분을 제외하고! 우선 shopping-types.j..

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. React 공식 문서에서 제공하는 context의 정의이다! 전역적으로 사용하기 위해 사용한다 우선 파일 구조로 보자면 아래와 같다 ㄴ src ㄴcomponenets ㄴAbout.js ㄴProfile.js ㄴstore ㄴUsers.js App.js store ㄴ Users.js import React, { createContext } from "react"; // createContext import export const Usercontext = createContext(); //createContext 생성 const UsersStore = (props) => { const use..

axios 로 여러개의 api 등을 받아올때에 사용 가능한 multi request!! import axios from "axios"; import { useEffect, useState } from "react"; const [url1, setUri1] = useState(); const [url2, setUri2] = useState(); useEffect(() => { axios .all( [axios.get("api 주소1"), axios.get("api 주소2")].then( axios.spread((response1, response2) => { setUri1(response1.data); setUri2(response2.data); }) ) ) .catch((err) => console.lo..

리액트에서의 DOM 앨리먼트는 기존의 DOM 앨리먼트와 조금씩 차이점이 있다.! 리액트에서는 카멜케이스로 변경되는 부분이 많지만 innerHTML은 아예 다른 이름으로 사용하여 이 부분만 작성해보려한다! dangerouslySetInnerHTML dangerouslySetInnerHTML 은 브라우저 DOM에서 innerHTML 을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다 코드로 확인해보자면 function ..