React입문 1주차(실습 - 카운터 앱/Styling)

// src/App.js
import "./App.css";
import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const minusBtnClickHandler = () => {
    const newminusCount = count -1;
    setCount(newminusCount);
  }

  const plusBtnClickHandler = () => {
    const newPlusCount = count +1;
    setCount(newPlusCount);
  }

  return (
    <div>
      <div>{count}</div>
      <div>
        <button 
        onClick={minusBtnClickHandler}>-1</button>

        <button onClick={plusBtnClickHandler}>+1</button>
      </div>
    </div>

  );
}
export default App;

---

// src/App.js
import "./App.css";
import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>{count}</div>
      <div>
        <button
          onClick={() => {
            const newMinusCount = count - 1
            setCount(newMinusCount)
            // setCount(count -1);
          }}>
          -1
        </button>

        <button
          onClick={() => {
            const newPlusCount = count + 1
            setCount(newPlusCount)
            // setCount(count -1);
          }}>
          +1</button>


      </div>
    </div>

  );
}
export default App;

---

---

Component Styling

CSS 치트시트

padding
display : flex
    alignItems
    justifyContent
gap
width, height
border
borderRadius

---

import React from "react";

const App = () => {
  const style = {
    padding: "100px",
    display: "flex",
    gap: "12px",
  };

  const squareStyle = {
    width: "100px",
    height: "100px",
    border: "1px solid green",
    borderRadius: "10px",
		display: "flex",
    alignItems: "center",
    justifyContent: "center",
  };

  return (
    <div style={style}>
      <div style={squareStyle}>감자</div>
      <div style={squareStyle}>고구마</div>
      <div style={squareStyle}>오이</div>
      <div style={squareStyle}>가지</div>
      <div style={squareStyle}>옥수수</div>
    </div>
  );
};

export default App;

▼

컴포넌트 파일에서 CSS 코드 분리하기, JS파일에서 CSS를 별도의 모듈(파일)로 분리해서 사용

// ./src/App.js
import React from "react";
import './App.css';

const App = () => {

  return (
    <div className="app-style">
      <div className="component-style">감자</div>
      <div className="component-style">고구마</div>
      <div className="component-style">오이</div>
      <div className="component-style">가지</div>
      <div className="component-style">옥수수</div>
    </div>
  );
  
};

export default App;

> 컴포넌트 파일에서 className 을 넣어준다. 그리고 이 컴포넌트에서 적용할 CSS 파일을 import 해줄 것. 경로가 무척 중요하니 잘 확인하기

 

/* App.css */ 

.app-style {
  padding: 100px;
  display: flex;
  gap: 12px;
}

.component-style {
  width: 100px;
  height: 100px;
  border: 1px solid green;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

> 기존 style, squareStyle 변수에 넣어줬던 스타일 프로퍼티들을 별도에 CSS 파일로 옮겨보기

> 기존에는 style을 자바스크립트 객체로 작성했었기 때문에 CSS 프로퍼티의 값을 따옴표(””)로 감싸주었지만 CSS 문법에서는 따옴표, 콤마, css이름등등 css문법에 맞도록 고쳐주어야 한다.