๐์ค๋ ๋ฐฐ์ด ๊ฒ
navigator.clipboard.writeText()
ํ ์คํธ๋ฅผ ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌํ ์ ์๋ ๋ฉ์๋์ด๋ค.
๋งค๊ฐ๋ณ์๋ก ๋ณต์ฌํ ๋ฌธ์์ด์ ๋ฐ๋๋ค.
navigator.clipboard.writeText("๋ณต์ฌํ ํ
์คํธ")
Context
:๋จ๊ณ๋ง๋ค ์ผ์ผ์ด props๋ฅผ ๋๊ฒจ์ฃผ์ง ์๊ณ ๋ ์ปดํฌ๋ํธ ํธ๋ฆฌ ์ ์ฒด์ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํ ์ ์๋ค.
context๋ props drilling์ ํด๊ฒฐํ๊ธฐ ์ํ ํ๋์ ๋ฐฉ๋ฒ์ด๋ค.
props drilling์ด๋ ์ปดํฌ๋ํธ ํธ๋ฆฌ์ ํ ๋ถ๋ถ์์ ๋ค๋ฅธ ๋ถ๋ถ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๊ธฐ ์ํด ์ค์ง props๋ฅผ ํ์ ์ปดํฌ๋ํธ๋ก ์ ๋ฌํ๋ ์ฉ๋๋ก ์ปดํฌ๋ํธ๋ค์ด ์ฌ์ฉ๋๋ ๊ณผ์ ์ ๋งํ๋ค.
์ด๋ Context๋ฅผ ์ฌ์ฉํ๋ฉด ์ค๊ฐ ์ปดํฌ๋ํธ๋ค์ ๊ฑฐ์น์ง ์๊ณ ๋ฐ๋ก ์ํ๋ ์ปดํฌ๋ํธ์์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌ๋ฐ์ ์ ์๋ค.
React.creasteContext
: Context ๊ฐ์ฒด๋ฅผ ๋ง๋ค๊ณ ํธ๋ฆฌ ์์์์ ์ง์ด ๋ง๊ณ ๊ฐ์ฅ ๊ฐ๊น์ด์ ์์นํ Provider๋ก๋ถํฐ ํ์ฌ ๊ฐ์ ์ฝ๋๋ค.
const TaskContext = createContext();
Context.Provider
: Provider ์ปดํฌ๋ํธ๋ value prop์ ๋ฐ์์ ์ด ๊ฐ์ ํ์์ ์๋ ์ปดํฌ๋ํธ๋ค์๊ฒ ์ ๋ฌํ๋ค.
return (
<TaskContext.Provider value={{ tasks, addTask, updateTask, removeTask }}>
{children}
</TaskContext.Provider>
);
-> ์ปดํฌ๋ํธ ๋ด๋ถ์ ์๋ tasks, addTask, updatetask, removeTask๋ฅผ ํ์ ์ปดํฌ๋ํธ์๊ฒ ์ ๋ฌํ ์ ์๋ค.
-> Provider ํ์์์ context๋ฅผ ๊ตฌ๋ ํ๋ ๋ชจ๋ ์ปดํฌ๋ํธ๋ Provider์ value prop๊ฐ ๋ฐ๋ ๋๋ง๋ค ๋ค์ ๋ ๋๋ง ๋๋ค.
export const useTasks = () => useContext(TaskContext);
useContext๋ฅผ ํตํด Context์ ์ ์ฅ๋์ด ์๋ ์ ์ญ ๋ฐ์ดํฐ์ ์ ๊ทผํ ์ ์๋ค.
//TaskProvider.js
const TaskContext = createContext();
export const useTasks = () => useContext(TaskContext);
const TaskProvider = ({ children }) => {
...
return (
<TaskContext.Provider value={{ tasks, addTask, updateTask, removeTask }}>
{children}
</TaskContext.Provider>
);
}
<TaskProvider>
<Container>
<Header>Todo</Header>
<NewTaskForm />
<TaskList css={{ marginTop: 16 }} />
</Container>
</TaskProvider>
TaskProvider ํ์ ์์๋ค์ด children์ด ๋์ด ์ ์ญ ๋ฐ์ดํฐ์ ์ ๊ทผํ ์ ์๊ฒ ๋๋ค.
์ ์ญ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ ๋
const { updateTask, removeTask } = useTasks();
์ด๋ฐ ์์ผ๋ก ๊ฐ ๋ฐ์ดํฐ์์ ์ํ๋ ๋ฐ์ดํฐ์ ์ ๊ทผํ ์ ์๋ค.
Drag&Drop ์ด๋ฒคํธ
- onDragEnter: ๋๋๊ทธํ ์์๊ฐ ์ ํจํ ๋๋กญ ์์ญ์ ๋ค์ด๊ฐ ๋ ๋ฐ์
- onDragLeave: ๋๋๊ทธํ ์์๊ฐ ์ ํจํ ๋๋กญ ์์ญ์ ๋ฒ์ด๋๋ ๊ฒฝ์ฐ ๋ฐ์
- onDragOver: ๋๋๊ทธ๊ฐ ์๋ฃ๋์ ๋ ๋ฐ์(๊ธฐ๋ณธ๋์๊ณผ ์ด๋ฒคํธ ์ ํ๋ฅผ ๋ง๋๋ก)
- onDrop: drop์ด ์คํ๋์ ๋ ๋ฐ์
Children props๋ฅผ jsx๋ฅผ ๋ฐํํ๋ ํจ์๋ก ๋ง๋ค๊ธฐ
export default function Upload(){
...
return (
...
{typeof children === "function" ? children(file, dragging) : children}
...
)
}
์ด๋ฐ ์์ผ๋ก ์ฌ์ฉํ๋ฉด children์ด ํจ์๋ก ๋ค์ด์ค๋ ๊ฒฝ์ฐ ํด๋น ํจ์๋ฅผ ์คํ์ํจ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ฌ์ฃผ๋๋ก ํ๊ณ ์๋๋ฉด ๊ทธ๋ฅ ๋ณด์ฌ์ฃผ๋๋ก ํ ์ ์๋ค. ๋ง์ฝ children์ผ๋ก ์ ๋ณด๋ฅผ ๋๊ฒจ์ค์ผํ๋ค๋ฉด ์ด๋ฐ ๋ฐฉ๋ฒ์ ํตํด ์ฝ๊ฒ ๋๊ฒจ์ค ์ ์๋ค.
๐ญ๋ฐฐ์ด ์
๊ฐ์ ๋ด์ฉ์ด ์ด๋ ต๋ค! ๊ณ์ ์ด๋ฆฌ์ ๋ฆฌ ๋ฏ์ด๋ณด๋ฉด์ ๋ด๋ด์ผ ํ ๊ฒ ๊ฐ๋ค. ๋ด๊ฐ ์ฐ๋จนํด๋ดค๋ ๋ฆฌ์กํธ๊ฐ ์๋์ผ...(?)
storybook๋ ์ฒ์์ด๋ผ ๊ณ์ ์ฐ๋ฉด์ ์ต์ํด์ ธ์ผ ํ ๊ฒ ๊ฐ๊ณ ๋ฐ๋ก ๊ณต๋ถํด๋ณด๋ ์๊ฐ์ด ํ์ํ ๊ฒ ๊ฐ๋ค.
์ด๊ฒ ์์ง ์ฌํ๋จ๊ณ๊ฐ ์๋๋ผ๋...์ฌํ์์๋ ๋์ฒด ์ด๋ค ์ผ์ด ์ผ์ด๋ ์ง...๐
'์ผ์ > Today I Learned' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[๋ฐ๋ธ์ฝ์ค Day49] 2022.12.22 (0) | 2022.12.22 |
---|---|
[๋ฐ๋ธ์ฝ์ค Day 48] 2022.12.21 (0) | 2022.12.21 |
[๋ฐ๋ธ์ฝ์ค] 2๊ฐ์ ์ฐจ ํ๊ณ (4) | 2022.12.15 |
[๋ฐ๋ธ์ฝ์ค] ํ ๋ฌ ์ฐจ ํ๊ณ (0) | 2022.11.18 |
[๋ฐ๋ธ์ฝ์ค] 2์ฃผ์ฐจ & 3์ฃผ์ฐจ ํ๊ณ (2) | 2022.11.05 |