78일차 - react, JIT

react

• vs code 커맨드 키
  • ctrl + shift + l 누르면 일괄 수정 가능

useEffect

• useEffect 참고자료
• useEffect가 하는 일은 무엇일까요? useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말합니다. React는 우리가 넘긴 함수를 기억했다가(이 함수를 ‘effect’라고 부릅니다) DOM 업데이트를 수행한 이후에 불러낼 것입니다.
• next.js useState 두 번 호출?

Todo의 리스팅

const App = () => {
  const todosState = useTodoStatus(); // 리액트 커스텀 훅

  React.useEffect(() => {
    todosState.addTodo('스쿼트');
    todosState.addTodo('벤치');
    todosState.addTodo('데드');
  }, []);

  const onSubmit = (e) => {
    e.preventDefault();
    const form = e.currentTarget;

    form.content.value = form.content.value.trim();

    if (form.content.value.length == 0) {
      alert('할 일 써');
      form.content.focus();
      return;
    }

    todosState.addTodo(form.content.value);
    form.content.value = '';
    form.content.focus();
  };

  return (
    <>
      <AppBar position="fixed">
        <Toolbar>
          <div className="tw-flex-1">
            <FaBars onClick={() => setOpen(true)} className="tw-cursor-pointer" />
          </div>
          <div className="logo-box">
            <a href="/" className="tw-font-bold">
              TODO!
            </a>
          </div>
          <div className="tw-flex-1 tw-flex tw-justify-end">
            <a href="/write">글쓰기</a>
          </div>
        </Toolbar>
      </AppBar>
      <Toolbar />
      <form className="tw-flex tw-flex-col tw-p-4 tw-gap-2" onSubmit={onSubmit}>
        <TextField name="content" autoComplete="off" label="할 일을 입력해" variant="outlined" />
        <Button className="tw-font-bold" variant="contained" type="submit">
          추가
        </Button>
      </form>
      할 일 갯수 : {todosState.todos.length}
      <nav>
        <ul>
          {todosState.todos.map((todo) => (
            <li key={todo.id}>
              <div className="tw-flex tw-flex-col tw-gap-2">
                <span>번호 : {todo.id}</span>
                <span>날짜 : {todo.regDate}</span>
                <span>할 일 : {todo.content}</span>
              </div>
            </li>
          ))}
        </ul>
      </nav>
    </>
  );
};

css 변수

• CSS 변수
• 본인, 본인의 자식말고는 접근할 수 없다. 형제, 자매, 남매는 접근 불가능이백숙
• :root 최상위를 뜻함 맨 위에있는 친구

:root {
  --color: gold;
  --bg-color: blue;
}

.box > section {
  border: 5px solid black;
}

.box > .section1 {
  color: var(--color);
}

.box > .section2 {
  color: var(--color);
  border-color: red;
}
.box > .section3 {
  border-color: green;
  background-color: var(--bg-color);
}

JS에서 정의된 색상을 CSS에서 활용

css

div {
  background-color: var(--mui-primary-main);
  color: var(--mui-primary-contrastText);
  font-size: 4rem;
  font-weight: bold;
}

java script

• setProperty: 내가 정의한대로 사용하겠다!

console.clear();

const palette = {
  primary: {
    main: "#2196f3",
    light: "rgb(77, 171, 245)",
    dark: "rgb(23, 105, 170)",
    contrastText: "#fff"
  }
};

const r = document.querySelector(":root");
console.log(r);

r.style.setProperty("--mui-primary-main", palette.primary.main);
r.style.setProperty("--mui-primary-contrastText", palette.primary.contrastText);

just-in-time

• tailwind JIT
• tailwind responsive-design
• 차세대 Tailwind css
• media 카카오페이지 스크립트?
• after, before

mui

• palette
• mui에서 뽑아내서 올린다?
• MUI CSS theme variables

group-hover:

• group-hover에 속한 애들은 어떤 곳에 올리든 전부 효과가 적용이 된다.

content 좌 우 분리

<div className="tw-p-10 tw-rounded-[20px] tw-shadow tw-flex">
                  <Button className="tw-rounded-[20px_0_0_20px] hover:tw-bg-red-300 tw-flex-shrink-0 tw-items-center">
                    <span>체크박스</span>
                  </Button>
                  <div className="tw-bg-blue-500 tw-flex-grow hover:tw-text-[--mui-color-primary-main] tw-whitespace-pre-wrap tw-leading-relaxed tw-break-words">
                    {todo.content}
                  </div>
                  <div className="tw-bg-green-500 tw-w-[150px] tw-flex-shrink-0">후</div>

TODO

• 오늘 배운 mui, css 변수 복습
• 개인 프로젝트 재료공구페이지 오류수정

느낀점

• css변수..! 페이지같은거 F12눌렀을때 음 이게 뭐지 싶었던 친구들! 많이 본 모양들! 신기하다