React, Next, Redux 검색 결과

해당 글 93건

getInitialProps 사용법

If you're using Next.js 9.3 or newer, we recommend that you use getStaticProps or getServerSideProps instead of getInitialProps. 9.3 부터는 아래와 같이 getInitialProps가 3개로 세분화 되었습니다. SSR인지, 단순한 정적 렌더인지를 구분할 수 있게 되었습니다. 이 부분은 다른 포스트에서 다뤄보도록하겠습니다. 현재 getInitialProps가 작동을 안하는 건 아니라서 getInitialProps도 알아두면 좋습니다. https://darrengwon.tistory.com/744 getStaticProps : 빌드 타임 때 data fetch getStaticPaths : data에 기반..
React, Next, Redux/▲ Next.js 2020. 8. 15. 19:13

useState와 useEffect로 반응형 레이아웃 구현하기

반응형을 제외하고, 단순히 모바일인지 브라우저인지를 감지하기 위해서는 React에서는 react-useragent 패키지를 통해서 UA로 모바일을 감지하는 게 더 나은 것 같네요. Next면 서버 사이드 측에서 UA를 감지하면 됩니다. import { withUserAgent } from "react-useragent"; function isMobile() { if (ua.mobile) return true; return false; } export default withUserAgent(PaymentForm); 왜 Styled-Componenent + Media Query를 사용하지 않느냐고 물을 수 있는데, 이번에 toast ui를 사용하게 되면서 위 조합을 사용할 수 없게 되었다. 스타일링을 하는 ..
React, Next, Redux/🚀 React with Hooks 2020. 8. 9. 14:17

dangerouslySetInnerHTML : 문자열로 출력되는 html을 렌더링하기

프로젝트 진행 중 다음과 작성한 게시물을 확인하는 페이지에서 다음과 같이, HTML 요소가 문자열로 출력되는 현상이 있었습니다. 이렇게 출력되는 이유는, cross-site scripting (XSS) 공격을 막기 위해서입니다. 쉽게 말하면, html 내부 script로 인해 유저의 쿠키 등 개인 정보를 탈취할 수 있기 때문이죠. https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s e..
React, Next, Redux/⚛ React.JS 2020. 7. 26. 03:54

react + multer-s3 이미지 전송

https://darrengwon.tistory.com/91 https://darrengwon.tistory.com/317 1. 제출 버튼이 아니라 label을 눌러 버튼 형식으로 업로드하는 방식을 쓰려면 DOM을 조작해서 가상으로 제출 버튼을 누르게 만들어야 합니다. (지금 생각해보니 이럴 때 쓰라고 있는게 useRef더군요... 아래 코드는 직접 DOM을 조작하는 방식으로 해버렸습니다만, 실전에선 재사용성을 위해 useRef를 사용합시다.) 2. formData로 전송해야 multer가 알아 듣습니다. // 포토를 바꿨을 때, 제출을 위해 nextSibling을 DOM으로 불러 제출합니다. const photoChange = (e) => { e.target.nextSibling.click(); }; ..
React, Next, Redux/⚛ React.JS 2020. 7. 22. 04:02

React + ckeditor v5 문서 정리

React component - CKEditor 5 Documentation Learn how to install, integrate and configure CKEditor 5 Builds and how to work with CKEditor 5 Framework, customize it, create your own plugins and custom editors, change the UI or even bring your own UI to the editor. API reference and examples included. ckeditor.com 공식 문서에서 예시로 든 코드. import CKEditor from "@ckeditor/ckeditor5-react"; import ClassicEdi..
React, Next, Redux/⚛ React.JS 2020. 7. 14. 02:36

Loadable Components를 통한 코드 스플리팅

React가 내장한 React.lazy와 Suspense를 쓰는 것이 좋다고 생각하지만 아직 까지도 SSR을 지원하지 않고 있다. 때문에 페이스북 측에서도 Loadable Components를 사용할 것을 권고 하고 있다. 공식 문서 : https://loadable-components.com/ github : https://github.com/gregberge/loadable-components npm 주간 다운로드 수는 15만 정도 수준입니다. 설치 npm install @loadable/component 사용법 React.lazy와 사용법이 많이 비슷합니다만 Suspense를 쓰지 않고 곧바로 fallback 설정을 해줄 수 있는 점이 다릅니다. // React.lazy const SplitMe =..
React, Next, Redux/⚛ React.JS 2020. 7. 10. 17:58

