render, state

render

• render: 컴포넌트를 html로 바꾸어 브라우저에 나타나게 하는 것

• 리액트의 컴포넌트는 클래스 기반, 함수형으로 나눌 수 있는데 클래스 기반 컴포넌트에서는 render함수를 반드시 호출해야 한다.

  import React, { Component } from 'react'; // destructing
  
  class SearchBar extends Component {
    // render 함수 호출
    render() {
      return <input />
    }  
  }
    
  export default SearchBar;
  

  render함수는 위처럼 사용 한다. render() {} 컬리브라켓 안에 리턴이 있으며, 이때 반드시 JSX를 리턴해야만 브라우저에 보여진다.

  상속받은 Component 는 destructing 한 것으로, {Component} = react; 로 한 것이며, 이는 const Component = React.Component; 와 같은 의미이다.

   

state, setState

• 스테이트란 자바스크립트 객체로 유저 이벤트를 저장하고 반응하는 데에 이용된다.

• 클래스 기반 컴포넌트만이 스테이트를 가질 수 있다.

• 클래스 기반 컴포넌트는 스테이트가 변화할 때마다 리렌더링하며, 자식 컴포넌트에게도 리렌더링 하도록 강제한다.

• 스테이트의 변화는 this.setState를 통한 변화나 스테이트의 업데이트를 말한다.

• 스테이트의 초기화 문법은 아래와 같다.

  import React, { Component } from 'react'; // destructing
  
  class SearchBar extends Component {
    constructor(props) {
      super(props); 
      
      this.state({ term: '' })
    }
    render() {
      return (
        <div>
        <input onChange = {event => this.setState({ term: event.target.value })}/> 
  			Input Value: {this.state.term}
  			</div>
      )
    }  
  }
    
  export default SearchBar;
  

  모든 자바스크립트 클래스는 컨스트럭터를 가진다. 인스턴스 생성에 필요한 constructor를 호출하고, 컨스트럭터 내부에 부모의 메서드를 호출하기 위해 super()을 호출한다. 그리고 그 클래스 컴포넌트가 가질 state를 this.state({})로 초기화한다.

  이후 render()함수를 호출하고, onChange 이벤트 핸들러를 input 태그 안에 설정하였다. onChange는 input에 이벤트가 발생하면 컬리브라켓{} 내의 함수를 호출한다.

  이 함수 내부에 this.setState를 사용하였는데, 이는 스테이트를 변경할 때에 사용하는 것이다. this.state로 접근은 초기화 및 상태 참조에만 사용되며 상태 변경은 this.setState를 사용한다.

  만약 input에 이벤트가 발생하여 스테이트가 변경되면 컴포넌트는 자동적으로 리렌더링한다. 이 때 렌더링 메서드는 모든 업데이트된 정보를 DOM에 푸시한다. 컴포넌트가 리렌더링될 때마다 DOM안의 state 객체가 업데이트 된다.

  이렇게 SearchBar 컴포넌트는 term state를 업데이트하고 저장한다. 그리고 이를 리액트돔에게 렌더링하고 있는 다른 컴포넌트(eg. App Component)에 인스턴스를 pass하여 렌더링한다.

   

  +) 사족: 자바를 배우기 전에 react를 배웠을 때에는 문법이 하나도 이해가 안갔는데, 자바를 배우고 나서 보니까 바로 이해가 되었다