React Setting & CSS

in Dev on React


React 설치 및 실행

  • React 설치
$ npm i -g create-react-app
$ create-react-app my-app
  • React 실행
$ npm start

React 세팅

  • React 파일 구성

jsconfig.json : 기본 시작 폴더 정하기

{
    "compilerOptions": {
    // src 폴더를 기본 시작으로 (코드 작성 시 편의성을 위해)
    "baseUrl": "src"
    }
}
```  

### React 세부

index.js

```js
// react import
import React from "react";
// react-dom import
import ReactDOM from "react-dom";

// In React, the render() method is the only required method in a class component, and is responsible for describing the view to be rendered to the browser window.
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

// react import 및 { Component } import
import React, { Component } from "react";
// Components 폴더 내 Router.js import
import Router from "Components/Router";
// Components 폴더 내 GlobalStyles.js import
import GlobalStyles from "Components/GlobalStyles";

class App extends Component {
    render() {
        return (
            <>
                <Router />
                <GlobalStyles />
        );
    }
}

export default App;

Component 만들기

1. Router / Routes 모듈 생성 및 불러오기

Components/Router.js

import React from "react";
// BrowserRouter란 모듈을 Router, Route, Redirect, Switch란 변수로 나눠서 저장
import { BrowserRouter as Router, Route, Redirect, Switch } from "react-router-dom";

// Routes 폴더에 Router로 사용할 화면 import
import Main from "Routes/Main";
import Sub from "Routes/Sub";

// Components 폴더 내에 Component로 사용할 화면 import

export default () => (
    <Router>
        {/* 여러개의 components를 넣으려면 <>를 사용해야한다. */}
        <>
            <Local />
             {/* Switch를 사용하면 한번에 오직 하나의 Route만 render 할 수 있게 된다. */}
            <Switch>
                {/* exact : path가 정확한 위치를 가리킬 때만 render */}
                <Route path="/" exact component={Main} />
                <Route path="/sub" component={Sub}>
                {/* Redirect : path가 위 route가 아닌 모든 경우*에 path: "/"로 이동  */}
                <Redirect from="*" to="/">
            </Switch>
        </>
    </Router>
);
  • 각 Routes들

Main.js

export default () => "Main";

Sub.js

export default () => "Sub";
2. React CSS 적용
  • 세팅
npm i styled-components
npm i styled-reset
  • Global CSS 적용

Components/GlobalStyles.js (Global로 적용할 css)

// styled-components를 불러오면 js 내에 css를 적용 할 수 있다.
import { createGlobalStyle } from "styled-components";
// css reset 용 모듈
import reset from "styled-reset"

// js 내에 css를 적용하려면 `backtick`을 사용해야한다.
const globalStyles = createGlobalStyle`
    ${reset};
    a {
        text-decoration: none;
        color: inherit;
    }
    * {
        box-sizing: boarder-box;
    }

`

export default globalStyles;
  • Local CSS 적용

Local.js

import React from "react";
import { Link, withRouter } from "react-router-dom";
import styled from "styled-components";

// HTML element를 styled-components로 꾸며 준다.
const Local = styled.header`
    ~ CSS Desgin ~
`;

const List = styled.ul`
    ~ CSS Desgin ~
`;

const Item = styled.li`
     ~ CSS Desgin ~
     border-bottom: 3px solid ${props => props.current ? "#1abc9c" : "transparent"};
`;

const Anchor = styled(Link)`
    ~ CSS Desgin ~
`;


// 라우트가 아닌 컴포넌트에서 라우터에서 사용하는 객체(location, match, history) 를 사용하려면, withRouter라는 HoC 를 사용
export default withRouter(({ location: { pathname } })) => (
    // 위에서 CSS 설정한 변수들을 HTML 태그 대신 사용 가능하다.
    <Local>
        <List>
            <Item current={pathname === "/"}>
                <Anchor to="/"> Main </Anchor>
            </Item>
            <Item current={pathname === "sub"}>
                <Anchor to="/sub"> Sub </Anchor>
            </Item>
        </List>
    </Local>
)



© 2020.11. by creamer

Powered by CREAMer