2024-04-03 78일차 React

📅2024. 04. 03 78일차

---

🎨 React_TODOLIST

TodoList 적용, 할일 추가 폼

• 코드펜에서 사용한 TodoList을 적용

• 할 일 추가 폼 구현

		<form onSubmit={onSubmit}>
          <input type="text" name="title" autoComplete="off" placeholder="할 일 입력해" />
          <button type="submit">추가</button>
          <button type="reset">취소</button>
        </form>

github TodoList 적용, 할일 추가 폼

TODO 추가 폼 꾸미기

• MUI, Button 컴포넌트 사용해서 추가 폼 사용

 <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>

github TODO 추가 폼 꾸미기

Todo의 리스팅

• App 컴포넌트 return 부분에 리스트형태로 추가 UI에 보여주기

      할 일 갯수 : {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>

github Todo의 리스팅

Chip 적용

• Chip MUI 적용하여 리스트 보여주기

      <nav>
        <ul>
          {todosState.todos.map((todo) => (
            <li key={todo.id}>
              <div className="tw-flex tw-flex-col tw-gap-2 tw-mt-[30px]">
                <Chip label={`번호 : ${todo.id}`} variant="outlined"></Chip>
                <Chip label={`날짜 : ${todo.regDate}`} variant="outlined"></Chip>
                <Chip label={`할 일 : ${todo.content}`} variant="outlined" color="primary"></Chip>
              </div>
            </li>
          ))}
        </ul>
      </nav>

• 할 일은 Chip 사용하면 이상할 듯? 그냥 div로 감싸고 스타일을 줘보자!~!

<div className="tw-p-10 tw-rounded-[20px] tw-shadow tw-whitespace-pre-wrap tw-leading-relaxed">
	할 일 : {todo.content}
</div>

github Chip 적용

---

🔒문제발생

• useEffect 써서 최초 한 번 만 실행되게 했는데... 두 번 실행됨... 왜??

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

🔓문제해결

해당 이슈는 React 18 에서 도입된 strict mode 기능에 의해 발생한다. Next.js 의 개발 환경에서는 이 stirct mode 가 활성화되어 있다.

• strict mode란?
  strict mode 는 개발 환경에서 어플리케이션을 더 엄격하게 검사하여 예상치 못한 버그를 사전에 찾아내는 데에 도움을 주는 기능이다.

이를 활성화 하게 되면,

컴포넌트의 불완전한 렌더링을 검사하기 위해, 한 번 더 렌더링된다.

Effect 클린업 함수를 작성하지 않아 발생하는 버그를 검사하기 위해, Effect 들을 한 번 더 실행한다.

컴포넌트에서 더 이상 사용되지 않는 API 를 사용하는 지 검사한다.

• 결론적으로
  해당 이슈가 발생한 원인이 strict mode 때문임을 알 수 있다.

strict mode 비활성

비활성화 전 유의해야할 점이 몇 가지 있다.

우선, strict mode 는 개발 환경에서만 동작하고, 프로덕트 배포 환경에서는 동작하지 않는다.

또한, strict mode 는 상술했듯 예기치 못한 버그들을 찾아내는 데에 도움을 준다.

따라서, 개발 환경에서 필수적으로 해당 문제를 해결해야 하는 상황이 아니라면, 굳이 strict mode 를 비활성화 할 필요는 없다. 어차피 배포 환경에서는 원하는 대로 Effect 가 한 번만 호출된다.

// next.config.js
const nextConfig = {
    reactStrictMode: false,
};

module.exports = nextConfig;

next.config.js 파일을 위와 같이 수정하면 비활성화 끝!

---

TextField 수정

• TextField에 multiline minRows={3} maxRows={10} 속성 추가

<TextField
    multiline
    minRows={3}
    maxRows={10}
    name="content"
    autoComplete="off"
    label="할 일을 입력해"
    variant="outlined"
/>

Box sx, theme light,dark

• 리스트를 Box sx로 보여주기

<Box sx={{ color: 'primary.main' }}>{todo.content}</Box>

• 테마 색깔 추가 light, dark

const theme = createTheme({
  palette: {
    typocraphy: {
      fontFamily: ['GmarketSansMedium'],
    },
    type: 'dark',
    primary: {
      main: '#2196f3',
      light: 'rgb(77, 171, 245)',
      dark: 'rgb(23, 105, 170)',
      contrastText: '#fff',
    },
    secondary: {
      main: '#f50057',
    },
  },
});

• 해당 색깔 사용할 때

color: 'primary.main'

위에 방법으로 사용가능

github Chip 상단 여백, Box sx, theme light,dark

보여주는 todoList을 역순(최신순)으로 바꾸자!

 setTodos((todos) => [...todos, newTodo]);

newTodo가 앞으로 먼저 보이게 바꾸면 될 듯

setTodos((todos) => [newTodo, ...todos]);

MUI theme color들을 CSS에서 활용할 수 있도록 CSS 변수화

• MUI에서 theme color을 뽑아와서 CSS에서 활용할 수 있도록 해보자!!

React.useEffect(() => {
    const r = document.querySelector(':root');

    muiThemePaletteKeys.forEach((paletteKey) => {
      const themeColorObj = theme.palette[paletteKey];
      // console.log(themeColor);

      for (const key in themeColorObj) {
        // console.log(key);
        if (Object.hasOwnProperty.call(themeColorObj, key)) {
          const colorVal = themeColorObj[key];
          r.style.setProperty(`--mui-color-${paletteKey}-${key}`, colorVal);
        }
      }
    });
  }, []);

• useEffect 내에서 코드는 HTML 문서의 :root 요소를 선택.

• muiThemePaletteKeys 배열에는 MUI 팔레트의 다양한 부분에 해당하는 키가 포함되어 있다.

• forEach 루프는 muiThemePaletteKeys 배열의 각 키를 반복.

• 각 키에 대해 코드는 테마 팔레트 객체에서 색상 값을 검색하고 setProperty 메소드를 사용하여 이를 CSS 변수로 설정. 이를 통해 CSS 스타일시트에서 이러한 색상을 사용할 수 있다.

tw-text-[--mui-color-warning-main] 

이런식으로 사용가능!!

github mui theme color들을 CSS에서 활용할 수 있도록 CSS 변수화

오늘의 개념

css변수

• CSS 변수 기능

사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담는다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;) var() 함수를 사용해 접근할 수 있다. (color: var(--main-color);)

복잡한 웹사이트 같은 경우 엄청난 양의 CSS를 가지고 있는데, 유지보수를 하다 보면 여러 곳에서 사용한 임의의 값을 한꺼번에 바꿔야 할 때가 있다. 그 값들을 하나씩 찾아서 일일이 바꾸려면 상당히 피곤할 것이고, 때에 따라 실수도 많을 것이다.
그래서 여타 프로그래밍 언어처럼 변수를 이용하면, 요소 전반에 걸쳐 사용되는 임의의 값을 변수에 저장하고 호출하면 보다 효율적인 프로그래밍이 가능해진다.

css변수 선언 및 호출

:root {
	--main-font-color: #000f22;  /* CSS 전역 변수 선언 */
}

div {
	color: var(--main-font-color);   /* CSS 변수 사용 */
}

CSS 변수(--variable) 사용법 & 응용 정리

tailwind JIT

tailwind의 조건적 디자인