1. 세팅에 대해서
리엑트 icons. 리엑트에서 사용할 font awsome이라고 생각하면 편하다.
https://react-icons.github.io/react-icons/
주요 세팅들
"emmet.includeLanguages": { "javascript": "javascriptreact" },
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
"editor.formatOnSave": true,
"files.defaultLanguage": "javascriptreact",
"workbench.settings.applyToAllProfiles": []
}flex-1 grow가져가는것
2. 컴포넌트에 관하여
강사님은 mui의 요소하나하나를 컴포넌트라고 하셨다.
컴포넌트는 리엑트 수업 때 만들었던 태그와 함수의 그루핑이었다.
리엑트 수업때에 비하면 컴포넌트 갯수가 많아지며 다소 생소하게 느껴지지만 본질은 그루핑 이란 것을 잊지 말자.
3. 속성-props
컴포넌트의 속성은 props로 받아올 수 있다.
alert 컴포넌트의 속성은 다음과 같은것들이 있다.
variant 내부에 색을 칠하는 filled 스타일의 alert과 테두리를 그리는 outline스타일의 alert가 있다.
severity 심각도: alert에 따라 색이나 마크가 달라지고, 그건 severity에 의해 결정된다.
4. forwardRef
React.forwardRef는 구성 요소가 자식에게 참조를 전달할 수 있도록 하는 React에서 제공하는 고차 함수이다. 이는 상위 구성 요소가 DOM 요소 또는 하위 구성 요소에 의해 생성된 React 구성 요소에 액세스하거나 상호 작용할 수 있기를 원할 때 특히 유용하다.
drawer의 속성 anchor는 drawer가 나오는 위치를 가리킨다.
'props'와 'ref'라는 두 개의 매개변수를 받는 함수를 인수로 사용한다.
5. Chatgpt질의
User
'use client';
import * as React from 'react';
import { ThemeProvider } from '@mui/material/styles';
import { Button, Box, AppBar, Toolbar, Snackbar, Alert as MuiAlert } from '@mui/material';
import theme from './theme';
import { FaBars } from 'react-icons/fa';
const Alert = React.forwardRef((props, ref) => {
return <MuiAlert {...props} ref={ref} variant="filled" />;
});
export default function App() {
const [open, setOpen] = React.useState(false);
const alertRef = React.useRef(null);
return (
<>
<ThemeProvider theme={theme}>
<AppBar position="fixed">
<Toolbar>
<div className="tw-flex-1">
<FaBars className="tw-cursor-pointer" />
</div>
<div className="logo-box">
<a href="/" className="tw-font-bold">
NOTE!
</a>
</div>
<div className="tw-flex-1 tw-flex tw-justify-end">
<a href="/write">글쓰기</a>
</div>
</Toolbar>
</AppBar>
<Toolbar />
<section className="tw-h-screen tw-flex tw-items-center tw-justify-center tw-text-[5rem]">
section
</section>
</ThemeProvider>
<section>
<Button onClick={() => setOpen(true)}>Open Snackbar</Button>
<Alert ref={alertRef} severity="error" varient="filled">
게시물이 삭제되었습니다.
</Alert>
<Alert severity="success" varient="outlined">
This is a success msg!!!!!
</Alert>
<Snackbar
open={open}
autoHideDuration={2000}
onClose={() => setOpen(false)}
message="Note archived">
<Alert severity="warning">게시물이 삭제됨</Alert>
</Snackbar>
</section>
</>
);
}
여기서 ref는 왜 사용되고 있는거지?
답변:
제공된 코드에서 ref는 두 곳에서 사용됩니다.
경고 구성요소:
const Alert = React.forwardRef((props, ref) => {
return <MuiAlert {...props} ref={ref} variant="filled" />;
});여기서 Alert 구성 요소는 Material-UI의 MuiAlert 구성 요소를 둘러싼 사용자 정의 래퍼입니다. 이는 전달된 모든 ref를 기본 MuiAlert 구성 요소로 전달하기 위해 React.forwardRef를 사용하여 생성됩니다. 이를 통해 상위 구성 요소는 ref를 사용하여 MuiAlert 구성 요소의 DOM 노드에 직접 액세스할 수 있습니다.
버튼 클릭 핸들러:
<Button onClick={() => setOpen(true)}>Open Snackbar</Button>'Button' 구성요소의 'onClick' 핸들러에서 'setOpen' 함수가 호출되어 'Snackbar'의 가시성을 제어하는 상태 변수 'open'을 'true'로 업데이트합니다. 이는 ref와 직접적인 관련이 없습니다.
요약하면 ref는 상위 구성 요소가 MuiAlert 구성 요소의 기본 DOM 노드에 액세스할 수 있도록 Alert 구성 요소에서 주로 사용됩니다. 버튼 클릭 핸들러나 Snackbar 구성요소와 직접적인 관련이 없습니다.
6. mui팁
Tip 베이직이나 standard위주로 따라하면 가장 기본적인 것을 따라할 수 있다.
