React - props & state & event handling

- props

 : 컴포넌트 외부에서 컴포넌트에게 주는 데이터

- state

 : 컴포넌트 내부에서 변경할 수 있는 데이터

둘다 변경이 발생하면, 랜더가 발생

 

-  render 함수

 : props와 state를 바탕으로 컴포넌트를 그림

 -> props와 state가 변경되면 컴포넌트를 다시 그림

=> 렌더함수에 정의해 놓는것

 

- props 사용

function Component(props) {
 return <div>{props.message} </div>
 }
 
 //class component
 class Component extends React.Component {
  render() {
  	return (
     <div> {this.props.message}</div>
    );
   }
 }
 
 //default props
 //함수에서도 사용 가능
 Component.defaultProps = {
	message: "기본값"
 };
 
 //class에서만 사용가능
 static defaultProps = {
 	message: "기본값2"
 }
 
 ReactDOM.render(
 	<Component message= "안녕하세요"/>, 
 	document.querySelector(#root)
    );

 

- state 사용

state = {

 count:0,

};

 

=> {this.state.count} 이런식으로 사용 가능

 
 //class component

 class Component extends React.Component {
  //state 선언방식1
  state = {
  	count: 0,
  }
  
  //state 선언방식2
   constructor(props) {
   	super(props);
    this.state = {count:0};
   }
  render() {
  	return (
     <div> {this.state.count}</div>
    );
   }
 }
 
 //setstate를 사용하면 값이 바뀐 상태로 렌더 메소드가 호출됨
 //this.setstate에서
 componentMount() {
 	setTimeout(() => {
        //setstate방식1
    	this.setState({
        	count: this.state.count +1,
        });
        
        //방식2
        this.setState((previousState) => {
        	const newState = {count: previousstate.count+1} // 이전값 이용 가능
            return newState;
        });
    },1000);
 }

 

- event handling

: 이벤트가 발생하면 그에 맞는 변경이 일어나도록 해야함 -> jsx에 이벤트 설정 가능

• camelCase로만 사용 가능 - onClick,,
• 이벤트에 연결된 자바스크립트 코드는 함수다 -> 이벤트 = {함수}

function Component() {
 state = {
 	count:0,
 };
 //this를 바인드 하는 방법1
 constructor(props){
  super(props);
  this.click = this.click.bind(this); 
 }
 reunder() {
 return (
  <div>
   <button
    onClick = {() => {
     console.log("clicked");
     this.setState((state) => ({...state, //위의 state를 그대로 복사
      count: state.count+1,})); 
    }}
    > </button>
    </div>
 );
}
}

//방법2
render() {
return (
  <div>
   <button
    onClick = {}
    > </button>
    </div>
 );
}

click() {
	console.log("clicked");
     this.setState((state) => ({...state, //this가 바인드가 제대로 안돼서 에러남
      count: state.count+1,}));
}

//this바인드하기 위한 방법2
//이렇게 선언해서도 사용함
click = () => {


 
}