이벤트 state props 그리고 render 함수

이번에는 어플리케이션을 역동적으로 만들 수 있는 이벤트를 살펴볼 겁니다.

 

props + state + event가 3박자가 착착 맞으면서 어플리케이션의 역동성을 만들어 줍니다.

 

마구잡이로 이벤트를 걸어주면 소스코드가 복잡해지기 때문에, state에서 먼저 틀을 잡아줍니다.

 

 

여기서 중요하게 생각해야하는것은,

state의 값이 변하면 그 state를 가지고 있는 컴포넌트의 render함수가 다시 호출이 됩니다.

그 render함수가 다시 호출됨에 따라서 그 render함수에 하위에 있는 컴포넌트들도 전부 다 호출이 됩니다.

그러면 화면이 전부 다 다시 그려지게 되는겁니다.

왜냐하면 render라는 함수는 어떤 html을 그릴것인가 결정하기 때문입니다.

즉, props나 state가 변하면 화면이 다시 그려지게 되는겁니다.

 

그럼 mode값이 변경이 되면 다시 실행이 됩니다.

 

수정된 소스코드

일단은 mode라는 변수를 두었습니다.

mode라는 변수의 값에 따라 Content의 데이터값이 다르게 출력되게 만들겁니다!

우선 welcome이라는 변수를 만들고 title:'welcome', desc:'Hello, react!'라고 선언해줍니다.

 

render함수에서부터 값을 다르게 출력하게 만들건데요,

Content 의 title과 desc가 참조하는것을 변경할 것입니다.

 

 

여기서 주의해야할점,

참조변수 title과 desc는 App.js 파일에서 동일하게, Content.js 파일 안에 있는 변수도 동일하게 만들어 주셔야 합니다. 그래야지 제대로 원하는 값이 출력이 되게 할 수 있습니다.