Dropdown Box π’
App.jsμμλ 'Dropdown Example'μ΄λΌλ μ λͺ©κ³Ό, Dropdown μ»΄ν¬λνΈλ₯Ό λ λλ§νλ€. λμμ optionsλΌλ λ°°μ΄μ΄ μλ¨μ μ μΈλμ΄ μλλ°, μ΄λ₯Ό Dropdown μ»΄ν¬λνΈμ propsλ‘ μ λ¬νκ³ μμμ νμΈν μ μλ€.
Dropdown.jsμμλ μ λ΄μ©μ returnνλ€.
1) Dropdown Button
Dropdown Buttonμμλ selectedOptionμ΄λΌλ μν, μ¦ options λ°°μ΄μ νΉμ μμλ₯Ό λ²νΌμ ννλ‘ λ³΄μ¬μ€λ€. λ¨ ||(λλ)μ°μ°μλ₯Ό ν΅ν΄ μ νλ optionμ΄ μ‘΄μ¬νμ§ μλ κ²½μ°μλ "Select an option"μ΄λΌλ 문ꡬλ₯Ό 보μ¬μ€λ€.
λμμ onClickμ setIsOpenμ΄λΌλ μν μ λ°μ΄νΈ ν¨μκ° μ°κ²°λμ΄ μλ€. isOpenμ΄λΌλ μνλ₯Ό true λλ falseλ‘ λ³ννμ¬ νμ μμμ λ λλ§μ μ‘°μνλ μν μ νλ€.
2) Dropdown List
Dropdown Listλ isOpenμ΄λΌλ μνμ μν΄ ν΅μ λλ€. Dropdown Buttonμ ν΄λ¦ν΄μ isOpenμ΄ trueλ‘ λ³κ²½λλ©΄, styled componentμ μ μΈλ λλ‘, νμ μμ(=Item)μ block λ¨μλ‘ λ³΄μ¬μ€λ€. λ§μ½ falseλΌλ©΄ noneμ μν΄ μ무 μμλ 보μ΄μ§ μμ κ²μ΄λ€.
3) Dropdown Item
isOpenμ΄ trueμ΄λ©΄ block λ¨μλ‘ λ³΄μ¬μ§λ Itemμ΄ λ°λ‘ μ μ½λμ΄λ€. λ°°μ΄μ μμμ λ§λ λ΄μ©μ λ λλ§νλ€.
handleOptionClick ν¨μκ° μ°κ²°λμ΄ μλλ°, λ°°μ΄μ μμ μ€ μΌλΆλ₯Ό μΈμλ‘ λ°μμ λ²νΌμ 보μ¬μ§ selectedOptionμ μνλ₯Ό μ΅μ ννλ€. μΆκ°μ μΌλ‘ setIsOpenν¨μμ falseλ₯Ό μ λ¬νμ¬, μ΅μ μ ν ν Dropdown Listκ° κΊΌμ§λλ‘ νλ€.
νλ©΄ π’