이벤트 state props와 render 함수

역동적으로 만들어주는 기술인 이벤트에 대해서 공부를 하였다.

예를 들어 클릭한 것에 대한 화면을 표시할 곳이 매번 달라지고 화면 출력이 달라지는 경우.

 

mode를 설정해주기

그 mode에 따른 살태와 값을 설정해주기

render() 함수가 다시 호출됨으로써 다시 화면을 출력하게 되는데, 이 때 일어나는 이렇게 이벤트를 만드는 것이 목표임.

porps와 state가 바뀌면 다시 함수가 호출 되게끔 만들어야 한다.

 

 

1. mode를 설정하고, 그 mode가 되었을 때 설정되는 props 값이라던지 state 값을 따로 설정해준다.

2. 그리고 if 문을 통해서 mode가 원하는 조건에 충족되었을 때, 어떤 값들을 바꾸게 될 것인지 설정해준다.

3. 이 값이(props나 state 값) 바뀌면 render() 함수가 다시 호출되면서 mode에 따라 정해진 값들로 바뀌게 되고, 그 값에 따라 화면이 동적으로 바뀌게 된다.

 

현재는 위의 화면처럼 수동으로 테스트를 해 보았지만, '이벤트 설치'라는 것은 직접 수동으로 바꾸는 것이 아니라 어떤 페이지 내의 동작 클릭이나 기타 동작을 했을 때 자동으로 바뀌어야 하는 것이므로 이에 대해 더 알아보아야 했다.

 

onclick을 통해서 사용해야 하는데, 기존의 javaScript 규칙과 달리 onClick을 사용해야 함을 명심해야 한다.

onClick={function(e) { ... 이렇게 코드를 사용해야 한다.

 

debugger라는 것을 사용할 수 있는데, 정보를 보기 쉽게 해주는 것이다.(개발자 도구에서)

e.preventDefault() 라는 것을 사용하면, 원래 이 이벤트가 발생하는 기본적인 동작을 막도록 하는 것이다.

예를 들어서 a태그의 경우 화면을 리로드하면서 다른 링크로 페이지를 전환시키는 동작인데, 이것을 쓰면 페이지가 다시 리로드되면서 다른 곳으로 넘어가는 기본 동작을 방지해준다. 이것을 사용하고 사용자가 정의한 동작을 할 수 있게끔 할 수 있다. (a태그의 경우 페이지 전환을 막는 것에 대한 역할)

 

이벤트를 설치하는 방법을 알았으니, 마지마으로 이벤트에서 state를 변경하는 방법이다.

위와 같은 코드에서 this.state.mode = ... 를 사용하면 오류가 발생하게 되는데, 이것은 두가지 방면에서 문제가 있다는 것을 알 수 있다.

 

우선 첫 번째는, this의 값이 컴포넌트 자기 자신을 갖고 있지 않도 undefind이기 때문에 오류가 난다.

이것을 해결하기 위해서는 }끝에 함수가 끝난 직후에 .bind(this)를 추가하면 컴포넌트를 가리킬 수 있게 된다.

 

그 다음 두 번째는, state를 바꾸더라도 페이지가 바뀌지 않는다. 그 이유는 페이지는 state가 바뀐 것을 모르게 때문이다.

그 밑에 this.setState( {

mode: 'welcome'

});

이런 식으로 바꿔주면 된다. setState()를 써서 mode를 바꿔주면 되는 방법이다.

 

바뀐 것에 대한 코드이다. 강의를 먼저 쭉 듣고나서 실습을 해 보아야겠다.