일단 Doit

React Router 설정하는 방법은 크게 2가지 입니다. Data API를 사용하는 지원하는 Router (v6.4) Data API를 지원하지 않는 Router Components 공식문서에서는 Data API를 사용하는 지원하는 새 Router를 사용하는 것을 권장합니다. 사용법은 어렵지 않으나, 아직 Transition 효과를 적용하는 예제가 많지 않습니다. 따라서, 2가지 방법에 대해 알아보고자 합니다. https://innovatorwhy.tistory.com/10 React Router - Data API를 사용하는 Router Router 사용하는 순서는 아래와 같습니다. App.js - router 생성 및 RouterPrivder 정의 routes 배열 정의 - path 및 eleme..

React/Router 2023. 1. 20. 16:57

alias 설정이 아래와 같이 끝났다면 https://innovatorwhy.tistory.com/7 React Path alias 절대경로 설정 React에서 import를 할때 상대경로를 사용하는 경우가 많은데, 아래와 같이 상대경로가 복작한 경우가 많다. import { Page } from '../../components/Container'; import UserPopup from '../../../components/popup/UserPopup'; 이 innovatorwhy.tistory.com 별다른 설정을 하지 않으면 import문 작성시 code hint가 뜨지 않는다. 따라서 vscode에서 인식하도록 설정이 필요하다. jsconfig.json { "compilerOptions": { "..

React 2023. 1. 20. 16:54

React에서 import를 할때 상대경로를 사용하는 경우가 많은데, 아래와 같이 상대경로가 복작한 경우가 많다. import { Page } from '../../components/Container'; import UserPopup from '../../../components/popup/UserPopup'; 이때 사용하는 것이 alias craco, react-app-rewire-alias등 오픈 라이브러리가 있으니 골라서 사용하면된다. 다운수가 좀 더 많은 react-app-rewire-alias 사용 설치 npm install --save-dev react-app-rewire-alias 2. config-overrides.js 파일 생성 const { alias } = require('react..

React 2023. 1. 20. 16:53

React로 Page를 개발하는데, Rendering이 두번씩 실행되는 경우가 있다. 한참을 코드 분석해도 원인을 알수 없다가, 우연히 해결했는데... 바로 Strict 모드 !! const StyledPage = () => { console.log('Rendering'); return ( styled-components 버튼1 버튼2 ); }; export default StyledPage; console을 찍으면 두번씩 호출 index.js - Strict 모드 주석처리 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( // // ); console이 한번으로 줄었다. 그렇다고, Strict Mode를 사용하..

React 2023. 1. 20. 16:52

https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com 1. styled-components 사용하기전에 Template Literal에 대해 먼저 알아야 한다. const name = 'template literal'; const message = `string text ${name}`; console.log(message); //string text template literal 간단히 말해서 string에 변수를 조합해서 사용하는 방..

React 2023. 1. 20. 16:48

예전부터 사용하던 CSS 나 SCSS와 같이 Style을 정의해서 사용합니다. 파일 구성 SamplePage.jsx import './style/SamplePage.css'; const SamplePage = () => { return ( {}} /> 제목 ); }; export default SamplePage; 장점 - 기존 퍼블리셔와 역할은 분리할 수 있다. - Style CSS로 파싱하는 작업이 없기 때문에 React Style 보다 속도가 빠르다.

React 2023. 1. 20. 16:43

html Inline Style과 마찬가지로 Html 코드상에 Style을 정의하는 방식입니다. 단, Style을 정의할떄 Object형태로 정의해야 합니다. 작성 예제는 아래와 같습니다. const title = { color: '#000', fontWeight: '700', fontSize: '1.5rem', marginBottom: '40px', marginTop: '20px', display: 'inline-flex', width: '100%', marginLeft: '25px', } const App = () => { return ( ); } export default App; 장점 1) 한 소스에서 Html과 Style 정의가 가능하기 때문에 소스하나만 유지보수 하면 된다. 단점 1) 유지보수..

React 2023. 1. 20. 15:32

3가지 방법을 소개하고자 합니다. 1. Inline Style CSS https://blog.naver.com/innovatorwhy/222962568833 Inline Style CSS html Inline Style과 마찬가지로 Html 코드상에 Style을 정의하는 방식입니다. 단, Style을 정의할떄 ... blog.naver.com 2. Import Style CSS https://blog.naver.com/innovatorwhy/222962581967 Import Style CSS 예전부터 사용하던 CSS 나 SCSS와 같이 Style을 정의해서 사용합니다. 파일 구 SamplePage.jsx ... blog.naver.com 3. CSS in JS : styled-components htt..

React 2023. 1. 20. 15:23