[React] React : Styling

 

 

1. inLine Styling

컴포넌트 내부에 style 속성을 직접 적용하여 인라인 스타일을 적용함

자바스크립트 형태로 작성되며, 컴포넌트의 JSX 요소에 직접 지정

 

<div style={{color:'red', fontsize:'16px'}} Hello </div>

 

 

 

2. CSS 모듈

리액트에서 제공하는 기능

컴포넌트 단위로 CSS 클래스를 고유하게 지정

CSS 파일은 로컬 범위를 가지며 동일한 이름의 클래스끼리의 충돌을 방지함

 

import myStyle from './MyComponent.module.css';

function MyComponent() {
	return <div className={myStyle.container}> Hello </div>
}

 

 

 

 

 

3. CSS-in-JS 라이브러리

>> 가장 유명함!

자바스크립트 코드 안에서 스타일을 작성하고 관리할 수 있는 방식

styled-component를 사용하여 템플릿 리터럴 문법으로 컴포넌트와 관련된 스타일을 정의할 수 있음

 

import style from 'styled-component';

const MyButton = styled.button`
	background-color: tomato;
    color: white;
`;

funcion MyComponent() {
	return <MyButton> Hello </MyButton>
}

 

>> 설치 해야 쓸 수 있음

 

 

 

 

4. 외부 CSS 프레임워크 및 라이브러리

외부 프레임워크와 라이브러리를 사용하여 디자인 시스템을 구축함

Bootstrap : 가장 인기있는 HTML, CSS, JavaScript 프론트엔드 프레임워크

 

1. 그리드 시스템 : 유연한 배치와 반응형 레이아웃 표현이 가능

2. 버튼, 네비게이션 바, 카드 등 이미 정의된 컴포넌트를 제공

 

 

Bootstrap 

 

 

 

 

---

 

# 정리

 

 

App.js

import Button from './Button';
import styled from 'styled-components';
import 'bootstrap/dist/css/bootstrap.min.css';
import BootButton from 'react-bootstrap/Button';
import {Container, Row, Col} from 'react-bootstrap';

const StyledButton = styled.button`
  background-color:aqua;
  color:white;
  padding:10px;
  
  &:hover {
    background-color:blue;
  }
`;

function App() {
  return (
    <>
      <p> 
        <h2> [Button.모듈.css] </h2>
        <Button />
      </p>
      <p>
        <h2> ['styled-components'] </h2>
        <StyledButton> StyledButton </StyledButton>
      </p>
      <p>
        <h2> ['react-bootstrap/Button'] </h2>
        <div className='App'>
          <BootButton as="input" type="button" value="Input" />
        </div>
      </p>
      <p>
        <Container>
          <Row>
            <Col>
              <h2> [react-bootstrap 버튼 종류] </h2>
              <BootButton variant='default'> 버튼 </BootButton>
              <BootButton variant='primary'> 버튼 </BootButton>
              <BootButton variant='success'> 버튼 </BootButton>
              <BootButton variant='info'> 버튼 </BootButton>
              <BootButton variant='warning'> 버튼 </BootButton>
              <BootButton variant='danger'> 버튼 </BootButton>
              <BootButton variant='link'> 버튼 </BootButton>
            </Col>
          </Row>
        </Container>
      </p>

    </>
  );
}

export default App;

 

Button.js

import React from "react";
import myStyle from "./Button.module.css";

const Button = () => {
    return (
        <button className={myStyle.button}> Click! </button>
    );
}

export default Button;

 

Button.module.css

.button {
    background-color: tomato;
    color: black;
    padding: 30px;
}

.button:hover {
    background-color: blanchedalmond;
}

 

 

---

 

# 그 외

 

구글에 bootstrap template 검색하면 엄청 많이 나옴

 

 

React 템플릿 사이트

 

뒤에 에러페이지 보고 필요한 모듈 다운받기