리액트 처음부터 다시하기.5

event

이때까지 state 에 저장된값에 따라 component의 상태를 바꾸거나, props를 통해 자식

component에게 state값을 전달하는 방식을 알아보았다..

이번엔 특정조건에 맞춰 state값이 변경되면 결과물이 바뀌는 과정을 알아보자.

이번엔

새롭게 추가한 mode와 welcome state를 추가했다.

다음 이미지를 보기전 중요한 사실!!


State 가 변경되면 reender 함수가 재 호출 되어 그 변경된 state 로 다시 출력된다.

다음 조건문을 살펴보자 조건은 다음과 같다.

1. 우선 _title & _desc 는 초기화 되어있다.
2. 만약 mode 의 state 가 'welcome' 이면....
3. 'welcome' 이 아니고 'read'이면....

다음조건과 같을 때

1. mode 의 state가 welcome이면 _title 과  _desc 자리에 각각 
welcome state 에 저장된 객체의 title & desc 의 value 값을 전달해라

바뀐 mode 의 state 가 어떤 수단에 의해 변경되면 render 함수가 재 호출 되면서

Content component의 내용이 변경되어 화면이 바뀌게 되는 것이다.

tada~~!!

다음엔 이렇게 일일이 내가 바꾸는게 아니라 특정행위를 했을때 자동으로 state가 바뀌고

그 state에 맞게 화면이 랜더링되는것을 알아보아야겠다

좋은 웹페이지 즐겨찾기