โฌ๏ธ Main Note
https://docs.google.com/document/d/10yMsVEwWhhCpnjYH1ORbnXtRYB7-M3nrhqdc13myuf0/edit
<Component />
--> {Component()}
//This is Container Page
import Presenter from "./Presenter.presenter"
export default function Container () {
return (
<>
{Presenter({count: 123})}
</>
)
//This is Presenter Page
export default function Presenter (aaa){
return (
return (
<div>{aaa.count}</div>
}
//Executing the function
("a", 0)
("b",1)
("ํ์ด",2)
//Declaring the function
["a","b","c"].map((index)=> (
console.log(`What is ${index}?`)
)
//--> Here, the elements are put to ${index} since the sequence goes as (element, index).
//state/Prev
From
setCount(prev => prev + 1)
to
>>> setCount(asdf => asdf + 1)
When requesting for two mutations, rest-API must request for separate two times. Meaning that the variables cannot be used again for multiple times.
--> This is called overFetching
.
But for graphql, it can request it at once.
underFetching
./^\w+@\w+\.\w+$/.test("aaa@bbb.com")
/^\d+-\d+-\d+$/.test("010-1234-5678")
Context helps the user to manage all the states in the parent component or index page.
Most of the components can get state by usign context.
--> No need to use props.
Context is declared with createContext
.
Then, states are put into createContext value spot.
--> And those states are set with useState.
//Index Page
import { createContext } from "react";
import BoardWriteContext from "../../src/components/units/21-context-api/BoardWrite.container";
export const ExampleContext = createContext(null);
export default function ContextAPIPage() {
// context ๋ง๋ค๊ณ ํ์ฉํด์ค์ผํจ
// createContext ํ๊ณ useContext๋ก ๊บผ๋ด์ฐ๋ ํ์
return (
<ExampleContext.Provider value={{ isEdit: true }}>
<BoardWriteContext />
{/* ์ฌ๊ธฐ์ ๋ธ๋ ค์๋ component๋ isEdit ์ ๊ทผ ๊ฐ๋ฅํจ */}
</ExampleContext.Provider>
);
}
//Container
import BoardWriteContextUI from "./BoardWrite.presenter";
export default function BoardWriteContext() {
return <BoardWriteContextUI />;
}
import { useContext } from "react";
import { ExampleContext } from "../../../../pages/21-04-context-api";
export default function BoardWriteContextUI() {
const { isEdit } = useContext(ExampleContext);
return <div>{isEdit ? "์์ ํ๊ธฐ" : "๋ฑ๋กํ๊ธฐ"}</div>;
}
// ๋ฐฐ์ด์์ ์ฌ์ฉ ๊ฐ๋ฅํ ๋ฉ์๋
// ๋ฐฐ์ด์ ํน์ ์ธ๋ฑ์ค ๊ฐ์ผ๋ก๋ถํฐ ๋ฐ์ดํฐ๋ฅผ ์ญ์ ํ ์ ์๋ค
// ๋ฐฐ์ด์ ํน์ ์ธ๋ฑ์ค ๊ฐ์ผ๋ก๋ถํฐ ๋ฐ์ดํฐ๋ฅผ ์ถ๊ฐํ ์ ์๋ค
// ์๋ณธ์ด ์ ์ฅ์ด ๋๋ค
arr = [1, 2, 3, 4, 5];
arr.splice(2, 1);
//result: 3
//2๋ฒ์งธ ์ธ๋ฑ์ค๋ถํฐ ํ๋๋ฅผ ์ง์ฐ๊ฒ ๋ค!
//splice๋ ์ ๊ฑฐํ ์ธ๋ฑ์ค์ ๋ฐ์ดํฐ๋ฅผ ๋ฐํํจ
//์๋ณธ์ด ์ ์ฅ์ด ๋๊ธฐ ๋๋ฌธ์ ๋ค์ ๋ด์ง ๋ง๊ณ array๋ฅผ ๋ค์ ์ฐ์ผ๋ฉด 3์ด ์ ๊ฑฐ๋ [1,2,4,5] ๋ฅผ ๋ฐ๊ฒ ๋จ
arr.splice(2, 1, 0, 1, 2, 3);
//์ด๋ ๊ฒ ํ๋ฉด 2๋ฒ ์ธ๋ฑ์ค๋ถํฐ ํ๋๋ฅผ 0,2,3์ผ๋ก ๋์ฒดํ๊ฒ ๋ค ๋ผ๋๋ง์ด ๋จ
//result: [1,2,0,1,2,3,4,5]