이고잉님 강의

전체 코드

import "./App.css";
import { useState } from "react";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";
import styled from "styled-components";

const HeaderTagStyled = styled(HeaderTag)`
  border-bottom: 1px solid gray;
  color: blue;
`;

function HeaderTag(props) {
  const myStyle = {
    borderBottom: "1px solid gray",
    padding: "10px",
    fontSize: "20px",
  };
  return (
    <header className={props.className} style={myStyle}>
      <h1>
        <a
          href="/"
          onClick={(evt) => {
            evt.preventDefault();
            console.log(props);
            props.onSelect();
            console.log("evt", evt);
          }}
        >
          Web
        </a>
      </h1>
    </header>
  );
}

function Nav(props) {
  const list = props.data.map((e) => {
    return (
      <li key={e.id}>
        <a
          href={"/read/" + e.id}
          onClick={(evt) => {
            evt.preventDefault();
            props.onSelect(e.id);
          }}
        >
          {e.title}
        </a>
      </li>
    );
  });

  return (
    <nav>
      <ol>{list}</ol>
    </nav>
  );
}

function Article(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      {props.body}
    </article>
  );
}

function Create(props) {
  return (
    <article>
      <h2>Create</h2>
      <form
        onSubmit={(evt) => {
          evt.preventDefault();
          alert("submit!");
          const title = evt.target.title.value;
          const body = evt.target.body.value;
          console.log(title, body);
          props.onCreate(title, body);
        }}
      >
        <p>
          <input type="text" name="title" placeholder="title"></input>
        </p>
        <p>
          <textarea name="body" placeholder="body"></textarea>
        </p>
        <p>
          <input type="submit" value="Create"></input>
        </p>
      </form>
    </article>
  );
}

function App() {
  const [mode, setMode] = useState("WELCOME");
  const [id, setId] = useState(null);
  const [nextId, setNextId] = useState(3);
  const [topics, setTopics] = useState([
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
  ]);
  function createHandler() {
    alert("create!");
  }
  let content = null;
  if (mode === "WELCOME") {
    content = <Article title="welcome" body="Hello, WEB!"></Article>;
  } else if (mode === "READ") {
    const topic = topics.filter((e) => {
      if (e.id === id) {
        return true;
      } else {
        return false;
      }
    })[0];
    content = <Article title={topic.title} body={topic.body}></Article>;
  } else if (mode === "CREATE") {
    content = (
      <Create
        onCreate={(title, body) => {
          const newTopic = { id: nextId, title, body };
          const newTopics = [...topics, newTopic];
          setTopics(newTopics);
          setId(nextId);
          setMode("READ");
          setNextId((nextId) => nextId + 1);
        }}
      ></Create>
    );
  }
  return (
    <div>
      <HeaderTagStyled
        onSelect={() => {
          setMode("WELCOME");
        }}
      ></HeaderTagStyled>
      <Nav
        data={topics}
        onSelect={(id) => {
          setMode("READ");
          setId(id);
          console.log(mode);
        }}
      />
      {content}
      <ButtonGroup
        variant="contained"
        aria-label="outlined primary button group"
      >
        <Button
          variant="outlined"
          onClick={() => {
            setMode("CREATE");
          }}
        >
          Create
        </Button>
        <Button variant="outlined" onClick={() => alert("Update!")}>
          Update
        </Button>
        <Button
          variant="outlined"
          onClick={() => {
            const newTopics = topics.filter((e) => {
              if (e.id === id) {
                return false;
              } else {
                return true;
              }
            });
            setTopics(newTopics);
            setMode("WELCOME");
          }}
        >
          Delete
        </Button>
      </ButtonGroup>
    </div>
  );
}

export default App;

styled-components 예제

import React from 'react';
import './style.css';
import styled from 'styled-components';

function MyReactButton(props) {
  console.log('props', props);
  return <button style={{ color: 'blue' }}>{props.children}</button>;
}

const MyFirstStyledButton = styled.button`
  color:blue;
  font-size:20px;
  b
`;

styled(MyFirstStyledButton)`
  background-color: green;
`;

const ChildButton = styled(MyFirstStyledButton)`
  background-color:green;
`;

function colorFn(props) {
  return props.primary ? 'white' : 'black';
}

const PropsButton = styled(ChildButton)`
  // color: white; // primary가 있으면 흰색, 없으면 검은색 color
  color: ${(props) => (props.primary ? 'white' : 'black')};
  background-color:${(props) => {
    props.primary ? 'blue' : 'gray';
  }}
`;

export default function App() {
  return (
    <div>
      <MyReactButton>My React Button!</MyReactButton>
      <MyFirstStyledButton>My First Styled Button</MyFirstStyledButton>
      <ChildButton>Child Button</ChildButton>
      <ChildButton as="a" href="http://w3c.org">
        Child Button
      </ChildButton>{' '}
      <PropsButton primary>Props button</PropsButton>
      <PropsButton>Props button</PropsButton>
    </div>
  );
}

코치님 강의

useState 코드

  const addTodo = (text) => {
    const newTodo = {text, hasCompleted: false};
    const newTodos = [...todo, newTodo];
    setTodo(newTodos);
  };

  const completeTodo = (index) => {
    const updatedTodo = [...todo];
    updatedTodo[index].hasCompleted = true;
    setTodo(updatedTodo);
  };

styled-components 코드

const AnswerInput = styled.input`
  margin-left: 12px;
  padding: 12px;
  box-sizing: border-box;
  font-size: 1.4rem;

  width: 150px;
  height: 45px;

  -moz-appearance: textfield;
  
  &::-webkit-outer-spin-button, &::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
  }
`

& : 현재 css요소 가리킴. 여기서는 styled.input 을 의미

css요소::-webkit-outer-spin-button, &::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
  }

이거는 css요소가 input창일때 화살표로 증감버튼나오는거 없애는 코드이다.