μ±κΈ νμ΄μ§ μ΄ν리μΌμ΄μ
.
ν νμ΄μ§μμ μ§μ§κ³ λ³Άκ³ νλ μΉνμ΄μ§λ₯Ό λ»νλ€κ³ μκ°νλ©΄ λ λ― νλ€.
μ‘°κΈ νμ΄μ λ§νλ©΄ μ€λ³΅λλ μμκ° λ€μ λ‘λ©λ¨μΌλ‘ μκΈ°λ νΈλν½κ³Ό λλ¦° νμ΄μ§ μ
λ°μ΄νΈ μλλ₯Ό μ λ³΄κ° μ
λ°μ΄νΈ λ λΆλΆλ§ λ€μ λ‘λ©νλ κ²μΌλ‘ ν΄κ²°ν μΉμ¬μ΄νΈλ μΉ μ΄ν리μΌμ΄μ
μ λ§νλ€.
μ₯μ μΌλ‘λ
μ 체 νμ΄μ§λ₯Ό μ λ°μ΄νΈ νλ κ²μ΄ μλ κ°±μ μ΄ νμν λΆλΆλ§ μ λ°μ΄νΈ νλ©΄ λκΈ°μ λ λΉ λ₯Έ λ°μμ±μ κ°μ§κ³ μμΌλ©°,
μλ² μ μ₯μμλ μ 체 λ°μ΄ν°κ° μλ μΌλΆλ§ μ μ‘νλ―λ‘ νΈλν½ λΆλΆμμ μ΄μ μ΄ μλ€.
κ·Έλ‘μΈν΄ μ΅μ’ μ μΌλ‘ μΉ νμ΄μ§, μΉ μ΄ν리μΌμ΄μ μ μ΄μ©νλ μ μ λ€μκ² λ λμ κ²½νμ μ 곡ν μ μλ€.
μ₯μ μ΄ μμΌλ©΄ λ¨μ λ μλ λ².
리μ‘νΈλ λͺ¨λ λ°μ΄ν°κ° JavaScript νμΌ μμ μμ΄μ λΉμ°ν js νμΌμ ν¬κΈ°κ° 컀μ§κ³ κ·Έλ‘μΈν΄ μ΅μ΄ μ λ°μ΄νΈμ μκ°μ΄ λ§μ΄ μμλλ€.
κ²μ μμ§ μ΅μ νμ μ’μ§ μλ€.
μ΄κ² μμ λ°μ΄ν°κ° μλ°μ€ν¬λ¦½νΈ νμΌμ μ μ₯λμ΄μμ΄μ μκΈ°λ λ¨μ μΈλ°, κ²μ μμ§μ λ³΄ν΅ HTMLμ μ 보λ₯Ό κ²μ νκ² λλλ° SPAλ μμ ν κ² μ²λΌ HTMLμλ λ³ μ λ³΄κ° μκ³ jsνμΌμ λ°μ΄ν°κ° λ΄κ²¨μκΈ°μ μ 보λ₯Ό μ λλ‘ κ²μνμ§ λͺ»νλ€.
λ€λ§ μ΅κ·Ό κ²μμμ§λ€μ κ°μ λκ³ , λκ³ μμ΄μ ν΄λΉ λ¨μ μ μ¬λΌμ§λ μΆμΈμ΄λ€.
Routing(λΌμ°ν )μ΄λ, λ€λ₯Έ μ£Όμμ λ°λΌ λ€λ₯Έ λ·°λ₯Ό 보μ¬μ£Όλ κ³Όμ μ κ²½λ‘μ λ°λΌ λ³κ²½νλ€λ μλ―Έμ΄λ€.
리μ‘νΈμμ μ£Όλ‘ μ¬μ©νλ React Router DOMμ μ£Όμ μ»΄ν¬λνΈλ μΈκ°μ§λ‘ λλ μ μλλ°,
<BrowserRouter>
μ»΄ν¬λνΈ<Switch>
μ <Route>
μ»΄ν¬λνΈ,<Link>
μ»΄ν¬λνΈ μ΄λ κ² λλλ€.
BrowserRouter
λ λΌμ°ν°λ₯Ό μ¬μ©νκ³ μ νλ μ»΄ν¬λνΈ μμμμ κ°μΈκ±°λ ν΄λΉ μ»΄ν¬λνΈ μ΅μμμμ <BrowserRouter></BrowserRouter>
νκ·Έλ‘ λλ¨Έμ§ νκ·Έλ€μ κ°μΈμ€μΌνλ€.
Switch
μ»΄ν¬λνΈλ μ¬λ¬ Route
μ»΄ν¬λνΈλ₯Ό μΈμ κ·Έ μ€ κ²½λ‘κ° μΌμΉνλ λ¨ νλμ λΌμ°ν°λ§ λ λλ§ μμΌμ€λ€.
Switch
λ₯Ό μ¬μ©νμ§ μμ μλ μμ§λ§ κ·Έ κ²½μ° λ§€μΉλλ λͺ¨λ μμλ₯Ό λ λλ§νλ€.
Route
μ»΄ν¬λνΈλ path
μμ±μ μ§μ ν΄μ ν΄λΉ path
μ μ΄λ€ μ»΄ν¬λνΈλ₯Ό μΆλ ₯ν μ§ μ ν΄μ£Όκ³ νμ ν Link
μ»΄ν¬λνΈκ° μ ν΄μ£Όλ URL κ²½λ‘κ° μΌμΉν κ²½μ° Route
μ»΄ν¬λνΈλ‘ μ§μ ν μ»΄ν¬λνΈκ° νΈμΆλλ€.
Link
μ»΄ν¬λνΈλ κ²½λ‘λ₯Ό μ°κ²°ν΄μ£Όλ μν μ νλ μ»΄ν¬λνΈμ΄λ€.
νμ΄μ§λ₯Ό μλ‘ λΆλ¬μ€μ§ μκ³ μ±μ μ μ§νλ©° HTML5 History APIλ₯Ό μ΄μ©ν΄ νμ΄μ§ μ£Όμλ§ λ°κΎΈμ΄ μ€λ€.
React DOMμΌλ‘ λ λνλ©΄ Link
μ»΄ν¬λνΈλ DOM
μμ a
νκ·Έκ° λλ€.
a
νκ·Έλ νμ΄μ§ μ νμ νμ΄μ§λ₯Ό μλ‘κ³ μΉ¨νμ§λ§ Link
μ»΄ν¬λνΈλ μλ‘κ³ μΉ¨ λ°©μ§ κΈ°λ₯μ΄ λ΄μ₯λμ΄ μμ΄ SPA ꡬνμ΄ κ°λ₯νλ€.
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'; // Home, Page1, Page2 λ μ»΄ν¬λνΈλ‘ λ€λ₯Έ jsνμΌμ μμ±νκ³ μν¬νΈ λ°μμμ μ¨λ λλ€. // μ€μ λ‘ κ·Έλ κ² λ§μ΄μ°κ³ // Home, Page1, Page2 μ΄ μΈ μ»΄ν¬λνΈλ₯Ό λ€λ₯Έ μ»΄ν¬λνΈμμ λΆλ¬μ€κ³ μΆμΌλ©΄ // μλ€λ export μμΌμ£Όκ³ μ¬μ©ν μ»΄ν¬λνΈμμ import ν΄μ£Όλ©΄ λλ€. const Home = () => { return <h1>Home here!</h1> } const Page1 = () => { return <h1>Page 1 here!</h1> } const Page2 = () => { return <h1>Page 2 here!</h1> } const App = () => { return ( <BrowserRouter> <div> <ul> // νκΈ° Link μ»΄ν¬λνΈμ to μμ± κ°κ³Ό μΌμΉνλ path μμ±κ°μ κ°μ§ Route μ»΄ν¬λνΈκ° λ λλλ€. <li> <Link exact to='/'>Home</Link> </li> <li> <Link to='/1'>Page 1</Link> </li> <li> <Link to='/2'>Page 2</Link> </li> </ul> <h1>Hello!</h1> // Route λ€μ λ¬Άλλ€. <Switch> // exact μμ±μ μ¬μ©νλ©΄ path κ°κ³Ό μ νν μΌμΉνλ to μμ± κ°μ κ°μ§ Link μ»΄ν¬λνΈμ 맀μΉλλ€. // μ¬μ©νμ§ μμΌλ©΄ '/' λ€μ΄κ°κ±° λ€ μ΄ λ μμ΄λ 맀μΉλλ€. // path κ°μ΄ '/'μΈ Route μ»΄ν¬λνΈλ₯Ό κ°μ₯ νλ¨μΌλ‘ λ΄λ¦¬λ©΄ μμ΄λ λκΈ΄νλ€. // κ·Όλ° μ΄κ±° μ°κ³ μμ±νλκ² λ 보기 νΈνλ κ·Έλ₯ μ°μ. <Route exact path='/'> // Route μ»΄ν¬λνΈμ path μμ±μ μ§μ νμ§ μμΌλ©΄ λͺ¨λ / μ΄νμ λ¬΄μ¨ λ¬Έμκ° μλ // ν΄λΉ νμ΄μ§λ‘ 리λ€μ΄λ νΈλλ€. <Home /> </Route> <Route path='/1'> <Page1 /> </Route> <Route path='/2'> <Page2 /> </Route> </Switch> </div> </BrowserRouter> ) } export default App // default λΆμΌλ©΄ default λ€μμ€λ μ»΄ν¬λνΈ νλλ§ export νλκ±°κ³ // λκ° μ΄μ μ»΄ν¬λνΈλ₯Ό ν js νμΌμμ export νλ €λ©΄ export { Home, App } // μ΄λ κ² μ€κ΄νΈμ¨μ export ν΄μ£Όλ©΄ λλ€. export default function ComponetName() { return } // μ΄λ° μμΌλ‘ νλ²μ μ³λ΄κΈ°λ νλλ° // νμ΄ν ν¨μμ μ°λ©΄ defalut μ°λ©΄μ export λͺ¬νλ€. // defalut λΉΌκ³ μ μΈνκ³ export ν΄μΌν¨.
κ°μ§νλ μ΄λ²€νΈλ μλ°μ€ν¬λ¦½νΈμ κ°μΌλ©°, μ¬μ©λ²μ λκ°μ§κ° μλ€.
// 1λ² export default function App() { const func = () => { console.log('It\'s Working!') } return <button onClick={func}> Hello! </button> } // 2λ² export default function App() { return <button onClick={() => console.log('It\'s Working!')}> Hello! </button> } // 3λ² export default function App() { const func = () => { console.log('It\'s Working!') } return <button onClick={() => func()}> Hello! </button> } // 3λ²μ onClick λ³΄λ¨ onKeyupμ΄λ onChange κ°μκ±Έλ‘ ν μ€νΈ λ°μ€ κ° κ°μ Έμ¬λ μ μ©νλ€.
useState
λ ꡬ쑰 λΆν΄ ν λΉμ μμ©νλ€.import { useState } from 'react'
λ‘ useState νμ±νμμΌμ€λ€.const [state, setState] = useState(default)
μ΄λ€.state
, λ³μ μ리μ΄κ³ 1λ² μΈλ±μ€λ stateλ₯Ό λ³κ²½νλ ν¨μ, setState
μ΄λ€.setState
λ λ°ν κ°μ stateμ ν λΉνλ ν¨μμ΄λ€.state
λ κ°μ μ»΄ν¬λνΈλ₯Ό μ¬λ¬κ° μ°λλΌλ κ°μ΄ κ°κ° μ μ₯λλ€. propsλ μ»΄ν¬λνΈλ₯Ό νΈμΆν λ νΈμΆνλ νκ·Έ μμ νλ‘νΌν°ν€μ κ°μ μ λ ₯ν¨μΌλ‘μ¨ νΈμΆνλ μ»΄ν¬λνΈ μμΌλ‘ ν΄λΉ νλ‘νΌν° ν€μ κ°μ μ¬μ©ν μ μκ² ν΄μ€λ€.
<App key={value} />
μ κ°μ λ°©μμΌλ‘ μ¬μ©νλ©° κ°μ λ°μ ν΄λΉ μ»΄ν¬λνΈμ 맀κ°λ³μ μ리μ ν λΉ λ°μ λ¬Έμλ₯Ό μ μΌλ©΄ ν΄λΉ μ»΄ν¬λνΈμμ μ¬μ©κ°λ₯ν κ°μ²΄ ννλ‘ λ°λλ€.
맀κ°λ³μλ μ£Όλ‘ propsλ₯Ό μ΄μ©νλ€.
propsμ κ°μ λ°μ μ»΄ν¬λνΈμμ μμ ν μ μλ€.
리μ‘νΈ λΌμ°ν°, μ€ν
μ΄νΈ, νλ‘μ€, μ΄λ²€νΈ μ°λ λ²μ λλ΅ μ΅νλ€.
리μ‘νΈλ μ‘°κΈ μΉν΄μ§ λλμ΄λ€.
μ΄λ €μ
μ£Όλ§μ ν κ²!
μ½λ¦°μ΄ μ
μ₯μμ λ΄λ λκ° λμ§λ μ λͺ¨λ₯΄κ² μ§λ§ λμΆ© νμ
ν μ μκ² ν΄μ£Όκ³
λ°μ΄ν°λ νμΌ μμμ κ΄λ¦¬ν΄μ£Όκ³
λͺ¨λλ§λ₯ μ¬κΈ° μ κΈ° μΈ μ μκ³
.
.
.
리μ‘νΈλ μ μΈκ°?
μ½λ©μλ§λ μ νλΈ - https://www.youtube.com/channel/UCxft4RZ8lrK_BdPNz8NOP7Q
https://developer.mozilla.org/