React공부-이벤트

1. 다이나믹하게 바꿔보자
   
   WEB을 누르면 HTML is Hyper~~~부분이 다르게 바뀌고
   HTML, CSS, Javascript를 누르면 그에 맞게 바뀌도록 해보자

2. WEB 링크 걸기
   
   Web링크를 클릭하면 App에서 State값이 바뀌고 바뀐 state가 Content 컴포넌트에 props로 전달함으로써 동적으로 바뀌는 것을 해보자

3. State 세팅하기
   
   mode를 추가한다. welcome일 때 출력하는 값도 추가한다. mode는 welcome, read, update, create 등등 이 올수 있다.

4. State란
   만약 State, Props가 변하면 그 State를 가지고 있는 컴포넌트에 render함수가 다시 호출된다. 또한 render함수에 있는 하위 컴포넌트들도 다시 호출되는데 하위 컴포넌트 안에 있는 render함수도 다시 실행됨으로서 다시 그려진다.

5. render함수 고치기
   
   즉 mode에 따라 Content 컴포넌트가 바껴야 한다. 그러기 위해서 조건문을 추가하여 welcome일 때와 read일 때를 나누어서 생각해야 한다. welcome일 때에는 welcome의 타이틀을, desc를 저장한다. 그리고 props에 주입한다.

read일 때에는 임시로 contents에 0번째 인덱스의 title, desc가 저장되도록 한다.

6. render함수 실행 과정
   

APP먼저 실행되고 그 뒤 하위 컴포넌트 순으로 실행된다.
App컴포넌트가 가지고 있는 state에 mode값이 바뀐다면 App 컴포넌트의 render가 다시 실행되고 그 밑에 있는 하위 컴포넌트의 render함수가 다시 실행될 것이다. 그래서 화면이 갱신되게 될것이다.