[ReactJS] 튜토리얼(Tutorial) - 4

튜토리얼(Tutorial) - 4

클릭 이벤트와 state

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={() => alert('click')}>                                          
        {this.props.value}
      </button>
    );
  }
}

이제 다음 단계로 넘어가 Square컴포넌트를 클릭 했을때 X로 채워지는 이벤트를 등록해보자

우선 이벤트 등록을 위해 render 메소드 안에 리턴되는 버튼 태그를 위와 같이 변경 해야한다.

X로 채워지기전에 클릭 이벤트가 제대로 동작하는지 확인하는 테스트 코드이다.

코드를 수정하면, Square 컴포넌트를 클릭하면 'click'이라는 alert이 뜨게 된다.

=>는 ES6에서 사용되는 arrow function으로써, 함수를 간결하게 선언하게 도와준다.

onClick={()=>alert('click')}에서처럼 onClick은 함수를 전달한다는 것에 유의 하자.

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }
 
  render() {
    return (
      <button className="square" onClick={() => alert('click')}>                                         
        {this.props.value}
      </button>
    );
  }
}

리액트 컴포넌트는 construct 내부의 this.state로 상태를 저장할 수 있다.

대신 construct에 저장되는 state는 비공개로 설정되어야한다.

따라서 Square의 value값을 state에 저장하고, Square 컴포넌트를 클릭하면 값을 변경하는 것으로

틱택토의 클릭 이벤트를 구현해보도록하자.

첫번째로 위의 코드처럼 constructor 내부에서 state 값을 초기화 해준다.

그리고 자바스크립트에서는 서브클래스의  constructor를 정의할 때 명시적으로 super();를 호출해야한다.

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }
 
  render() {
    return (
      <button className="square" onClick={() => this.setState({value: 'X'})}>                            
        {this.state.value}
      </button>
    );
  }
}

다음 단계로 넘어가서 Square의 JSX에서 버튼을 클릭 했을 때 이벤트를 변경해주자.

위의 코드는 현재 상태의 값을 표시하고 클릭시 전환되게 한다

- <button> 태그의 this.props.value를 this.state.value로 변경한다.

- ()=>alert('click') 함수를 ()=>this.setState({value:'X'})로 변경한다.

이렇게 코드를 작성하면, this.setState가 호출될 때마다 변경을 감지하여

하위 컴포넌트와 함께 해당 컴포넌트가 페이지에서 다시 랜더링 된다.

예를 들어, 버튼을 클릭하게 되면 value값이 X로 토글되며, 그리드 상에서 X가 랜더링 되어 사용자에게 보이게 되는것이다.

개발 도구

리액트로 만들어진 웹페이지는 웹 개발자 도구에서 제대로 확인하기가 힘들다.

따라서 크롬이나 파이어 폭스에서 확장 도구로 제공하는 개발 도구를 사용하는 것이 좋다.

이렇게 제공되는 확장 도구를 사용하면, 리액트 컴포넌트의 props나 state값을 확인할 수 있다.

사용 방법은 도구 설치 후, 리액트로 제작된 페이지에서 개발자 도구를 열면 제일 오른쪽 React 탭을 클릭하면 된다.