리액트 처음부터 다시하기.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에 맞게 화면이 랜더링되는것을 알아보아야겠다
Author And Source
이 문제에 관하여(리액트 처음부터 다시하기.5), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@code_yoon20/리액트-처음부터-다시하기.5저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)