๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŒŒ | WEB DEV/React

[React] 6. props

by KASSID 2023. 5. 29.

๋ชฉ์ฐจ

    728x90

    ์ด์ „ ๊ธ€ โ–ผ

    ๋”๋ณด๊ธฐ

     

     

    ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์—ˆ์„๋•Œ App(){} ๋‚ด๋ถ€์—์„œ ์ •์˜ํ•œ state๋‚˜ ์—ฌ๋ ค ๋ณ€์ˆ˜ ๋“ฑ ๋ฐ์ดํ„ฐ๊ฐ€ ํ•„์š”ํ•œ ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค.

    ์ด๋ฅผ ์œ„ํ•ด์„œ๋Š” props๋ฅผ ์‚ฌ์šฉํ•ด์•ผํ•œ๋‹ค.

     

     

    1. props ์•Œ์•„๋ณด๊ธฐ

     

    ๋จผ์ € App๊ณผ ์ปดํฌ๋„ŒํŠธ์˜ ์œ„์น˜๋ฅผ ์‚ดํŽด๋ณด์ž.

    function App(){
      let [foo, setFoo] = useState(0)
      return(
        <>
          <์ปดํฌ๋„ŒํŠธ/>
        </>
      )
    }
    
    function ์ปดํฌ๋„ŒํŠธ(){
      return(
        <>
          ...
        </>
      )
    }

    ์œ„์ฒ˜๋Ÿผ ๋‘ ์ปดํฌ๋„ŒํŠธ ์ •์˜ ํ•จ์ˆ˜๋Š” ํ˜•์ œ ์œ„์น˜์— ์กด์žฌํ•œ๋‹ค.

     

    JS์˜ ์˜์—ญ ๊ฐœ๋…์— ์ฃผ๋ชฉ์„ ํ•˜์˜€์„ ๋•Œ

    ํ˜•์ œ ์œ„์น˜์— ์กด์žฌํ•˜๋Š” ์„œ๋กœ ๋‹ค๋ฅธ ํ•จ์ˆ˜ ๋‚ด ๋ฐ์ดํ„ฐ๋Š”

    ์†ก์ˆ˜์‹ ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ์—

     

    ์ฆ‰, functoin App์˜ ๋‚ด๋ถ€์— ์กด์žฌํ•˜๋Š” ๋ณ€์ˆ˜, state ๋“ฑ์€

    ์ผ๋ฐ˜์ ์ธ ๋ฐฉ๋ฒ•์œผ๋กœ ์ œ์ž‘ํ•œ funcion ์ปดํฌ๋„ŒํŠธ์— ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์—†๋‹ค.

     

     

    ํ•˜์ง€๋งŒ ๋‹ค์‹œ ์œ„์˜ ์ฝ”๋“œ๋ฅผ ์‚ดํŽด๋ณด๋ฉด

    html๋กœ ๋ Œ๋”๋งํ•  ๋•Œ์—๋Š”

    <App>   <์ปดํฌ๋„ŒํŠธ/>   </App> ์˜ ํ˜•ํƒœ์ด๋ฏ€๋กœ

    App์ด ๋ถ€๋ชจ, ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ž์‹์ธ ๊ด€๊ณ„์ด๋‹ค.

     

    ์ด๋•Œ์—๋Š” ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋กœ ์ „์†กํ•ด์ค„ ์ˆ˜ ์žˆ๋Š”๋ฐ

    ์ด๊ฒƒ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ๊ฒƒ์ด ๋ฐ”๋กœ props ๋ฌธ๋ฒ•์ด๋‹ค.

     

     

    2. props ํ™œ์šฉํ•˜๊ธฐ

     

    ๋‹จ๊ณ„

    1. ์ž์‹ ์ปดํฌ๋„ŒํŠธ ํƒœ๊ทธ ์กฐ์ž‘

    2. ์ž์‹ ์ปดํฌ๋„ŒํŠธ function ์กฐ์ž‘

     

    1) ์ž์‹ ์ปดํฌ๋„ŒํŠธ ํƒœ๊ทธ ์กฐ์ž‘

    ์ž์‹ ์ปดํฌ๋„ŒํŠธ์˜ ํƒœ๊ทธ์—

    " props๋ช… = ๋ฐ์ดํ„ฐ "์˜ ํ˜•ํƒœ๋กœ ์ ์–ด์ค€๋‹ค.

    ์ด๋•Œ ๋ฐ์ดํ„ฐ๋กœ ๋ณ€์ˆ˜, state ๋“ฑ์„ ์ „๋‹ฌํ•  ๋•Œ์—๋Š” {๋ณ€์ˆ˜ ๋ช…}, {satate ๋ช…}๊ณผ ๊ฐ™์€ ํ˜•ํƒœ๋กœ ์ „๋‹ฌํ•œ๋‹ค.

    ๋˜ํ•œ ์ผ๋ฐ˜ ๋ฌธ์ž์—ด์˜ ๊ฒฝ์šฐ "๋ฌธ์ž์—ด"๋กœ ์ „์†กํ•˜๋ฉด๋œ๋‹ค.

     

    ์˜ˆ์‹œ

    function App() {
      let [music, setMusic] = useState({"title": ... , ...})
      return(
        <div>
          <Modal music={music}/>
        </div>
      )
    }

     

     

    2) ์ž์‹ ์ปดํฌ๋„ŒํŠธ function ์กฐ์ž‘

    ์ž์‹ ์ปดํฌ๋„ŒํŠธ function์˜ props๋ฅผ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ์ง€์ •ํ•œ๋‹ค.

    ์ด๋•Œ ํŒŒ๋ผ๋ฏธํ„ฐ์˜ ์ด๋ฆ„์€ ์ž„์˜๋กœ ์ง€์ •ํ•˜์—ฌ๋„ ๋ฌด๊ด€ํ•˜๋‹ค.

     

    ์˜ˆ์‹œ

    function Modal(props){
      return(
        <div className="modal-container">
          ...
          <div className="modal-title">{props.title}</div>
          ...
        </div>
      )
    }

     

    ์œ„์˜ ์˜ˆ์‹œ์—์„œ ๋ณผ ์ˆ˜ ์žˆ๋“ฏ, props ๋ฌธ๋ฒ•์€ ํ•จ์ˆ˜์˜ ํŒŒ๋ผ๋ฏธํ„ฐ ๊ทธ ์ž์ฒด์ด๋‹ค.

    ๋”ฐ๋ผ์„œ ๊ฐ์ฒด state๋ฅผ ์ „๋‹ฌ๋ฐ›์•˜์„ ๋•Œ ๋‚ด๋ถ€ ์š”์†Œ์— ์ ‘๊ทผํ•˜๋Š” ๊ฒƒ ๋˜ํ•œ ๊ฐ€๋Šฅํ•˜๋‹ค.

     

     


    3. props๋กœ ์—ฌ๋Ÿฌ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•  ๋•Œ

    props๋กœ ์—ฌ๋Ÿฌ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•˜๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

     

    <์ปดํฌ๋„ŒํŠธ props๋ช… = ๋ฐ์ดํ„ฐ, props๋ช…2 = ๋ฐ์ดํ„ฐ >์™€ ๊ฐ™์ด

    ๋ณด๋‚ผ props๋“ค์„ ๋‚˜์—ดํ•˜๋ฉด ๋œ๋‹ค.

     

    ์ „์†ก๋œ ๋ฐ์ดํ„ฐ๋ฅผ ์ปดํฌ๋„ŒํŠธ function์—์„œ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ๋“ฑ๋กํ•  ๋•Œ 2๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์กด์žฌํ•œ๋‹ค.

     

    1) ๋”ฐ๋กœ ๋”ฐ๋กœ ๋ฐ›๊ธฐ

    props๋ฅผ ํ•˜๋‚˜์”ฉ ๊ทธ๋Œ€๋กœ ๋ฐ›์•„์˜ค๊ธฐ ์œ„ํ•ด์„œ๋Š”

    ์ž์‹ ์ปดํฌ๋„ŒํŠธ ํƒœ๊ทธ์—์„œ ์ •์˜ํ•œ props๋ช…์„

    ์ž์‹ ์ปดํฌ๋„ŒํŠธ function์˜ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ์ค‘๊ด„ํ˜ธ{ }๋กœ ๊ฐ์‹ผ ํ˜•ํƒœ๋กœ ๋‚˜์—ดํ•˜์—ฌ ๋“ฑ๋กํ•˜๋ฉด๋œ๋‹ค. (์ˆœ์„œ ๋ฌด๊ด€)

     

    ์˜ˆ์‹œ

    function App(){
      return(
        ...
        <์ปดํฌ๋„ŒํŠธ data1="1" data2="Hello" />
        ...
      )
    }
    
    
    function ์ปดํฌ๋„ŒํŠธ({data1, data2}){
      return(
        <div>
          <div>{data1}</div>
          <div>{data2}</div>
        </div>
      )
    }

     

     

    2) ํ•œ ๋ฒˆ์— ๋ฐ›๊ธฐ

    ํ•˜๋‚˜์˜ ํŒŒ๋ผ๋ฏธํ„ฐ๋งŒ ๋“ฑ๋กํ•˜์—ฌ๋„ ์—ฌ๋Ÿฌ props๋“ค์„ ์ „๋‹ฌ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค.

    ์ด๋•Œ๋Š” ์ „๋‹ฌ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋“ค์ด ๊ฐ์ฒด์˜ ํ˜•ํƒœ๋กœ ์ €์žฅ๋˜์–ด ์žˆ๋‹ค.

     

    ์˜ˆ์‹œ

    function App(){
      return(
        ...
        <์ปดํฌ๋„ŒํŠธ data1="1" data2="Hello" />
        ...
      )
    }
    
    // props๋Š” {"data1":1, "data2":"Hello}์˜ ํ˜•ํƒœ๋กœ ์ €์žฅ๋˜์–ด์žˆ๋‹ค.
    function ์ปดํฌ๋„ŒํŠธ(props){
      return(
        <div>
          <div>{props.data1}</div>
          <div>{props.data2}</div>
        </div>
      )
    }

     

    ๊ฒฐ๊ณผํ™”๋ฉด (๋‘ ๋ฐฉ๋ฒ• ๋™์ผํ•œ ๊ฒฐ๊ณผ)

     

    ๋Œ“๊ธ€