ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • ν”„λ‘œμ νŠΈ TIL (4) - [ λ””λ²„κΉ…μ˜ μ€‘μš”μ„± & ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ˜ μ€‘μš”μ„± ]
    ν”„λ‘œμ νŠΈ 리뷰/Book-Square 2020. 9. 18. 18:07

     

    였늘 ν•œ 일 πŸ˜’

     

     

    input νƒœκ·Έλ₯Ό μ‚¬μš©ν•  λ•Œ μ£Όμ˜ν•  점을 ν‰μ†Œμ— 잘 μ•Œκ³  μžˆλ‹€κ³  μƒκ°ν–ˆμ—ˆκ³  또 λ§Žμ€ input νƒœκ·Έλ₯Ό λ‹€λ€„λ³΄μ•˜μŒμ—λ„ λΆˆκ΅¬ν•˜κ³  μ™œ 이런 μ‹€μˆ˜λ₯Ό ν–ˆλŠ”μ§€ 자괴감이 λ“€μ—ˆμŠ΅λ‹ˆλ‹€......

     

    μ‹œμž‘ν•˜κΈ°μ— μ•žμ„œ μ œκ°€ κ΅¬ν˜„ν•˜κ³ μž ν–ˆλ˜ λ‘œμ§μ€ λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

     

    • μœ μ €κ°€ 독후감 μž‘μ„±ν•˜κΈ°λ₯Ό ν΄λ¦­ν•˜μ—¬ WriteReport νŽ˜μ΄μ§€μ— 였면 기쑴에 있던 독후감 보여주기
    • 기쑴에 있던 독후감을 μˆ˜μ •λ²„νŠΌμ„ 톡해 μˆ˜μ •ν•  수 μžˆλ‹€.
    • μˆ˜μ •λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ 기쑴에 있던 value값에 μž…λ ₯ν•˜κ³ μž ν•˜λŠ” value 값을 λ”ν•΄μ„œ μˆ˜μ •ν•  수 μžˆλ‹€.

     

    이 λ‘œμ§μ„ μˆ˜ν–‰ν•˜κΈ° μœ„ν•΄μ„œ input 속성 쀑 readOnlyλΌλŠ” 속성을 μ‚¬μš©ν•˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

    readOnly 속성은 input값이 읽기 μ „μš©μΈμ§€ μ•„λ‹Œμ§€λ₯Ό boolean κ°’μœΌλ‘œ νŒλ‹¨ν•˜λŠ” μ†μ„±μž…λ‹ˆλ‹€. 

    μˆ˜μ • λ²„νŠΌμ„ ν΄λ¦­ν•˜λ©΄ input에 μžˆλŠ” readOnly 속성을 true(μ½κΈ°μ „μš©)μ—μ„œ false둜 λ°”κΏ”μ€ŒμœΌλ‘œμ¨ input 값을 μˆ˜μ •ν•  수 있게 λ©λ‹ˆλ‹€.

     

     

    λ¨Όμ € 기쑴에 있던 독후감 글을 λΆˆλŸ¬μ™€ input창에 보여주기 μœ„ν•΄ placeholder 속성에 이 독후감 글을 λ„£μ–΄μ£Όμ—ˆμŠ΅λ‹ˆλ‹€.

    <input
      type="text"
      placeholder={reportList.reportMemo}
      readOnly={clickReportModified}
    />

     

    그리고 μˆ˜μ • λ²„νŠΌμ„ ν΄λ¦­ν•˜κ²Œ 되면 ν•΄λ‹Ή input의 placeholder 값을 가져와 input.value에 ν• λ‹Ήν•˜λŠ” 방식을 μ‚¬μš©ν•˜μ˜€μœΌλ‚˜ 이 방법을 μ‚¬μš©ν•˜λ‹ˆκΉŒ μˆ˜μ •ν•˜κ³ μž ν•˜λŠ” inputνƒœκ·Έμ˜ value 값이 잘 λ“€μ–΄μ˜€μ§€ μ•ŠλŠ” ν˜„μƒμ„ κ²ͺ게 λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

     

    λ‘œμ§μ—λ„ λ¬Έμ œκ°€ μžˆμ—ˆμ§€λ§Œ 그것보닀 κΈ°κ» readOnly 속성을 κ΅¬κΈ€λ§ν•˜μ—¬ ν•™μŠ΅ν•΄λ†“κ³  placeholder에 κΈ°μ‘΄ 독후감 글을 보여주렀고 ν•˜κ³  μžˆμœΌλ‹ˆ μ €λŠ” input νƒœκ·Έμ˜ readOnly속성을 μ œλŒ€λ‘œ ν™œμš©ν•˜κ³  μžˆμ§€ λͺ»ν•˜κ³  μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

     

     

     

    μ—¬κΈ°μ„œ μ½”λ“œλ₯Ό λ‹€μŒκ³Ό 같이 λ³€κ²½ν•˜κ²Œ λ˜λ©΄μ„œ input의 value 속성을 μ§€μ •ν•˜κ²Œ λ˜λŠ” 두 번째 μ‹€μˆ˜λ₯Ό ν•˜κ²Œ λ©λ‹ˆλ‹€.

    <input
      type="text"
      value={reportList.reportMemo}
    />

     

    value값에 λ“±λ‘λ˜μ–΄ 있던 독후감 글을 가져와 λ„£μ–΄μ£Όκ²Œ λ˜μ—ˆκ³  μˆ˜μ • λ²„νŠΌμ„ ν΄λ¦­ν•˜λ©΄ readOnly값을 false둜 λ°”κΏ”μ£Όλ©΄μ„œ onchange 이벀트λ₯Ό 톡해 μˆ˜μ •ν•˜κ³ μž ν•˜λŠ” value값을 넣어주도둝 λ‘œμ§μ„ λ³€κ²½ν•˜κ²Œ λ©λ‹ˆλ‹€. 

     

     


     

    결둠적으둜 μ €λŠ” 문제 해결을 μœ„ν•΄ μ–΄λ””μ„œ λ¬Έμ œκ°€ λ°œμƒν•˜μ˜€λŠ”μ§€ 디버깅을 ν•˜λ €κ³  ν•˜μ§€ μ•Šμ•˜κ³  디버깅을 ν•˜μ§€ μ•ŠμœΌλ‹ˆ μ–΄λ””μ„œ λ¬Έμ œκ°€ λ°œμƒν•œκ±΄μ§€ μ œλŒ€λ‘œ νŒŒμ•…ν•˜μ§€λ„ λͺ»ν•΄μ„œ μ—‰λš±ν•œ μ½”λ“œλ₯Ό μˆ˜μ •ν•˜κ³  μ•Œκ³ μžˆλ˜ μ§€μ‹κΉŒμ§€λ„ ν™œμš©ν•˜μ§€ λͺ»ν–ˆμŠ΅λ‹ˆλ‹€.

     

    λ˜ν•œ ν•˜λ‚˜μ˜ ν•¨μˆ˜μ— λͺ¨λ“  λ‘œμ§μ„ λ‹€ λ„£κ³  μ‚¬μš©ν•˜λ €κ³  ν•˜λ‹ˆ 가독성도 λ–¨μ–΄μ§€κ²Œ λ˜μ—ˆκ³ , ReactλŠ” ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ˜ 철학을 λ°›μ•„ λ§Œλ“€μ–΄μ§„ λΌμ΄λΈŒλŸ¬λ¦¬λΌλŠ” 것과 Hook을 μ‚¬μš©ν•˜κ³  μžˆμŒμ—λ„ λΆˆκ΅¬ν•˜κ³  Hook의 ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ° νŠΉμ§•μΈ λͺ©μ μ„±( μ•Œκ³ λ¦¬μ¦˜μ„ λͺ…μ‹œν•˜λŠ” 것 보닀 λͺ©ν‘œ(ν•¨μˆ˜)λ₯Ό λͺ…μ‹œν•˜λŠ”λ° 쀑심. ) 을 좔ꡬ함에 νƒ„μƒν•œ κ²ƒμž„μ„ μ œλŒ€λ‘œ μΈμ§€ν•˜μ§€ λͺ»ν•˜κ³  μ‚¬μš©ν•˜κ³  μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

     


     

     

     

    ν•΄κ²° κ³Όμ •

     

     

    λ¨Όμ € input의 value 속성을 μ§€μ •ν•˜λ©΄ input 값이 λ³€κ²½λ˜μ§€ μ•ŠλŠ”λ‹€λŠ” 점뢀터 디버깅을 ν•˜κΈ° μ‹œμž‘ν–ˆμŠ΅λ‹ˆλ‹€.

    const [input, setInput] = useState("");
    
    useEffect(() => {
      setInput(reportList.reportMemo)
    },[]);
    
    const onChangeHandler = (e) => {
      setInput(e.target.value);
    }

     

    useEffectλ₯Ό μ‚¬μš©ν•˜μ—¬ input 값에 λ“±λ‘λ˜μ–΄ 있던 독후감 글을 λ„£μ–΄μ£Όμ–΄ λ Œλ”λ§ 될 λ•Œ input의 value에 값이 λ“€μ–΄κ°ˆ 수 μžˆλ„λ‘ μž‘μ„±ν•΄μ£Όμ—ˆκ³ 

    onChangeHandler ν•¨μˆ˜λ₯Ό μ„ μ–Έν•˜μ—¬ input에 onChange μ΄λ²€νŠΈκ°€ 일어날 λ•Œλ§ˆλ‹€ setInput(e.target.value); 둜 μƒνƒœ 값을 μ—…λ°μ΄νŠΈ ν•΄μ£Όκ³  μžˆμŠ΅λ‹ˆλ‹€.

     

    <input
      type="text"
      value={input}
      onChange={(e) => onChangeHandler(e)}
      readOnly={clickReportModified}
    />

     

     

    onChange 이벀트λ₯Ό 톡해 λ“€μ–΄μ˜€λŠ” 값을 담은 input을 value에 λ‹΄μ•„μ€ŒμœΌλ‘œμ¨ input 값이 변경될 λ•Œλ§ˆλ‹€ 화면에 λ³΄μ—¬μ§ˆ 수 μžˆλ„λ‘ 섀정이 μ™„λ£Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€.

     

    μˆ˜μ • μ™„λ£Œ λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ 이 input μƒνƒœ 값을 가지고 λΆ€λͺ¨ μ»΄ν¬λ„ŒνŠΈμ—μ„œ Props둜 λ‚΄λ €μ€€ ν•¨μˆ˜μ— μ „λ‹¬μΈμžλ‘œ 값을 λ„£μ–΄μ£Όλ©΄μ„œ μ„œλ²„μ— 독후감 μˆ˜μ • μš”μ²­μ„ μ •μƒμ μœΌλ‘œ 잘 보낼 수 있게 λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

     

     

     


     

    마치며

     

    μœ„μ˜ μ½”λ“œλŠ” μˆ˜μ •ν–ˆλ˜ μ½”λ“œμ˜ 일뢀λ₯Ό 가져와 적은 것이고 이 μ½”λ“œ 외에도 μ—¬λŸ¬ λ‘œμ§λ“€μ΄ μžˆλŠ”λ° μ™œ ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ„ ν•΄μ•Όν•˜λŠ”μ§€ λŠλ‚„ 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

    ν•¨μˆ˜λ₯Ό μ„ μ–Έν•  λ•Œμ—λŠ” κ·Έ ν•¨μˆ˜κ°€ μ–΄λ– ν•œ 일을 ν•˜κ³  μžˆλŠ”μ§€ λͺ…ν™•ν•΄μ•Όν•˜κ³  ν™•μ‹€ν•˜κ²Œ 뢄리해주어야 ν•©λ‹ˆλ‹€. ν•˜λ‚˜μ˜ ν•¨μˆ˜μ— λͺ¨λ“  λ‘œμ§μ„ λ‹€ λ„£κ²Œ λ˜λ‹ˆ μ–΄λ””μ„œ μ—λŸ¬κ°€ λ‚¬λŠ”μ§€ 디버깅쑰차 μ‹œλ„ν•  수 μ—†μ–΄μ„œ λ§Žμ€ μ‹œκ°„μ„ ν—ˆλΉ„ν•˜κ³  μ—‰λš±ν•œ μ½”λ“œμ—μ„œ μ‚½μ§ˆμ„ ν•˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

     

    ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ„ λ‹€μ‹œ ν•œλ²ˆ λ˜μ§šμ–΄ μƒκ°ν•˜λ©° μ½”λ“œλ₯Ό μˆ˜μ •ν•˜κ³  λ‚˜λ‹ˆ μ½”λ“œμ–‘λ„ 반 μ΄μƒμœΌλ‘œ μ€„μ—ˆκ³  가독성도 쒋아지며 λΆˆν•„μš”ν•œ λ‘œμ§λ„ μ œκ±°ν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

     

     

    ( μ½”λ“œ ν•œμ€„ν•œμ€„ μž‘μ„±ν•  λ•Œλ§ˆλ‹€ λ””λ²„κΉ…μ˜ μ€‘μš”μ„±κ³Ό ν•¨μˆ˜ μ„ μ–Έμ˜ λͺ©μ μ„±μ„ μƒκ°ν•˜κ³  μž‘μ„±ν•΄μ•Όκ² λ‹€λŠ” κΉ¨λ‹¬μŒμ„ μ–»μ–΄κ°ˆ 수 μžˆμ—ˆλ˜ μ‹œκ°„μ΄μ—ˆμŠ΅λ‹ˆλ‹€ 😭)

     

     

    λŒ“κΈ€ 0

Designed by Tistory.