본문 바로가기

리액트

리액트에서 무작위 백그라운드 이미지 설정하기 (feat. styled-components)
Language & Framework/React.js 2022. 4. 18. 리액트에서 무작위 백그라운드 이미지 설정하기 (feat. styled-components) 나는 styled-components를 사용했지만 css를 사용해도 가능하다. 다만 각 컴포넌트에 지정해주는 것이 아니라 전역으로 설정이 가능한지, 그리고 inline이 아니라 css 혹은 scss 내에서 설정 가능한지는 모르겠다. 나 같은 경우는 모든 컴포넌트에서 동일한 background-image를 설정해주기 위해 globalStyle에서 background-image를 설정했다. 과정은 다음과 같다. (css or scss를 사용하는 사람도 적용을 원하는 컴포넌트에서 그대로 따라하면 된다. 전역 설정 방법은 모름.) 1. 원하는 이미지를 import한다. import img1 from "../img/background1.jpeg"; import img2 from "../img/background2..
styled-components 기본 사용법 & ProviderTheme & globalSetting & motion-framer와 사용하기
Language & Framework/React.js 2022. 4. 17. styled-components 기본 사용법 & ProviderTheme & globalSetting & motion-framer와 사용하기 styled-components는 리액트에서 사용되는 대표적인 CSS in JS 라이브러리다. 어쩌고 저쩌고.. 이런 쓸데없는 설명은 여기저기 써있으니 패스하고 내가 styled-components를 사용하게 된 계기는 다음과 같다. ( 어제 처음 써봄 ㅎ ) 1. 클래스명 짓기가 귀찮다. BEM 규칙에 따라 지으면 되지만 그것도 귀찮다. 2. styled-components를 사용하다가 scss or css로 전환하는 건 러닝커브가 없으나 scss or css를 사용하다가 styled-components를 사용하면 러닝커브가 존재한다. 미리미리 대비해 놓으면 나중에 더 편하지 않을까? 3. 모듈식 개발을 하면 css 파일 여기저기 돌아다니며 수정해줘야 하는데 너무 귀찮다. '귀찮다'라는 말이 두번이나 ..
framer motion으로 라우터 전환 시 애니메이션 구현하기
Language & Framework/React.js 2022. 4. 15. framer motion으로 라우터 전환 시 애니메이션 구현하기 이런 생각을 하기 귀찮거나 나의 CSS 스킬이 갓 태어난 밤비 다리처럼 흔들흔들하다면 라이브러리 설치 후 사용도 좋은 방법입니다. react-transition-group 이라는 라이브러리를 설치하시면 간단한 애니메이션 부여하기 쉽습니다. 쉬운건 아니고 패턴만 아시면 됩니다. - 음지의 1타강사 코딩애플님(사랑해요) 코딩애플님의 명언을 떠올리며 갓 태어난 밤비처럼 흔들리는 다리를 붙들고 react-transition-group으로 라우터 전환 애니메이션을 구현하려고 했다. 근데 안 된다. 왜 안되지? 어제 하루를 온전히 react-transition-group 사용법 연구에 바쳤는데 결국 실패했다. 지연시간을 주는 것까지는 되는데 이상하게 css transition이 적용이 안되고 뻣뻣하게 넘어간다. 외..
리액트 warning : Cannot update a component (``) while rendering a different component (``). To locate the bad setState() call inside ``, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
Language & Framework/React.js 2022. 4. 14. 리액트 warning : Cannot update a component (``) while rendering a different component (``). To locate the bad setState() call inside ``, follow the stack trace as described in https://reactjs.org/link/setstate-in-render  일단 결론부터 말하자면 https://github.com/facebook/react/issues/18178#issuecomment-595846312 해당 주소로 접속하면 문제가 있는 코드를 탐색하는 방법을 안내하고 있다. 앞에 react- 어쩌고 저쩌고 표기되어 있으면 그냥 정상 코드, 붙어있지 않은 친구들이 문제 있는 아이들이니 확인해주면 된다. 해당 글을 대략적으로 읽어봤는데 v16부터 추가된 경고 메세지이며 당장 문제를 발생시키지는 않지만 어떤 방법을 사용해도 해당 경고 메세지를 제거할 수 없다면 추후 호환에 문제가 될 수 있으니 리액트 v15를 사용할 것을 권고하고 있다. 물론 지금은 이미 리액트 v18까지 나온 상태이니 옛날 얘기다. 나의 경우 event.js는 확인해보니 emitter에 관..
react-draggable을 이용해서 드래그 앤 드롭 구현하기
Language & Framework/React.js 2022. 4. 12. react-draggable을 이용해서 드래그 앤 드롭 구현하기 코딩 애플에서 리액트를 배우며 뼈대만 만들어 놓은 쇼핑몰이다. 당장 어떤 기능을 추가해볼지 마땅히 생각이 나지 않던 차에 최근 본 상품 목록이 스크롤 위치나 화면 크기에 따라 몹시 거슬린다는 사실을 알게 됐다. mouse move 이벤트를 이용하여 직접 만들어봐도 되겠지만, 예전에 자바스크립트에서 구현해본 결과 그다지 마음에 들지 않았고 이번에는 라이브러리를 활용해보기로 했다. https://www.npmjs.com/package/react-draggable react-draggable React draggable component. Latest version: 4.4.4, last published: 8 months ago. Start using react-draggable in your project..
React v18에서 나오는 에러 "ReactDOM.render is no longer supported in React 18"
Language & Framework/React.js 2022. 4. 4. React v18에서 나오는 에러 "ReactDOM.render is no longer supported in React 18" 현재 리액트를 사용하면 콘솔창에 "경고: ReactDOM.render는 React 18에서 더 이상 지원되지 않습니다. 대신 createRoot를 사용하세요. 새 API로 전환할 때까지 앱은 React 17을 실행하는 것처럼 작동합니다. 자세히 알아보기: https://reactjs.org/link/switch-to-createroot ”라는 경고 메세지가 계속해서 노출된다. ./src/index.js 파일을 확인하면 import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; React..

티스토리툴바