[DAY - 74] bootstrap, material, styled

• bootstrap
• material
• styled

 

1) bootstrap

 

오늘은 style을 다른 방법으로 적용시키는 것을 배웠다.

그중에 bootstrap은 css를 잘 사용하지 못하는 사람들이 사용할 수 있도록 만들어 놓은 것이다.

 

https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

npm install react-bootstrap bootstrap

 

bootstrap을 설치 한 뒤 css를 import 해준다.

 

import 'bootstrap/dist/css/bootstrap.min.css';

 

components 탭에서 필요한 것을 그대로 가져오면 된다.

 

bootstrap

import Table from 'react-bootstrap/Table';
import 'bootstrap/dist/css/bootstrap.min.css';
function Test1() {
  return (
    <Table striped bordered hover>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td colSpan={2}>Larry the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </Table>
  );
}
export default Test1;

 

 

 

2) material

 

material도 bootstrap과 비슷한 기능을 한다.

 

https://mui.com/

MUI: The React component library you always wanted

https://mui.com/material-ui/getting-started/installation/

Installation - Material UI

npm install @mui/material @emotion/react @emotion/styled

material radio

import * as React from 'react';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';

export default function Test2() {
    return (
        <FormControl>
            <FormLabel id="demo-radio-buttons-group-label">Gender</FormLabel>
            <RadioGroup
                aria-labelledby="demo-radio-buttons-group-label"
                defaultValue="female"
                name="radio-buttons-group"
            >
                <FormControlLabel value="female" control={<Radio />} label="Female" />
                <FormControlLabel value="male" control={<Radio />} label="Male" />
                <FormControlLabel value="other" control={<Radio />} label="Other" />
            </RadioGroup>
        </FormControl>
    );
}

 

많은 예시들 중에 radio를 적용해 보았다.

 

radio

 

 

3)  sytled

 

styled components의 경우 위에 알아본 두 방식에 비해 더 많이 사용되는 듯하다.

 

https://styled-components.com/

styled-components

 

vscode 익스텐션도 설치해 준다.

 

https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components 

vscode-styled-components - Visual Studio Marketplace

# with npm
npm install styled-components

# with yarn
yarn add styled-components

 

사용을 할 때 import를 해주아야 한다.

 

import styled from 'styled-components'

import React from 'react';
import styled from 'styled-components'

// scss
const Container = styled.div`
    width: 600px;
    border: 1px solid #000;
    padding: 10px;
    margin: 30px auto;
`
const Box1 = styled.article`
    padding: 20px;
    background-color: tan;
    border-radius: 50px;
    text-align: center;
    line-height: 50px;
    transition: 0.3s;
    font-size: 20px;
    margin-bottom: 10px;
    &:hover {
        background-color: lightblue
    }
`
const Box2 = styled.section`
        padding: 20px;
    background-color: tan;
    border-radius: 50px;
    text-align: center;
    line-height: 50px;
    transition: 0.3s;
    font-size: 20px;
    margin-bottom: 10px;
    &:hover {
        background-color: lightcoral
    }
`
const Box3 = styled('div')`
    padding: 20px;
    background-color: tan;
    border-radius: 50px;
    text-align: center;
    line-height: 50px;
    transition: 0.3s;
    font-size: 20px;
    &:hover {
        background-color: lightgreen
    }`

const Test4 = () => {
    return (
        <div>
            <Container>
                <Box1>연습</Box1>
                <Box2>연습</Box2>
                <Box3>연습</Box3>
            </Container>
        </div>
    );
};

export default Test4;

 

위와 같이 사용을 하는데 출력된 element를 확인해 보면 지정한 태그로 출력이 된다.

 

styled

 

article, secrion, div가 순서대로 들어가 있다.

일반적인 css나 sass에 비해 props로 값을 받아 사용이 가능하다는 장점이 있다.

 

import React from 'react';
import styled, {css} from 'styled-components'

const Test5 = () => {
    return (
        <Container ww="400px" bg="pink">
            <Box width="120px">Test1</Box>
            <Box width="100px">Test2</Box>
            <Box width="150px">Test3</Box>
            <Box color="green">Test4</Box>
            <Box primary>Test5</Box>
        </Container>
    );
};

export default Test5;

const Container = styled.div`
    border: 1px solid #000;
    margin: 10px;
    padding: 10px;
    width: ${props => props.ww};
    background: ${props => props.bg ? props.bg : 'tan'};
`
const Box = styled.button`
    --accent-color : white;
    --font-s20 : 20px;

    width: ${props => props.width ? props.width : '100px'};
    height: 50px;
    margin: 10px;
    color: ${props => props.color ? props.color : 'red'};
    font-size: var(--font-s20);
    ${props => props.primary && css`
        display: block;
        width: 100%;
        border: none;
        border-radius: 30px;
        background: #000;
        color: var(--accent-color);
    `}
`

styled

 

bg='pink'처럼 해당 요소에 bg값의 존재 유무에 따른 다른 style을 적용시켜 주는 삼항연산자도 사용 가능하고, --font-s20 변수에 값을 담아 호출하는 것도 가능하다.