[React] State 사용, LifecycleAPI

1. State 사용

---

state를 사용하기 위해서는 클래스형 컴포넌트가 기반이 되어야 한다. 

기본 형태로는 아래와 같다.

 

1) state로 부모 컴포넌트 > 자식 컴포넌트로 값 넘겨주기 

먼저 생성자에 state를 선언해주고 그 state 값을 렌더링할 때 사용할 수 있다. 

또한 이 state 값을 자식 컴포넌트에게 넘겨준다면, 자식 컴포넌트는 이 데이터를 props를 통해 사용할 수 있게 된다. 

//부모 컴포넌트 Test

import React, { Component } from 'react';
import TestChild from './TestChild';
class Test extends Component {
  constructor(props){
    super(props);

    this.state ={
      name:'song',
      age:'30'
    }
}

  render() {
 
    return (
      <div className="App">
          <p>Parent Component : {this.state.name}</p>
          <p>Parent Component : {this.state.age}</p>
          <TestChild name={this.state.name} age={this.state.age}/>
         
      </div>
    );
  }
}

export default Test;

 

자식 컴포넌트는 props로 값을 표현 

//자식 컴포넌트 TestChild

import React, { Component } from 'react';


class TestChild extends Component {

    render(){
        return(
            <div>
            <h2>Child Component : {this.props.name}</h2>
             <h2>Child Component : {this.props.age}</h2>
            </div>
        );
    }
}


export default TestChild;

 

2) 이벤트 핸들러를 자식컴포넌트에 넘겨서 state값 변경해보기 : setState()

 

부모컴포넌트에서 이벤트 핸들러를 만들어 state값을 변경할 준비를 한다. 값은 자식 컴포넌트에서 <form>태그를 통해 변경된다. 

 

//부모 컴포넌트 Test

import React, { Component } from 'react';
import TestChild from './TestChild';
class Test extends Component {
  constructor(props){
    super(props);

    this.state ={
      name:'song',
      age:'30'
    }
    this.updateHandler = this.updateHandler.bind(this);
}

  updateHandler(e){
    e.preventDefault();
    this.setState({
      name:e.target.name.value,
      age:e.target.age.value
    })
  }

  render() {
 
    return (
      <div className="App">
          <p>Parent Component : {this.state.name}</p>
          <p>Parent Component : {this.state.age}</p>
          <TestChild name={this.state.name} age={this.state.age} updateHandler={this.updateHandler}/>
         
      </div>
    );
  }
}

export default Test;

 

onSubmit에 이벤트 핸들러를 적용시키고 input에 값을 넣으면 그 값으로 state 값이 변경된다. 

//자식 컴포넌트 TestChild

import React, { Component } from 'react';


class TestChild extends Component {


    render(){
        return(
            <div>
            <form  onSubmit={this.props.updateHandler}>
                <b>NAME : </b><input name='name' type='text' size='50' placeholder={'please change name current name is :' + this.props.name}></input>
                &nbsp;<b>AGE : </b><input name='age' type='text' size='50' placeholder={'please change age current age is :' + this.props.age}></input>
                &nbsp;<input type='submit'/>
            </form>
            <h2>Child Component : {this.props.name}</h2>
             <h2>Child Component : {this.props.age}</h2>
            </div>
        );
    }
}


export default TestChild;

 

<초기값>

<변경값>

 

2. 유튜브 강의 참고한 코드

---

Counter.js

import React, { Component } from 'react';

class Counter extends Component {

    state = {
        number : 0
    }

    handleIncrease = () => {
        this.setState({number:this.state.number + 1})
    }

    handleDecrese = () => {
        this.setState({number:this.state.number -1})
    }
    render(){

        return(
            <div>
                <h1>카운터</h1>
                <div>값 : {this.state.number}</div>
                <button onClick={function(e){
                    e.preventDefault();
                    this.handleIncrease();
                }.bind(this)}>+</button>
                <button  onClick={function(e){
                    e.preventDefault();
                    this.handleDecrese();
                }.bind(this)}>-</button>
            </div>
        );
    }

}

export default Counter;

import React, { Component } from 'react';

class Counter extends Component {

    constructor(props){
        super(props);
        this.handleDecrese = this.handleDecrese.bind(this);
        this.handleIncrease = this.handleIncrease.bind(this);
    }

    state = {
        number : 0
    }

    handleIncrease(){
        this.setState({number:this.state.number + 1})
    }

    handleDecrese(){
        this.setState({number:this.state.number -1})
    }
    render(){

        return(
            <div>
                <h1>카운터</h1>
                <div>값 : {this.state.number}</div>
                <button onClick={function(e){
                    e.preventDefault();
                    this.handleIncrease();
                }.bind(this)}>+</button>
                <button  onClick={function(e){
                    e.preventDefault();
                    this.handleDecrese();
                }.bind(this)}>-</button>
            </div>
        );
    }

}

export default Counter;

 

이벤트를 설정해주는 부분에서 아래와 같이 가져올 수 있다. 

  render() {
    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.number}</div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }

 

Test.js : Counter컴포넌트를 사용할 페이지

import React, { Component } from 'react';
import Counter from './components/Counter';

class Test extends Component{

    render(){
        return(
            <div>
                <Counter></Counter>
            </div>
        );   
    }
}
export default Test;

 

Index.js  : 새로 만든 페이지가 열려지도록 ReactDOM의 render함수에 Test 넣기

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Test from './Test';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Test />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

 

 

 

 

3. LifecycleAPI

---

 

Mounting : 리액트의 컴포넌트가 웹브라우저에 나타날 때

Updating : 컴포넌트의 state나 props가 바뀌었을 때

Unmounting : 컴포넌트가 웹브라우저에서 사라질 때 

 

 

 

 

 

참조한 URL:

https://www.youtube.com/watch?v=mYEZh6TV10M&list=PL9FpF_z-xR_E4rxYMMZx5cOpwaiwCzWUH&index=10&t=0s

https://www.youtube.com/watch?v=Na_kP7X6KGs&list=PL9FpF_z-xR_E4rxYMMZx5cOpwaiwCzWUH&index=10