React.lazy와 Suspense 컴포넌트를 통한 코드 스플리팅

Next를 사용하지 않고 react 자체 내에서 코드 스플리팅을 하는 방법을 알아봅시다. 코드 스플리팅을 하는 이유는, 한번에 다 부르지 말고 필요할 때만 나를 불러라!는 것입니다. SPA에서는 필요한 코드를 처음 접속 시에 모두 클라이언트단으로 넘겨주기 때문에 사용자가 접속하지 않은 페이지에 들어가는 코드도 함께 전송됩니다. 작은 웹에서는 문제가 없지만 프로젝트의 규모가 커질 수록 문제가 됩니다. 우선 CRA를 통해 프로젝트를 생성한 뒤에 build를 해보았습니다. 2로 시작하는 파일은 라이브러리 관련 코드이며 main으로 시작하는 파일은 코더가 작성한 내용들이 들어 있습니다. 이렇게 분리되는 것은 CRA가 제공하는 기본 웹팩이 SplitChunks 기능을 사용하기 때문입니다. 라이브러리 관련 코드를 ..
React, Next, Redux/⚛ React.JS 2020. 7. 10. 17:30

React 성능 최적화 : React.memo와 useCallback, 함수형 업데이트

할일 2500개를 생성하고 할일 0을 체크해서 개발자 도구의 Performance 눌러서 성능을 테스트해보았다. Timings를 확인해보면 컴포넌트 업데이트에 1.09초가 걸렸다고 나온다. 이는 성능이 매우 나쁜 것이다. 100ms 미만의 UI 응답 지연은 유저들이 즉시 느낄 수 있고 100ms에서 300ms가 지연되면 이미 유저들은 느리다고 생각한다. 가급적 0.3초 이내로 모든 일을 끝내야 한다. 이는 재렌더링이 되기 때문에 발생하는 일이다. 리액트 컴포넌트가 재랜더링되는 경우는 다음과 같다. 자신의 props이 변경될 때, 자신의 state가 변경될 때, 부모 컴포넌트가 재렌더링될 때, forceUpdate 함수가 실행될 때. 즉, 현재 할일을 뿌려주는 2500개의 컴포넌트가 전부 재 렌더링되고 있..
React, Next, Redux/⚛ React.JS 2020. 7. 10. 12:07

useMemo

공시 홈페이지에서 딱히 예제를 보여주고 있지 않습니다. Returns a memoized value. Pass a “create” function and an array of dependencies. useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render. 컴포넌트 내부에서 발생하는 연산을 최적화하는데 사용한다고 합니다. 최적화라는 관점에서 useCallback, useMemo가 사용된다고 보시면 됩니다. useMemo가 컴포넌트 내부에서 진행되는 연산을 최적화한다면 useC..
React, Next, Redux/🚀 React with Hooks 2020. 7. 5. 22:33

useReducer

공식문서에 있는 내용을 복사해서 가져왔습니다. Reducer 관련 내용을 다른 파일에 분리하는 장점이 없으니 한 페이지에 모두 몰아서 살펴보도록합시다. useReducer를 활용해서 redux를 사용하는 방법입니다. 일반 redux랑 사용하는 거랑 다른 점이 없습니다만 useReducer를 사용해서 해당 디스패치를 곧바로 사용할 수 있다는 점 정도가 다른 점이겠네요. 음... 좀 더 써봐야 알겠지만 react-redux에서 제공해주는 useDispatch를 사용하는 게 더 손에 익는 것 같습니다. import React, { useReducer } from "react"; const initialState = { count: 0 }; const reducer = (state, action) => { sw..
React, Next, Redux/🚀 React with Hooks 2020. 7. 5. 21:16