React 인라인 스타일

인라인 스타일로 작성하는 방법

1. 변수에 스타일을 담기

import React from 'react'

const style = {
  // 속성: '값',
  // background-color: 'pink',
  backgroundColor: 'pink',  // 카멜케이스로 작성
};

function Button({ children, onClick }) {
  return (
    {/* 1. 변수에 스타일을 담기 */}
    <button style={style} onClick={onClick}>{children}</button>
  )
}

export default Button

• 재사용성이 높아지는 방법 ⇒ className prop을 전달받을 수 있도록 하기

import './Nav.css';

function Nav({ className = '' }) {
  const classNames = `Nav ${className}`;
  return (
    <ul className="Nav">
      <li><a href="https://www.google.com">구글로 가기</a></li>
      <li><a href="https://www.naver.com">네이버로 가기</a></li>
      <li><a href="https://www.codeit.com">코드잇으로 가기</a></li>
    </ul>
  );
}

export default Nav;

---

1. 객체 형태의 값을 속성 값으로 작성

import React from 'react'

function Button({ children, onClick }) {
  return (
    {/* 객체형태의 값을 속성값으로 작성할 수 있음 */}
    <button style={{backgroundColor: 'gray'}} onClick={onClick}>{children}</button>
  )
}

export default Button

예시

import React from 'react'
import Board from './Board'
import Button from "./Button";
import { useState } from "react";

function random(n) {
  return Math.ceil(Math.random() * n);
}

function App() {
  // state 리프팅 => 자식 component에서 사용했던 state를 부모 component로 끌어올리기
  const [myHistory, setMyHistory] = useState([]);
  const [otherHistory, setOtherHistory] = useState([]);
  
  const handleRollClick = () => {
    const nextMyNum = random(6);
    const nextOtherNum = random(6);
    setMyHistory([...myHistory, nextMyNum]);
    setOtherHistory([...otherHistory, nextOtherNum]);
  };

  const handleClearClick = () => {
    setMyHistory([]);
    setOtherHistory([]);
  };

  return (
    <div>
      <div>
				{/* color 에 따라서 버튼 색상 변경 */} 
        <Button color= 'blue' onClick={handleRollClick}>던지기</Button>
        <Button color= 'red' onClick={handleClearClick}>처음부터</Button>
      </div>
      <div>
        <Board name="나" color="blue" gameHistory={myHistory} />
        <Board name="상대" color="red" gameHistory={otherHistory} />
      </div>
    </div>
  )
}

export default App;

import React from 'react'

// 공통된 style은 baseButtonStyle에 작성
const baseButtonStyle = {
  padding: '14px 27px',
  borderRadius: '30px',
  outline: 'none',
  cursor: 'pointer',
  fontSize: '17px',
};

const blueButtonStyle = {
  // 스프레드 문법으로 공통 style 불러옴
  ...baseButtonStyle,
  backgroundColor: 'rgba(0, 89, 2555, 0.2)',
  border: 'solid 1px #7090ff',
  color: '#7090ff'
};

const redButtonStyle = {
  // 스프레드 문법으로 공통 style 불러옴
  ...baseButtonStyle,
  backgroundColor: 'rgba(255, 78, 78, 0.2)',
  border: 'solid 1px #ff4664',
  color: '#ff4664'
};

function Button({ children, onClick, color }) {
  const style = color === 'red' ? redButtonStyle : blueButtonStyle;

  return (
    <button style={style} onClick={onClick}>{children}</button>
  )
}

export default Button