양방향 데이터 바인딩

😎 양방향 바인딩이란?

양방향 바인딩을 사용하는 경우 리렌더링이 어떻게 이루어질 지 그려보세요.

(부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정하고 그려봅시다.)

데이터 바인딩
화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것
ex) js 데이터 값 변경 → HTML에 변경된 값 출력

 

단방향: 모델이 가진 값을 뷰에 보여주고, 뷰에서 모델의 값을 변경할 수 없음
양방향: 모델이 가진 값을 뷰에 바인딩 해주고, 뷰에서 모델의 값을 변경할 수 있음

단방향 바인딩, 양방향 바인딩 흐름

 

리액트는 단방향 데이터 바인딩을 하므로, 이벤트를 통해 다시 화면에 뿌려주는 과정이 필요함

 

자식 컴포넌트 B에서 이벤트를 통해 부모 컴포넌트 A의 데이터를 변경할 경우

리액트는 부모 컴포넌트가 업데이트 되면 자식 컴포넌트까지 함께 리렌더링을 하므로

A, B 컴포넌트가 함께 리렌더링 됨

 

리액트 라이프 사이클, 리액트 렌더링 조건

✅ 리액트 리렌더링 조건

state의 변경
setState 메서드를 사용해서 데이터를 변경하면 리액트는 변경을 감지하고 리렌더링을 함

새로운 props의 전달
전달받은 props 값이 업데이트 되면 리렌더링을 함

부모 컴포넌트의 렌더링
부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 함께 리렌더링 됨

forceUpdate의 실행
리렌더링을 하고 싶을 경우 사용할수 있는 메서드 (강제 리렌더링)

shouldComponentUpdate에서 true가 반환될 때
각각의 컴포넌트는 shouldComponentUpdate 라는 메소드를 가지고 있고
state의 변경 또는 새로운 props를 전달 받는 경우 실행된다.
이때 기본적으로 return 값은 true 가 되어 렌더링이 시작되고,
리렌더링이 필요하지 않을 경우 return value = false로 지정해서 리렌더링을 막을 수 있다

 

💡 오늘의 결론

리액트는 기본적으로 단방향 데이터 바인딩을 하고,

양방향 바인딩을 하기 위해선 이벤트 등을 사용하고,

그 과정에서 부모 컴포넌트의 업데이트로 인해 리렌더링 되면

자식 컴포넌트도 함께 리렌더링 된다.

배울게 많은 리액트

 

 

 

참고

https://felixgerschau.com/react-rerender-components/

https://pt.slideshare.net/miladiir/angular-js-42828566/7?smtNoRedir=1