본문 바로가기
개발 공부 일지/React

리액트 - CSS 스타일

by yelimu 2024. 8. 2.

자바스크립트에서 css파일을 import할 수 있다 

//index.css
body{
    background-color: #000;
    color: #fff;
}

//index.js
import './index.css';

import뒤에 바로 파일 경로를 붙여 불러온다

개발자도구에서 확인해보면 <head> 안에 <style>태그가 자동으로 작성되어있다. 

 

//Button.js 인라인 스타일ver.

const baseButtonStyle = {
    padding: '14px 27px',
    outline: 'none',
    cursor: 'pointer',
    borderRadius: '9999px',
    fontSize: '17px',
    };
    
    const blueButtonStyle = {
    ...baseButtonStyle,
    border: 'solid 1px #7090ff',
    color: '#7090ff',
    backgroundColor: 'rgba(0, 89, 255, 0.2)',
    };

    const redButtonStyle = {
    ...baseButtonStyle,
    border: 'solid 1px #ff4664',
    color: '#ff4664',
    backgroundColor: 'rgba(255, 78, 78, 0.2)',
    };
function Button({ children, onClick, color }){
    const style = color === 'red' ? redButtonStyle : blueButtonStyle;
    return <button style={style} onClick={onClick}>{children}</button>;
}

 

1. css파일 import 해주고

2. style 대신 classNames 변수에 Button 클래스와 ${color}를 받을수 있도록 함 (css 파일 참조) 

3. 버튼 태그에 className 속성으로 class 변경 

+ color 파라미터에 기본값 설정해주기 (undefined 로 들어가는걸 방지) 

//Button.css
.Button {
    padding: 14px 27px;
    border-radius: 9999px;
    outline: none;
    font-size: 17px;
    cursor: pointer;
  }
  
  .Button.blue {
    border: solid 1px #7090ff;
    color: #7090ff;
    background-color: rgba(0, 89, 255, 0.2);
  }
  
  .Button.red {
    border: solid 1px #ff4664;
    color: #ff4664;
    background-color: rgba(255, 78, 78, 0.2);
  }
  
  //Button.js

import './Button.css';

function Button({ children, onClick, color = 'blue'}){
    const classNames = `Button ${color}`;
    return (
    <button className={classNames} onClick={onClick}>{children}</button>
    );
}

margin 등 과 같이 요소 바깥쪽에 영향을 미치는 스타일은 부모 컴포넌트에서 적용해주는게 더 좋다 

자식 요소들간의 여백을 조절할 수 있으니 부모 컴포넌트 관점에서 확인하는게 더 직관적으로 스타일을 다룰 수 있다. 

 

1. Button컴포넌트의 className prop을 추가하고 기본값으로는 빈 문자열로 지정.

2. classNames 에도 className prop 추가 

    (컴포넌트 태그를 작성할때 전달한 className이라는 prop이 HTML 태그의 className속성으로 추가) 

3. 부모 컴포넌트인 App 컴포넌트에서

   1) App.css import

   2) div에다가 className = "App", button 요소에다가 className = "App-button" 

      (스타일 작성할때 .App 의 자식인 .App-button에 적용되도록 했기 때무네~) 

//Button.js
function Button({ children, onClick, color = 'blue', className = ''}){
    const classNames = `Button ${color} ${className}`;
    return (
    <button className={classNames} onClick={onClick}>{children}</button>
    );
}

//App.css
.App .App-button {
    margin: 6px;
}

//App.js
import './App.css';

//...중략

    return (
            <div className="App">
                <Button className="App-button" color="blue" onClick={handleRollClick}>던지기</Button> 
                <Button className="App-button" color="red" onClick={handleClearClick}>처음부터</Button>
                <div>
                    <Board name="나" color="blue" gameHistory={myHistory} />
                    <Board name="상대" color="red" gameHistory={otherHistory} />
                </div>        
            </div>

    )

버튼 사이에 margin 을 적용

컴포넌트에 className을 직접 할당 할때

 

function HandButton({ value, onClick }) {
  const handleClick = () => onClick(value);
  return (
    <button className='HandButton' onClick={handleClick}>
      <HandIcon className='HandButton-icon' value={value} />
    </button>
  );
}

 

부모 컴포넌트로부터 className을 props으로 전달할 때 

 

function HandIcon({ value, className }) {
  const src = IMAGES[value];
  return <img src={src} alt={value} className={className}/>;
}

'개발 공부 일지 > React' 카테고리의 다른 글

리액트 - 프로젝트 시작하기  (0) 2024.08.06
리액트 - 배포하기  (0) 2024.08.02
리액트 - 인라인 스타일  (0) 2024.08.01
리액트에 대해 - 생명주기 / React vs. vue, angular  (0) 2024.08.01
리액트에 대해 - 리액트를 사용하는 이유 / virtual DOM  (0) 2024.08.01

관련글

티스토리툴바