이론

지난 시간 counter 함수들 복습!!

MUI 사용

container

• 설치
  • 터미널에 npm install @mui/material @emotion/react @emotion/styled
• import하자!
  • import { Container } from "@mui/material";
• 코드 사용

  •   return (
        <Container>
          <Counter></Counter>
        </Container>
      );
    }```

Grid

• import
  • import Grid from "@mui/material/Grid";
• 사용

  •   function App() {
      return (
        <Container>
          <Grid container>
            <Counter></Counter>
            <Counter></Counter>
            <Counter></Counter>
            <Counter></Counter>
            <Counter></Counter>
            <Counter></Counter>
          </Grid>
        </Container>
      );
    }```

• 그리드를 이용하기!!

function App() {
  return (
    <Container>
      <Grid container spacing={1}>
        <Grid item xs={12} sm={6} md={4}>
          <Counter></Counter>
        </Grid>
        <Grid item xs={12} sm={6} md={4}>
          <Counter></Counter>
        </Grid>
        <Grid item xs={12} sm={6} md={4}>
          <Counter></Counter>
        </Grid>
      </Grid>
    </Container>
  );
}

toggle 버튼 만들기

function Counter2() {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ border: "10px solid black", padding: 20 }}>
      <h1>Counter - Dialog</h1>
      <Button
        variant="contained"
        onClick={() => {
          setOpen(true);
        }}
      >
        Run
      </Button>

      <div style={{ display: open ? "block" : "none" }}>
        <h2>Dialog Counter</h2>
        <button>+</button> 0
        <Button
          variant="contained"
          onClick={() => {
            setOpen(false);
          }}
        >
          close
        </Button>
      </div>
    </div>
  );
}

토글을 Dialog로 만들기!

import Dialog from "@mui/material/Dialog";

...
function Counter2() {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ border: "10px solid black", padding: 20 }}>
      <h1>Counter - Dialog</h1>
      <Button
        variant="contained"
        onClick={() => {
          setOpen(true);
        }}
      >
        Run
      </Button>

      <Dialog open={open}>// 여기 바꿔줌!!
        <h2>Dialog Counter</h2>
        <button>+</button> 0
        <Button
          variant="contained"
          onClick={() => {
            setOpen(false);
          }}
        >
          close
        </Button>
      </Dialog>
    </div>
  );
}

dialog 이용해보기

import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";

...

function Counter2() {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ border: "10px solid black", padding: 20 }}>
      <h1>Counter - Dialog</h1>
      <Button
        variant="contained"
        onClick={() => {
          setOpen(true);
        }}
      >
        Run
      </Button>

      <Dialog
        open={open}
        onClose={() => {
          setOpen(false);
        }}
      >
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogContent>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
          <button>+</button> 0
        </DialogContent>
        <DialogActions>
          <Button
            variant="contained"
            onClick={() => {
              setOpen(false);
            }}
          >
            close
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

random 컬러 리턴해주는 함수!

function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

<div style={{ border: "10px solid" + getRandomColor(), margin: "20px 0" }}>
	...
</div>

JSON 서버

npx json-server --port 9999 --watch db.json

• db.json 파일 생성된 것 확인!!
• http://localhost:9999/posts 를 입력하면 화면이 뜬다!
  

fetch API

• Promise를 사용함~!
• fetch를 사용할때 첫번째 파라미터는 URL
• then에는 모두 함수가 들어간다!
• 첫번째 then에 (resp)=>resp.json()
• 두번째 then (result) =>{ console.log(result)}

fetch('http://localhost:9999/counter')
    .then((resp)=>resp.json())
    .then((result)=>{
        console.log(result.value);
    })

useEffect를 사용해보기

• 컴포넌트가 실행될 때 마다 실행됨.
• 마지막에 빈 배열을 추가해주면 최초 1회만 실행하게 된다!

useEffect(() => {
    fetch("http://localhost:9999/counter")
      .then((resp) => resp.json())
      .then((result) => {
        console.log(result);
        setCount(result.value);
      });
  }, []);

• 위의 코드는 서버의 값을 변경하지 않는다.

fetch("http://localhost:9999/counter", {
            method: "PATCH",
            body: JSON.stringify({ value: count + 1 }),
            headers: {
              "Content-Type": "application/json",
            },
          })
            .then((resp) => resp.json())
            .then((result) => {setCount(result.value)});

• 이러면 서버값도 바뀜!!!!
• 오오 개신기해!!

출처 : 엘리스 아카데미