[211019] React #02 : state&event

생활코딩! React 리액트 프로그래밍 도서를 바탕으로 React 공부시작.

금일 진도는 65P ~ 125P.

목차로는 01. 리액트 기초내에 13) React Developer Tools ~ 17) 컴포넌트 이벤트 만들기

 

 

1. React 디버깅 툴

크롬 앱스토어에서 React Developer Tools 확장도구 설치(edge에 설치함)

그냥 Vue devtools랑 거의 같음.

리액트 기준으로 컴포넌트들 보여주고 state 변경가능하고.

 

2. state & 이벤트

드디어 나왔다, state.

Vue로 따지면 <script> data 영역에 정의되는 애들.

state쓰려면 constructor가 필수이며, 거기서 선언 및 초기화.

class App extends Component{
    constructor(props) {
        super(props);
        this.state = {
            title:'Title'
        }
    }
}

사용법은 아래와 같이 그냥 어제 props 썼던 것처럼 this.state.title와 같이 this.state라는 객체의 property 형태로 씀.

<Subject title={this.state.title}/>

react에선 중괄호 하나로 묶으면 그 내부는 자바스크립트로 취급하기 때문에 위와 같은 형태가 성립됨.

 

그리고, state에 있는 배열형 데이터를 바탕으로 화면에 v-for 쓰듯이 여러개 돌리는 것도 함.이때, 얘도 v-for때처럼 key를 줘야함. 안 그러면 콘솔 에러뜸.

class Lists extends Component{
  render(){
    let list = [];
    for(let i = 0; i < 3; i++){
      list.push(<li key={i}>{i} 번째 Row</li>)
    }
    
    return (
      <ul>
        {list}
      </ul>
    )
  }
}

 

그리고 state 변경엔 this.setState 함수를 쓸 것. Vue를 할 때 data내부에 선언한 변수를 조정하는 것도 마찬가지였지만, 모던 자바스크립트의 특성상, 사용중인 변수의 변경을 캐치하기는 힘듦. 왜냐면 이게 객체내부에 내부에 내부에 또 내부에...어디까지 갈 지 알 수가 없기 때문임. 그래서 Vue의 경우엔 Primitive타입은 그냥 대입 변경해도 캐치가 되서 리렌더링 되지만, 객체의 경우엔 Vue.$set을 쓰라고 권장하기도하고 배열은 push, pop같은 기존 함수를 써야한다고 함. 근데 react는 그렇게 개별로 복잡한 사용성 ㄴㄴ임. 무조건 setState 쓸 것.

 

 

HTML의 기본 이벤트 활용시엔 기존에 onclick 이었다면 onClick로 C가 대문자가 됨.

커스텀 이벤트를 정의하고자 할 때는 Vue처럼 @ 기호로 바인딩하는게 아니라 콜론이나 @없이 그냥 props로 취급해서 Child 컴포넌트로 전달한다는 것. 그래서 Child 컴포넌트에서 이벤트 호출할때도 그냥 this.props.이벤트명() 이렇게 호출함.

이벤트내에서 this를 활용하기 위해(props나 state를 활용해야하니까) bind로 묶어줄 것.

<a href="/" onClick={
  function(e){
    e.preventDefault();
    this.setState({title:'2nd Title'});
  }.bind(this)
}>샘플링크</a>

 

그래서 오늘 한 것중에 제일 중요한 거 2개.

• 함수 뒤에 bind(this) 하기
• state 변경은 this.setState 함수쓰기

 

-1. 기타 알아둘 것들

컴포넌트 만들때, 아래 코드는 필수.

import React,{Component} from 'react';