🐾 React, Next의 원리
📒 react
📍1.
index.html을 화면에 랜더링을 한다
(id가 root인 비어있는 div태그가 그려진다)
📍2.index.js가 id 가 root인 div태그를 찾아서 그 속에다<App/>을 그려줘
📍3.App.js안에있는 App 컴포너트가 그려진다 (비어있는 div 안쪽에)
📒 next js (13version)
📍1.
app폴더안에있는layout.js가 그려진다. html태그와 body태그를 그려줌
📍2.body태그안쪽에는app폴더안에있는page.js가 그려진다.
app폴더안에 또 다른 폴더를 만들고, 그 폴더 안에 page.js 를 만들면 자동으로 라우팅이 된다.
ex)
app/test/page.js const AAA = ()=> {
return (<h1>hello</h1>);
}
export default AAA; 경로 : localhost:3000/test
👉
app/layout.js 가 그려진다
<html>
<body>
// <h1>hello</h1>
</body>
</html> app/test/page.js 가 body태그 안쪽에 그려진다.
🌟 react 18version 업데이트된 내용
react 로 Server Side Rendering 이 가능해짐.
📒 CSR(Client side Rendering)
- 서버로부터 필요한 테이터만 받아오고
받아온 데이터를 브라우저(client)가 JavaScript를 실행함으로써직접 html 파일을 만드는것
📒 SRS(Server side Rendering)
- 서버에서
완성된 html을 받아오고
브라우저는 단순히 받아논 html 파일을 보여주는것
리액트는 기본적으로 모든 컴포넌트가
CSR으로 동작 하도록 만들어져 있다.
👉 18version이 되면서SSR방식으로 동작하는 컴포넌트 업데이트됨.
💁🏻♀️ (여전히 기본적으로 컴포넌트를 만들면Client 컴포넌트로 만들어짐)
💁🏻♀️ nextjs 13버전 업데이트가 되면서 리액트의 서버컴포넌트를 적극적으로 도입했고,
nextjs에서 만드는 기본 컴포넌트는 모두서버 컴포넌트로만들어 진다.
📍순수 react에서 내가 만든 컴포넌트는
클라이언트컴포넌트이고,
서버 컴포넌트로 사용하고 싶으면추가적인 코드를 작성
📍next에서 기본으로 만든 컴포넌트는
서버 컴포넌트이고,
클라이언트 컴포넌트로 사용하고 싶으면추가적인 코드를 작성
💁🏻♀️ emotion 과 같은 라이브러리는
클라이언트 컴포넌트에서 동작하도록 만들어 놓았다.
next에서 만든 컴포넌트를 서버컴포넌트가 아닌 클라이언트 컴포넌트로 동작하게 만드는방법
파일 맨 위에다'use client';를 추가로 써준다.
💁🏻♀️
next js컴포넌트를 만들때 항상 맨뒤에'use client'를 작성하여 react의클라이언트 컴포넌트를 사용해서 공부
📍 Next 에서 이미지를 사용할때는,
이미지는 public 안에 넣어준다.
Image컴포넌트를 사용해야한다.
🌟 용량이 커도 빠르게 받아올수있다.
🌟 width, height, src, alt 4가지 모두 써줘야함 속성으로. 안그러면 오류가 난다.
import Image from "next/image";
<Image width={70} height={70} src={'이미지경로'} alt="대체텍스트"/>📍 이때 이미지 경로는 '/' 부터 시작을 하는데, 그 이유는 기본 경로가 public폴더로 이미 설정되어있기 때문이다. (public은 생략이 되어있다).
ex)
'/tmp.jpg'; -->public/tmp.jpg
'/a/b/c.png'; -->public/a/b/c.png📍 react 에서 이미지를 사용할때는,
public 폴더에 있는 이미지 --> 'a/png' --> public/a.png
<img src="" alt="" />(next와 다르게 width, height 없어도 된다.)
🐾 mui icon
아이콘을 무료로 사용할수 있도록 제공해주는 라이브러리
(❗️항상 공식문서확인, 제일정확❗️)
https://mui.com/material-ui/getting-started/installation/
✏️ 설치
yarn
yarn add @mui/material
yarn add @mui/icons-materialnpm
npm install @mui/material👉 설치가 되었는지 확인할라면, pacakge.json가서 확인
본격적으로 icon을 써봅자❗️
https://mui.com/material-ui/material-icons/
여기서 쓰고싶은 아이콘 search 해서 사용 가능.
Next.js파일경로
✏️ emotion css라이브러리 사용, mui icon 라이브러리 사용해서 만든
Next.js 사용한 page.js
'use client';
import styled from "@emotion/styled";
import Image from "next/image";
import DashboardCustomizeIcon from '@mui/icons-material/DashboardCustomize';
import WorkIcon from '@mui/icons-material/Work';
import ListIcon from '@mui/icons-material/List';
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism';
import MenuBookIcon from '@mui/icons-material/MenuBook';
import ChecklistIcon from '@mui/icons-material/Checklist';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import SubdirectoryArrowRightIcon from '@mui/icons-material/SubdirectoryArrowRight';
const Wrapper = styled.div`
display: flex;
border-width: 10px;
padding-left: 240px;
transition: 300ms;
`;
const DashboardAside = styled.aside`
width: 240px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
overflow-y: scroll;
display: flex;
flex-direction: column;
row-gap: 20px;
padding: 0 20px;
background-color: hsl(var(--ui-color-background-100));
&::-webkit-scrollbar{
display: none;
}
`;
const AsideLogo = styled.div`
height: 90px;
/* margin-bottom: 50px; */
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
column-gap: 10px;
`;
const AsideMenuItem = styled.div`
cursor: pointer;
transition: 500ms;
display: flex;
align-items: center;
border-radius: 10px;
padding: 10px 20px;
column-gap: 10px;
font-size: var(--font-base);
color: hsl(var(--ui-color-foreground-090));
position:relative;
&:hover{
background-color: hsl(var(--ui-color-background-090));
}
& > p {
flex-grow: 1;
margin: 0;
}
& > .sub-icon{
position: absolute;
left: -13px;
top: 7px;
}
& > svg {
font-size: 16px;
}
`;
const Menu = styled.ul`
display: flex;
flex-direction: column;
row-gap: 10px;
`;
const SubMenu = styled.ul`
display: flex;
flex-direction: column;
row-gap: 3px;
margin-top: 3px;
padding-left: 35px;
`;
const LogoText = styled.p`
font-size: var(--font-xl);
font-weight: bold;
color: hsl(var(--ui-color-primary));
`;
const UserText = styled.p`
font-size: var(--font-xl);
font-weight: bold;
color: hsl(var(--ui-color-primary));
& > span{
color: hsl(var(--ui-color-foreground-100));
font-size: var(--font-sm);
}
`;
const MainWrapper = styled.div`
flex-grow:1;
`;
const Main = styled.main`
padding: 30px 20px;
`;
const Header = styled.header`
height: 90px;
position:sticky;
top: 0;
display: flex;
align-items: center;
padding: 0 20px;
background-color: hsl(var(--ui-color-background-100));
/* backdrop-filter: blur(5px); */
justify-content: space-between;
`;
const Footer = styled.footer`
border-top: 1px solid hsl(var(--ui-color-foreground-000));
display: flex;
justify-content: center;
align-items: center;
padding: 50px 0;
`;
const DashboardPage = () => {
return (
<Wrapper>
<DashboardAside>
<AsideLogo>
<Image width={70} height={70} src={'/logo.svg'} alt="logo" />
<LogoText>Portfolio For</LogoText>
</AsideLogo>
<nav>
<Menu>
<li >
<AsideMenuItem>
<DashboardCustomizeIcon />
<p>Overview</p>
<KeyboardArrowRightIcon />
</AsideMenuItem>
</li>
<li >
<AsideMenuItem>
<WorkIcon />
<p>경력</p>
<KeyboardArrowRightIcon />
</AsideMenuItem>
</li>
<li >
<AsideMenuItem>
<ListIcon />
<p>나의 활동</p>
<KeyboardArrowDownIcon />
</AsideMenuItem>
<SubMenu>
<li>
<AsideMenuItem>
<SubdirectoryArrowRightIcon />
<VolunteerActivismIcon className="sub-icon" />
<p>봉사활동</p>
<KeyboardArrowRightIcon />
</AsideMenuItem>
</li>
<li>
<AsideMenuItem>
<SubdirectoryArrowRightIcon />
<MenuBookIcon className="sub-icon" />
<p>독서활동</p>
<KeyboardArrowRightIcon />
</AsideMenuItem>
</li>
</SubMenu>
</li>
<li >
<AsideMenuItem>
<ChecklistIcon />
<p>할일 목록</p>
<KeyboardArrowRightIcon />
</AsideMenuItem>
</li>
</Menu>
</nav>
</DashboardAside>
<MainWrapper>
<Header>
<UserText>강수지<span>님</span></UserText>
<i class="fa-solid fa-bars menu-icon"></i>
</Header>
<Main>
</Main>
<Footer>
ⓒ 2023. sjk all rights reserved
</Footer>
</MainWrapper>
</Wrapper>
)
}
export default DashboardPage;👇
react 파일경로
next.js로 사용한 위의 page.js파일에 코드 모두 복붙한다.
👉 여기서 다른점은, img 태그이다.
<img width={70} height={70} src={'/logo.svg'} alt="logo" />이것만 바꾸면 된다. 나머지는 다 똑같이쓰면됨.
👉 react 폴더에서도, 똑같이
설치
npm install @mui/icons-material
npm install @mui/material🐾 nextjs에서 사용하는 문법은 모두 리액트의 문법이다.
📍 1. 'use client'
📍 2. <Image/> 태그이 두가지만 다르고,
리액트에서 그대로 사용하면 된다.
🎬 리액트에서 이미지는 기본 html <img/> 사용 🎬 next에서 이미지는 <Image/> 를 사용한다
✂️ react에서
css파일이 여러개라고 하더라도
모두 통합되어 적용되기 때문에 웬만하면 react css 파일은index.css하나만 사용한다.
