React - props & method & setState

michael00987·2020년 2월 1일
0

React & Redux &Next

목록 보기
1/1

props

부모 컴포넌트가 자식컴포넌트의 속성으로 state의 정보를 객체로 넘겨줄 수 있고,
넘겨받은 객체를 props 키워드를 통해 사용하거나 다시 자식의 자식 객체로 넘겨 줄수 있다.

state는 하위(자식) 컴포넌트에서 직접 접근할 수 없다.

그러나 간접적으로 접근 할 수 있는 방법은 있다.

바로 부모 컴포넌트가 가지고 있는 메서드를 통해서 접근할수 있다.

부모컴포넌트가 가지고 있는 메서드를 props로 자식컴포넌트에 내려주면 자식 컴포넌트는 props.method() 로 부모컴포넌트가 가지고 있는 메서드를 실행 시키게 된다. 이때 이 메서드가 state를 수정하는 메서드일 경우에, 이 메서드는 부모 컴포넌트의 state 갱신하게 된다.

setState메서드가 실행이 되면, 부모컴포넌트의 render메서드가 실행이되고,
변화된 부분을 리액트가 감지하고, 수정하게 된다.

예제1) props & method & setState

class App expends React.Component{
  constructor(props){
    super(props);
    this.state={
      name:name
    } // state
    this.method = this.method.bind(this) // 메서드에 binding을 하지 않으면 undefined 가 된다.
  } // constructor
  method(name){ //class 문법에서는 function을 생략한다.
    this.setState{
      name:name + "!"
    }
  } // setState 메서드가 실행이 되면 render메서드가 실행된다.
  
  
  // e 는 event객체 이다.
  // e.target를 하면 해당 객체가 속한 엘리먼트를 가져올수 있다.
  // .value를 하면 그 엘리먼트의 value에 접근할수 있게 된다.
  onInput(e){
    this.setState{
      name:e.target.value
    }
  }
  
  render(){
    return(
      <div> //최상위 태그 한개만 리턴한다. 최상위 태그 안에는 여러개의 태그가 존재할수 있다.
        <ChildComponent namae={this.state.name} method={this.method} onInput={this.onInput}/>
  //1. 자식 컴포넌트는 대문자로 시작해야 한다.
  //2. 메서드도 자식컴포넌트에 넘겨줄수 있다.
      </div>
      )
  }
}//class

function ChildComponent (props){
  console.log(props.namae) // 부모 컴포넌트 state의 name를 자식컴포넌트(사용자 정의태그)에서 정의한 namae라는 이름으로 가져다 사용할수 있다.
  return(
    <p>
      <div onClick={()=>props.method(props.name)/> 
      <input type="text" onChange={()=>props.onInput()> 
    //부모컴포넌트가 가지고 있는 메서드를 props로 받아서 state를 변경할수 있다. 인자로 props를 넘겨 줄수도 있다.
    
    </p>
  )
}
profile
차근차근

0개의 댓글