[부스터코스/웹 프론트엔드 시작하기 (리액트&리덕스)] 리액트와 이벤트 - render 함수

지금까지 만든 리액트 앱에 다양한 이벤트를 추가해보자.

브라우저 화면

제목에 링크를 걸고, 링크를 클릭하면 welcom에 해당하는 메시지가 나오게 하고,

리스트의 항목을 클릭하면 그 항목에 맞는 content가 출력되도록 한다.

 

각 상황에 맞는 동작을 위해, state에 mode라는 변수를 둬서 현재 어떤 링크가 클릭되었는지 구분하게 해준다.

welcome 모드일 때는 제목 링크를 클릭한 경우, read 모드일 때는 항목 링크를 클릭한 경우로 구분한다.

Subject.js 파일에서 <h1> 태그 안에 <a> 태그를 넣어준다.

이후 현재 모드가 welcome인지 아닌지를 구분하기 위해 state에 mode를 추가하고, welcome 모드일 때 출력할 제목과 내용을 추가한다.

 

리액트에서는 props의 값이나 state의 값이 변하면 해당하는 컴포넌트의 render() 함수가 호출되도록 약속되어 있다.

또한 render() 함수가 호출되면서 render() 함수 하위에 있는 컴포넌트들의 render() 함수도 호출되게 된다.

즉, 화면이 다시 그려지게 된다.

 

이를 이용해서 mode의 값에 따라 컴포넌트의 렌더링이 달라지도록 render() 함수에 조건문을 추가한다.

 

그 후에 Content 컴포넌트의 내용을 수정한다.

content.js

App.js

브라우저 화면

현재 state의 mode 값이 welcome이기 때문에 render() 함수가 호출될 때 if(this.state.mode === "welcome")이 실행된다.

mode를 read로 변경하면 else if 구문이 실행되면서 바뀐 결과가 본문에 출력된다.

 

이렇게 동적으로 App 컴포넌트의 mode 값이 바뀌면 App 컴포넌트의 render() 함수가 다시 실행된다.

각 컴포넌트에 console.log("컴포넌트이름 render") 코드를 추가한 다음 mode를 read로 변경해보자.

read 모드일 때의 브라우저 화면

이미지에서 빨간 박스 안쪽 로그가 모드를 read로 변경했을 때 발생한 것들이다.

APP 컴포넌트의 render() 함수가 먼저 호출되고, 그 다음 하위 컴포넌트들의 render() 함수가 순서대로 호출되는 것을 볼 수 있다.

 

이렇게 APP 컴포넌트의 mode가 달라지면 하위 컴포넌트들의 render() 함수도 다시 호출되기 때문에 화면 렌더링을 다시 할 수 있게 되면서 이벤트에 따른 동작을 보여줄 수 있게 된다.

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web231/lecture/1387425

웹 프론트엔드 시작하기 (리액트&리덕스)