[React] 리액트에서 양방향 바인딩 함 써보기

유데미 강의를 듣다가 양방향 바인딩에 대해서 배웠는데, 실습에서는 쉬워보이는 척..(아마도) 했지만 그래도

양방향 바인딩이라는 용어에 대해 제대로 짚고 넘어가고 싶어서 하는 포스팅이다 !

 

리액트는 기본적으로 단방향 바인딩 을 한다.

부모 -> 자식 컴포넌트로 하향식으로 데이터를 전달하는데, 이때 자식이 부모 컴포넌트의 state를 변경하고 싶다면!

간단히 말해 변경되는 입력값만 수신하는 것이 아니라, 입력에 새로운 값을 다시 전달하고싶다면, 양방향 바인딩을 이용하면 된다.

 

     <form onSubmit= {submitHandler}>
         <div className='new-expense__controls'>
             <div className='new-expense__control'>
                 <label>Title</label>
                 <input type="text" value={enteredTitle} onChange={titleChangeHandler} />
             </div>
             <div className='new-expense__control'>
                 <label>Amount</label>
                 <input type='number' min="0.01" step="0.01" value={enteredAmount} onChange={amountChangeHandler} />
             </div>
             <div className='new-expense__control'>
                 <label>Date</label>
                 <input type='date' min="2020-01-01" max="2023-12-31" value={enteredDate} onChange={dateChangeHandler}/>
            </div>
         </div>
         <div className='new-expense__actions'>
             <button type='submit'>Add Expense</button>
         </div>
     </form>

내가 실습한 코드는 기본 input 요소에 value를 추가 해서 새로운 입력 요소를 submit 했을 때

다시 빈 문자열로 초기화 하는 방법을 사용했다.

이렇게 하면 입력받은 값을 추가 하면서(아직 추가하는 기능까진 구현하지 않았지만)

입력창을 초기 상태로 항상 깨끗이 유지 할 수 있는 것 같다!

 

그냥 내가 이해 한 바를 바탕으로 포스팅 한거라서, 나중에 완강 하고 나서 더 더 제대로 내용을 추가해야겠다 ~~ 

^ @ ^