์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- position
- fetch API
- ์๊ณ ๋ฆฌ์ฆ
- ์๋ฐ์คํฌ๋ฆฝํธ
- ๋ธ๋ก๊ทธ
- Gatsby
- float
- ์ฝ๋ฉํ ์คํธ
- useRef
- Props
- history api
- ํ๋ก๊ทธ๋๋จธ์ค
- ํ๋ก ํธ์๋
- REACT
- Flex
- useEffect
- CSS
- ๋ฐ๋ธ์ฝ์ค
- ๋ฐ๋ธ์ฝ์ค3๊ธฐ
- Today
- Total
๋ชฉ๋ก์ ์ฒด ๊ธ (311)
Daehyunii's Dev-blog
ํจ์ํ ์ปดํฌ๋ํธ์ ํด๋์คํ ์ปดํฌ๋ํธ์ ์ฐจ์ด์ 1. ํด๋์คํ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ state ๊ธฐ๋ฅ, ๋ผ์ดํ ์ฌ์ดํด ๊ธฐ๋ฅ์ ์ฌ์ฉ ๋ฐ ์์ ๋ฉ์๋ ์ ์๊ฐ ๊ฐ๋ฅํ๋ค. 2. ํจ์ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ ํด๋์คํ ์ปดํฌ๋ํธ์ ๋นํด ๋ฉ๋ชจ๋ฆฌ ์์์ ๋ ์ฌ์ฉํ๋ค.(์ ์๋ฏธํ ์ฐจ์ด๋ ์๋๋ผ๊ณ ํจ) 3. ํจ์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ฐฐํฌํ ๋ ๊ฒฐ๊ณผ๋ฌผ์ ํ์ผ ํฌ๊ธฐ๊ฐ ๋ ์๋ค.(์ ์๋ฏธํ ์ฐจ์ด๋ ์๋๋ผ๊ณ ํจ) 4. ํจ์ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ์๋ ํด๋์คํ ์ปดํฌ๋ํธ์์์ ๋ผ์ดํ ์ฌ์ดํด ๊ธฐ๋ฅ ๋์ Hooks๋ฅผ ํตํด ํด๊ฒฐ ๊ฐ๋ฅํ๋ค. props ๊ธฐ๋ณธ๊ฐ ์ค์ : defaultProps ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ก ๋ถํฐ prop์ ์ ๋ฌ ๋ฐ์ง ์์ ๊ฒฝ์ฐ์ defaultProps๋ฅผ ์ค์ ํ ์ ์๋ค. const MyComponent = (props) => { return ์๋ ํ์ธ..
๋ฆฌ๋ค๊ธฐ๋ฅผ ์ฝ๊ธฐ ์์ํ๋ค. ์ค๋๋ถํฐ ๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ ์ ์ฝ๊ธฐ ์์ํ๋ค. ๊ธฐ์กด์ ๋ฆฌ์กํธ๋ฅผ ์ ํ ๊ฒฝํ์ด ์์๊ธฐ ๋๋ฌธ์, ๋ฐ๋ธ์ฝ์ค์์ ๋ฆฌ์กํธ๋ฅผ ๋ณธ๊ฒฉ์ ์ผ๋ก ๋ค๋ฃจ๊ธฐ ์ ์ ๊ธฐ๋ณธ์ ์ธ ๋ด์ฉ์ ํ์ตํ๋๊ฒ์ด ์ข๋ค๋ ํ๋จ์ด ๋ค์ด ์ธํ๋ฐ์์ '์ ๋ก์ด' ๋ฆฌ์กํธ ๊ฐ์๋ฅผ ๋ค์๊ณ ์ง๊ธ์ ๋ฐ๋ธ์ฝ์ค๋ฅผ ํตํด์ ๋ฆฌ์กํธ ๊ฐ์๋ฅผ ๋ค์ผ๋ฉฐ ๊ณต๋ถํ๊ณ ๊ฐ๋ณ์ ์ผ๋ก '๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ '์ ๊ฐ์ด ์ฝ๊ธฐ ์์ํ๋ค. ์ค๋์ ๋ฆฌ์กํธ์ ํน์ง๊ณผ JSX ๊ธฐ๋ณธ์ ์ธ ๋ฌธ๋ฒ๋ค์ ๋ํด์ ๊ณต๋ถํ๋ค. 2022.12.20 - [๐ Language & CS knowledge/React] - JSX๋? JSX๋? JSX๋? ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ฅ ๋ฌธ๋ฒ์ด๋ฉฐ XML๊ณผ ๋งค์ฐ ์ ์ฌํ๋ค. ์ฐ์ JSX๋ ๋ธ๋ผ์ฐ์ ์์ ์คํ๋๊ธฐ ์ ๋ฒ๋ค๋ง๋๋ ๊ณผ์ ์์ ๋ฐ๋ฒจ์ ํตํด ์ผ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ํํ์ ์ฝ๋๋ก ..
JSX๋? ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ฅ ๋ฌธ๋ฒ์ด๋ฉฐ XML๊ณผ ๋งค์ฐ ์ ์ฌํ๋ค. ์ฐ์ JSX๋ ๋ธ๋ผ์ฐ์ ์์ ์คํ๋๊ธฐ ์ ๋ฒ๋ค๋ง๋๋ ๊ณผ์ ์์ ๋ฐ๋ฒจ์ ํตํด ์ผ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ํํ์ ์ฝ๋๋ก ๋ณํ๋๋ค. ๋ค์ ์์ ๋ฅผ ์ดํด๋ณด์. JSX function App() { return ( Hello react ) } ๋ณํ function App() { return React.createElement("div", null, "Hello", React.createElement("b", null, "react")) } ์ด ์ฒ๋ผ JSX๋ฅผ ํตํด์ ์ฐ๋ฆฌ๋ JavaScript๋ก ์์ฑํด์ผ ํ๋ ์ฝ๋๋ค์ ๊ฐ๋ตํ๊ณ ์๊ฐ์ ์ผ๋ก๋ ๋ณด๊ธฐ ์ข๊ฒ ํํํ ์ ์๋ค. ํ ๋ง๋๋ก JSX๋ ๋ณด๊ธฐ ์ฝ๊ณ ์ฐ๋ฆฌ์๊ฒ ์ต์ํ ํํ๋ก ์์ฑ๋๋ค. ๋ํ JSX ๋ฌธ๋ฒ์ ํ์ฉํ๋ฉด ์ปดํฌ๋ํธ..
์ปดํฌ๋ํธ ์คํ์ผ๋ง 1. ์คํ์ผ์ํธ ์ ์ฉ ์ธ๋ถ CSSํ์ผ์ importํ์ฌ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ด๋ค. 2. Inline style ์ ์ฉ ๋์ ์ผ๋ก ์คํ์ผ์ ๊ฒฐ์ ํ๋ ๊ฒฝ์ฐ์ ์์์ ์์ฑ์ผ๋ก style์ ์ฃผ๋ ๋ฐฉ๋ฒ์ด๋ค. 3. CSS in JS ์ ์ฉ ์ฌ๋ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์๋๋ฐ ๊ฐ์์์๋ emotion์ด๋ผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ค. yarn add @emotion/react @emotion/styled @emotion/styled styled API for emotion. Latest version: 11.10.6, last published: a month ago. Start using @emotion/styled in your project by running `npm i @emotion/styled`. There are..
์ปดํฌ๋ํธ ์คํ์ผ๋ง 1. ์คํ์ผ์ํธ ์ ์ฉ ์ธ๋ถ CSSํ์ผ์ importํ์ฌ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ด๋ค. 2. Inline style ์ ์ฉ ๋์ ์ผ๋ก ์คํ์ผ์ ๊ฒฐ์ ํ๋ ๊ฒฝ์ฐ์ ์์์ ์์ฑ์ผ๋ก style์ ์ฃผ๋ ๋ฐฉ๋ฒ์ด๋ค. 3. CSS in JS ์ ์ฉ ์ฌ๋ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์๋๋ฐ ๊ฐ์์์๋ emotion์ด๋ผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ค. yarn add @emotion/react @emotion/styled @emotion/styled styled API for emotion. Latest version: 11.10.6, last published: a month ago. Start using @emotion/styled in your project by running `npm i @emotion/styled`. There are..
App.js import { useState } from "react"; import Board from "./components/Board"; import Pagination from "./components/Pagination"; function App() { const [page, setPage] = useState(0); const articles = new Array(100).fill().map((_, i) => { return { id: i, title: `${i}๋ฒ ๊ฒ์๋ฌผ`, }; }); const limit = 6; const offset = page * limit; return ( ); } export default App; Pagination.js import { useState } f..
React๋? 1. React ์๊ฐ ๋ฆฌ์กํธ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. ๋ฆฌ์กํธ๋ฅผ ๊ตฌ์ฑํ๋ ๊ธฐ๋ฅ๋ค์ ์ต์ํ์ ๋ ธ๋ ฅ์ผ๋ก ์ต๋์ ํจ์จ์ ๋ด๊ธฐ ์ํจ์ด๋ค. 2. React ํน์ง Reactive Programming์ด๋ค. React๋ ์ํ๋ฅผ ๊ด์ฐฐํ๊ณ ๋ณํ๊ฐ ๋ฐ์ํ ๊ฒฝ์ฐ ์ฐ๊ด๋ ๊ณณ์์ ์ฐ์ฐ์ด ์ํ๋๋ค. MVC์์ ๋ฆฌ์กํธ๋ V๋ง ๊ด๋ฆฌํ๋ค. ์ฌ๊ธฐ์ View๋ ์ปดํฌ๋ํธ์ด๋ค. ์ปดํฌ๋ํธ๋ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ ๋ ๋ฆฝ์ ์ธ ๊ฐ์ฒด์ด๋ฉฐ ๋ฐํ์ ์์ ์ ์ฌ์ฉ๋๋ค. ์ปดํฌ๋ํธ๋ ํธ๋ฆฌ ๊ตฌ์กฐ๋ก ๋ํ๋ผ ์ ์๋ค. ์ปดํฌ๋ํธ ์กฐํฉ์ผ๋ก View๋ฅผ ๊ตฌ์ฑํ๋ค. Virtual DOM์ด๋ค. ํ์ํ ๋ถ๋ถ๋ง ํ ๋ฒ์ ๋ ๋๋งํ๋ค. ์ฑ๋ฅ๋ณด๋ค๋ ๊ฐ๋ฐ์ ์ฝ๊ฒ ํ๊ธฐ ์ํด ์ฌ์ฉ๋์๋ค. 2. create-react-app, JSX 2.1 create-react-app ์๋ก์ด ๋ฆฌ์กํธ ์ฑ์ ๋ง..
React๋? 1. React ์๊ฐ ๋ฆฌ์กํธ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. ๋ฆฌ์กํธ๋ฅผ ๊ตฌ์ฑํ๋ ๊ธฐ๋ฅ๋ค์ ์ต์ํ์ ๋ ธ๋ ฅ์ผ๋ก ์ต๋์ ํจ์จ์ ๋ด๊ธฐ ์ํจ์ด๋ค. 2. React ํน์ง Reactive Programming์ด๋ค. React๋ ์ํ๋ฅผ ๊ด์ฐฐํ๊ณ ๋ณํ๊ฐ ๋ฐ์ํ ๊ฒฝ์ฐ ์ฐ๊ด๋ ๊ณณ์์ ์ฐ์ฐ์ด ์ํ๋๋ค. MVC์์ ๋ฆฌ์กํธ๋ V๋ง ๊ด๋ฆฌํ๋ค. ์ฌ๊ธฐ์ View๋ ์ปดํฌ๋ํธ์ด๋ค. ์ปดํฌ๋ํธ๋ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ ๋ ๋ฆฝ์ ์ธ ๊ฐ์ฒด์ด๋ฉฐ ๋ฐํ์ ์์ ์ ์ฌ์ฉ๋๋ค. ์ปดํฌ๋ํธ๋ ํธ๋ฆฌ ๊ตฌ์กฐ๋ก ๋ํ๋ผ ์ ์๋ค. ์ปดํฌ๋ํธ ์กฐํฉ์ผ๋ก View๋ฅผ ๊ตฌ์ฑํ๋ค. Virtual DOM์ด๋ค. ํ์ํ ๋ถ๋ถ๋ง ํ ๋ฒ์ ๋ ๋๋งํ๋ค. ์ฑ๋ฅ๋ณด๋ค๋ ๊ฐ๋ฐ์ ์ฝ๊ฒ ํ๊ธฐ ์ํด ์ฌ์ฉ๋์๋ค. 2. create-react-app, JSX 2.1 create-react-app ์๋ก์ด ๋ฆฌ์กํธ ์ฑ์ ๋ง..