React - props & state

React를 하면 할수록 어려운거 같다. 아니면 아직 잘 몰라서? 아직 익숙하지 않아서?? 암튼 어렵다.

props와 state라는 개념을 잘 이해 했는지 모르겠지만, 까먹기 전에 글을 포스트 해야겠다. 틀린 내용이 많을것 같다.

 

props & state 개념

  *개념적으로 설명하기 어려워서 비유적으로 생각하면...

  *사람으로 비유하자면...

  *사람의 성별이 props이고, 나이가 state라고 볼 수 있다. 남자, 여자는 변하지 않는다. 성전환 수술을 하더라도 xx염색체와 xy 염색체는 변하지 않는다. state는 년도가 지나면 나이는 계속 ++이 된다. state의 뜻은 상태라는 뜻을 가지고 있다. 즉, 그때 그때의 상태를 의미한다. 오늘 기분이 좋은상태, 어제는 기분이 개baby 같은 상태 같이 상황에 따라 변하는 것을 의미한다.

 

props 특징

  *상위에서 하위로는 전달이 가능하지만, 하위에서 상위로는 전달이 불가능

  *props는 읽기 기능만 가능하기 때문에 상위에서 props를 받아와도 하위에서는 수정이 불가능

 

 

state특징

  *상위에서 하위 전달이 가능하며, 하위에서 상위로도 전달이 가능

  *상위든 하위에서든 state를 수정하기 위해서 반드시 this.setState() 메소드를 사용해야 한다.

예제)(from:https://velopert.com/)(구현 해보려고 했는데, 예제들이 전부 서버랑 연결이 되어서 사용되는듯 하다. 아직 react를 잘 몰라서 velopert에서 본 내용을 가지고 왔다)

 

Button을 누르면 Count 되는 예제

App.js 파일

  *import React, {Component} from 'react'는 react로부터 React, Component 가져온다는 것이다. 모듈을 가져와서 여기에 사용하겠다는 의미이다.

  *import Counter from './Counter'는 Counter 파일로부터 Counter 컴포넌트를 가져와서 App.js라는 파일에서 사용하겠다는 것이다.

  *여기서 number = '0'가 props다. 이 값을 Counter 컴포넌트에 인자처럼 사용해서 넣어준다. 그러면 Counter 컴포넌트는 이 값을 가지고 모듈이 실행된다.

  *exprt default App은 App 컴포넌트를 외부로 내보내는 기능이다.(import는 수입, export는 수출 이라는 뜻을 가지고 있다)

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


class App extends Component {
  render() {
    return (
      <Counter number='0' />
    )
  };
};

export default App;

Counter.js 파일

  *Counter 컴포넌트 생성자를 통해서 props를 받아서 가지고 온다. constructor(props)와 super(props)를 선언해서 가지고 와야한다. 어떤 경우는 생략이 가능하지만 아직 잘 몰라서...

  *props는 받아올 때, 객체로 받아온다.

  *handle 메소드를 만들고 this.setState를 활용해서 onclick 이벤트를 주어서 count를 조정 할 수 있다.

  *Class를 사용할 때, 항상 render 메소드를 사용해서 return 값을 가지고 있어야 한다.

import React, {Component} from 'react'

class Counter extends Component{
  constructor(props){
    super(props)
    this.state = {
      number: 0
    }
  }

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

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

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

export default Counter

표시되는 화면

  *Props 값은 변화 없고, 코드 자체도 setState에 넣을 수도 없다.

 

+ 버튼 2번 눌렀을 때

#React#javascript#codestates#props#state