본문 바로가기

Dev/reactJS14

여러가지 리액트 멀티 레이아웃 connected-react-router multi layout 적용하기 리액트를 별로 좋아하지 않는 1인이다. 그런데 어쩔 수 없이 리액트 플젝을 해야 해서 퍼블리셔 겸 프런트 엔드로 참여 중이다. jquery라면 단박에 끝낼 문제에 고민하지 않아도 될 문제들이 리액트에는 넘쳐난다. 왜 쓰는지는 여전히 모르겠지만 까라니까 깐다. 일단 SPA 사이트에서 리액트가 편한 것은 대충 짐작은 된다. 그런데 SPA사이트라고는 해도, 한 사이트에 서로 다른 레이아웃이 여럿 사용해야 되는 경우가 많다. 단적으로 GNB, LNB가 없는 Intro페이지, Login페이지 그리고 사용자 화면과 다른 관리자 화면의 레이아웃은 서로 다를 수 있다. 아니 다를 수 있는 정도가 아니라 대체로 다르다. 그럴 때 리액트 여러 가지 레이아웃 적용하는 방법은 꽤 다양하지만 직관적이고 쉬운 리액트 멀티 레이아.. 2021. 3. 25.
React Js - Global CSS 설정 + styled reset. classNames/bind :global local css 동시 적용 react module.css :global local css 동시 적용하는 방법. classNames/bind를 사용하고 있을 때 className={cx("label","labelTst")} .labelTst는 app.module.css에 등록. React Js - Global CSS 설정 + styled reset css 초기화를 위해 styled-reset 설치 styled-components는 local로 동작하기 때문에 global 한 css를 만들기 위해 GlobalStyles.js 생성 설치 NPM설치 : npm install styled-reset styled-components 얀 살치: yarn add styled-reset styled-components 사용 Components/G.. 2021. 3. 10.