[React] event, render 함수, state 값 변경 방법

이벤트(event)란?

저번 글에서 배웠던 state와 props를 동적으로 움직이게 하는 거임

이해를 위해 예시로 배워보겠다

 

App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mode:'welcome',
      subject:{title:'WEB', sub:'World Wide Web!'},
      welcome:{title:'Welcome', desc:'Hello, React!!'},
      contents:[
        {id:1, title:'HTML', desc:'HTML is for information'},
        {id:2, title:'CSS', desc:'CSS is for design'},
        {id:3, title:'JavaScript', desc:'JavaScript is for interactive'}
      ]
    }
  }

일단 현재 페이지가 welcome 페이지인지 read 페이지인지 구별하기 위해

mode를 welcome으로 설정(초기화)해준다.

그리고 welcome 페이지에 표시할 텍스트를 welcome 프로퍼티에 넣어준다.

이렇게 만들어도 아직 웹 페이지상에선 아무런 변화가 없다.

 

그래서 좀 더 동적으로 만들기 위해 mode가 welcome이면 welcome페이지를,

read면 content를 보여주는 조건문을 만들어보겠다.

 

render() {
    console.log('App render');
    var _title, _desc = null;
    if(this.state.mode === 'welcome') {
      _title = this.state.welcome.title;
      _desc = this.state.welcome.desc;
    } else if(this.state.mode === 'read') {
      _title = this.state.contents[0].title;
      _desc = this.state.contents[0].desc;
    }

    return (
      <div className='App'>
        <Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub} 
        ></Subject>
        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    )
  }

이런 식으로 if문을 사용해 mode가 welcome이라면 _title, _desc이라는 변수에

각각 welcome 프로퍼티의 title값과 desc값을 넣어준다. 

mode가 read라면 contents[0]의 title값과 desc값을 넣어주는데, 여기서 contents[0]은 contents가 리스트이기 때문에

{id:1, title:'HTML', desc:'HTML is for information'}을 뜻한다.

그리고 Content의 title을 _title값으로, desc를 _desc값으로 설정한다.

 

Content.js

class Content extends Component {
    render() {
        return (
            <article>
                <h2>{this.props.title}</h2>
                {this.props.desc}
            </article>
        )
    }
}

Content는 이렇게 설정해주면 된다!

잘 작성됐다면 이렇게 확인해볼 수 있다.

 

근데 이건 전 내용과 같은 거 아닌가요?

이걸 동적으로 바꿀 수 있는 방법 중 하나는 component의 mode를 웹 페이지에서 바꾸는 것이다.

일단 chrome 확장 프로그램에서 "React Developers Tools" 다운 받는다.

그리고 실행된 자신의 웹 페이지에서 F12를 누르고 >> 버튼을 누른 후 Component를 클릭해보자.

그럼 이렇게 생성된 Component들을 볼 수 있다.

여기서 App을 선택하고 밑에

state -> mode: "welcome"에서 welcome을 read로 바꿔보자.

그럼 이렇게 변한 걸 확인할 수 있다.

짠

 

리얼 이벤트

이젠 크롬 개발자도구에서 내가 직접 설정하는 게 아니라 버튼을 누르면 바뀌게끔

Subject의 WEB링크를 클릭하면 App 컴포넌트의 state를 바꾸는 기능을 구현할거임.

 

일단 원래 App.js에 있는 Subject 컴포넌트는 주석처리한 후 그다음 줄에 Subject.js에 있는 return값을 입력한다.

지금은 App 컴포넌트에 적었기 때문에 props를 state로 변경한다.

 

WEB을 클릭했을 때 (onClick) function() {} 안에 내용을 실행하게 한다.

일단 테스트용으로 alert를 뜨게 해 봤는데, 웹을 실행해서 WEB을 클릭하면 hi가 정상적으로 나오는 걸 볼 수 있다.

But, WEB을 클릭하면 페이지가 새로 고침 되는 걸 볼 수 있다. -> React를 쓰는 이유가 뭐죠?

그래서 a 태그(href이 가리키는 페이지로 이동)의 기본적인 동작을 없앨 거임

 

먼저 이렇게 a 태그를 수정해보자.

function의 인자로 e가 추가되고 console.log(e)와 debugger가 추가됐다.

*debugger : 크롬 개발자 도구를 켠 상태에서 실행되면 그 지점에서 실행을 멈추고 Sources라는 탭으로 자동 이동함.

 

WEB 클릭 화면

e : 이벤트를 처리할 수 있게 함수에 주입된 정보 -> preventDefault라는 함수가 속해 있음

preventDefault라는 함수는 이벤트가 발생한 태그의 기본적인 동작을 하지 못하게 한다.

 

debugger와 alert("hi")를 지우고, e.preventDefault() 입력해보자.

그럼 웹페이지에서 WEB을 눌러도 새로고침이 안 되고,

콘솔 창엔 오른쪽 사진처럼 e에 어떤 정보가 들어있는지 출력될 것이다.

 

이제 버튼을 클릭하면 state의 mode값을 welcome으로 바뀌는 기능만 만들면 된다.

 

이렇게 코드를 추가해보고 실행하면 페이지가 렌더링 돼야 하는데, 아무 반응이 없다.

그 이유는 리액트가 state값이 바뀌었다는 것을 모르기 때문!

 

이렇게 코드를 수정하면 정상적으로 작동이 되는 걸 볼 수 있다.

리액트에선 state값을 변경할 때 this.setState() 함수를 이용해서 변경해야 함.

 

state_값을_변경하는_방법_정리.찐최종

1. 함수 뒤에 .bind(this) 추가하기
2. this.setState 함수를 호출해 state 값을 변경하기'

 

다음은 bind 함수를 이해하는 글이 될 것 같다.

잘못 된 점이나 고칠 부분이 있다면 댓글 달아주세요 :)