[React] - 데이터 바인딩

state에 값을 담아 둘 수가 있다.

 

react 특성 상 title이라는 값이 변경이 되면 자동으로 재렌더링(데이터만 바뀌면 자동으로 바뀌는)되는 구조이다 보니 이런식으로 사용이 된다.

 

function App(){
  let [title, setTitle] = useState('제목');

  return (
    <p>{ title }</p>
  )
}

 

글이 부족한 것 같아 데이터 바인딩을 검색해보니

 

양방향, 단방향 바인딩이 나오는데, 

 

 view - model / model - view 값이 있으면 표출해주고, 값이 바뀌면 자동으로 재렌더링 되는것을 말하는 것 같다.

단점으로는 성능이슈가 있다고 한다..(요새 하드웨어가 좋아서 티가 안날것같은...)

 

단방향 예시

const [inputValue, setInputValue] = useState("");
...
<input value={inputValue} onChange={e => setInputValue(e.target.value)} />

사용자가 변수를 직접적으로 변경하는 것이 아닌 저희가 변경을 감지하여 변수의 값을 바꿔줄 때

 

단점

매번 변화를 감지하는 코드를 작성해야한다. 그렇기에 코드의 양이 길어질 수 있음