[React] edX - Introduction to ReactJS Module2 내용정리

edX사이트에서 Introduction to ReactJS 강의를 들으면서 정리한 내용입니다. 

 

2018/04/18 - [Development/React] - edX - Introduction to ReactJS Module1 내용정리

 

 

Class Components

- Class Component

Class Component 는 Functional Component 와 다르게 React Component 가 라이프사이클 메소드(Life Cycle method) 와 상태(state) 를 가질수 있도록 해준다. Class Component는 this.state, this.props 를 가지고 있다. 

 

class Welcome extends React.Component{
    render(){
        return <h1>Hello World!</h1>
    }
}

 

- Render()

render() 메소드는 Class Component 에서 React Element를 리턴할때 사용된다.

 

- Adding properties to Class Components

Class Component의 property는 this.props 를 통해서 접근가능하다. 

 

class Welcome extends React.Component{
    render(){
        return <h1>Message: {this.props.message}</h1>
    }
}

 

<Welcome message="Hello World!"/>

 

State

- Constructor(props)

constructor() 메소드는 React Component 가 mount 되기 전에 호출되며 component의 기본 상태를 설정하는데 사용된다. 

constructor() 메소드 시작에 super(props)를 호출하는것은 중요하다. 안할 경우 this.props 가 정상적으로 동작하지 않을 수 있다. 

constructor() 메소드의 첫번째 파라메터는 component에 전달되는 속성을 나타낸다. 

 

class Counter extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return <div>Hello World!</div>
    }
}

 

- Adding an initial state to Class Component

Class Component 의 state 는 반드시 object 형태로 선언되어야 한다. 

 

class Counter extends React.Component{
    constructor(props){
        super(props)
        this.state = {foo:123,bar:456}
    }
    render(){
        return <div>foo:{this.state.foo} bar:{this.state.bar}</div>
    }
}

 

- Updating State

setState(updater, [callback]) 을 통해서 상태 업데이트가 가능하다. 상태를 업데이트 하는 것은 비동기식이기 때문에 옵션으로 callback 메소드를 호출하게 할수있다. callback 메소드는 업데이트가 완료되면 호출된다. 

setState 메소드는 component life cycle의 updating 단계를 시작하는 트리거가된다. 이것 때문에 sshouldComponentUpdate() 메소드가 false를 리턴하지 않으면 component가 다시 렌더링 된다. 

 

class Counter extends React.Component{
    constructor(props){
        super(props)
        //initial state set up
        this.state = {message:"initial message"}
    }
    componentDidMount(){
        //updating state
        this.setState({message:"new message"})
    }
    render(){
        return <div>Message:{this.state.message}</div>
    }
}

 

- Updating state based on previous state

setState() 메소드는 Component의 상태를 즉시 업데이트 하지 않고 큐에 넣어둔 후 나중에 진행된다. 렌더링을 좀더 효율적으로 하기위해서 batch형태로 업데이트 한다. 

아래 소스에서 setState 메소드를 여러번 호출하지만 state value 는 1만 증가한다. 

 

class Counter extends React.Component{
    constructor(props){
        super(props)
        //initial state set up
        this.state = {value:0}
    }
    componentDidMount(){
        //updating state
        this.setState({value:this.state.value+1})
        this.setState({value:this.state.value+1})
        this.setState({value:this.state.value+1})
        this.setState({value:this.state.value+1})
    }
    render(){
        return <div>Message:{this.state.message}</div>
    }
}

 

setState() 메소드는 첫번재 파라메터로 메소드를 사용할수 있으며 기존 상태와 설정을 넘겨준다.

 

class Counter extends React.Component{
    constructor(props){
        super(props)
        //initial state set up
        this.state = {message:"initial message"}
    }
    componentDidMount()
        //updating state
        this.setState((prevState, props) => {
            return {message: prevState.message + '!'}
        })
    }
    render(){
        return <div>Message:{this.state.message}</div>
    }
}

 

- State is not mutable

State 는 오직 읽기만 가능하기 때문에 임의로 변경해서는 안된다. 

 

Life Cycle Methods

- Mounting Phase Methods

mounting 단계는 component가 생성되거나 DOM 에 렌더링할때 시작된다. 

• constructor(props) : component 가 처음 초기화할때 오직 한번만 호출된다.
• componentWillMount() : component 가 mount 하려고 할때 호출된다.
• render() : component가 렌더링 할때 호출된다.
• componentDidMount() : component 가 mount 된 후에 호출된다.

- Updating Phase Methods

updating 단계는 component state 또는 properties 가 변경될때 시작된다.

• componentWillReceiveProps(nextProps) : component 가 update  되고 새로운 props를 받았을때 호출된다.
• shouldComponentUpdate(nextProps, nextState) : 새로은 props는 받고 update 하려고 할때 호출된다. 이 메소드가 false 이면 componentWillUpdate(), render(),  componentDidUpdate() 는 실행되지 않는다.
• componentWillUpdate(nextProps, nextState) : update 될때 호출된다. 
• render()
• componentDidUpdate(prevProps, prevState) : update  끝나고 호출된다.

- Unmounting Phase Methods

unmounting 단계는 component 가 DOM 에서 제거될때 시작된다. 

• componentWillUnmount() : component 가 unmount 되고 즉시 호출된다. 

 

Event Handlers

- Adding Event Handlers

React 와 HTML 에서의 이벤트 핸들러 차이

• React 에서는 JSX {} 을 사용해서 정의한다.
• React 에서는 이벤트 이름을 쓸때 camelCase 를 사용한다. 

React
<button onClick = {clickHandler} >Click Me</button>
 
HTML
<button onclick = "clickHandler()" >Click Me</button>

 

- Binding Event Handlers to Claas Component

이벤트 핸들러는 Class Component 내부에 정의 해야 한다.

class Counter extends React.Component{
    constructor(props){
        super(props)
        this.state = {count:0}
        //binding is necessary to make `this` point to the correct object
        this.clickHandler = this.clickHandler.bind(this)
    }
    clickHandler(){
      //increments the count of the state
      this.setState((prevState,props) => {
        return {count: prevState.count + 1}
      })
    }
    render(){
        //renders a button that displays the state count
        return <button onClick = {this.clickHandler}>{this.state.count}</button>
    }
}
 
ReactDOM.render(
  <Counter/>,
  document.getElementById("root")
)