React(Props,State) 구조분해할당....

React란 무엇인가.

React는 프론트앤드 라이브러리이다. Javascript, HTML 을 사용하여 인터넷을 만들어왔다가 React가 나오고나서 React기반으로한 인터넷을 많이 만들기 시작했다. React를 사용함으로써 인터넷 페이지 전체를 다시 로드하지 않아도 부분적으로 로드를 가능하게 해주어 자연스러움을 연출하게 해주었다. 뿐만아니라 compoenent 독립적인 단위 모듈을 JSX언어를 사용하여 개발 하여 유지와 보수를 쉽게 할수 있게 되었다.

Props 와 state

Props 는 property 의 약자 즉 속성이다. component로 작성한 객체를 component의 속성, 'props'라고 한다.

function App() {

  function Hello(props){
    return(
      <div> {props.name} {props.say} </div>
    )
  }


  return (
    <div className="App">
      <Hello name = 'junrae Kim' say = 'nice to meet you'/>
    </div>
  );
}

Hello 태그 안에있는 name 과 say 는 Hello 의 props이다. Props는 읽기 전용임으로 수정 불가이다. 항상 동일한 입력값에 동일한 결과 값을 반환하기 때문에 순수 함수라고 함. Prop는 method도 넘겨 줄수 있다. Props를 상위클래스에서 하위 클래스로 전달 가능.

State 는 말 그대로 '상태'를 나타낸다. 상태란 props와는 다르게 출력값이 변경되어진다. state를 사용하기 위해서는 function 에서 class 로 바꿔 주어야 한다. 변경된 state 값을 업데이트 하기 위해 this.setState()를 사용해야한다. 상위 클래스에서 하위 클래스에 button이벤트 함수를 props로 넘겨 하위클래스에서 버튼을 클릭할시 상위 클래스로 넘어가 숫자가 바뀐다.(Lisfting State Up)

setState()
setState()가 호출할 때 현재 state로 합치게 된다.

import ClickedEvent from "./ClickedEvent";
import { Component } from "react";
// state를 사용하여 button 을 누를때 변경사항 만들기.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { number: 0 };
    this.onButtonClicked = this.onButtonClicked.bind(this);
  }

  displayNumb() {
    return <div>{this.state.number}</div>;
  }

  onButtonClicked() {
    this.setState({
      number: this.state.number + 1
    });
  }
  render() {
    return (
      <div>
        <div>{this.displayNumb()}</div>
        <ClickedEvent butt={this.onButtonClicked} name={this.displaya} />
      </div>
    );
  }
}

export default App;

import { Component } from "react";

class ClickedEvent extends Component {

  clicB() {
     return this.props.butt
  }

  render() {
    return (
      <div>

        <button onClick={this.clicB()}>누르시오</button>
      </div>
    );
  }
}

export default ClickedEvent;

구조 분해 할당 (Destructing assignment)

배열 또는 객체의 구조를 분해해서 할당해준다...

배열일경우

let users = ['kim' , 'lee', 'jung'];
let [ user1,user2,user3] = users;

uesr1 = kim , user2 = lee, user3 = jung 
으로 구조가 분해되어 변수에 할당된다. 

let users = ['kim' , 'lee', 'jung'];
let [ user1, ,user3] = users;
uesr1 = kim ,  user3 = jung 
일부 반환값이 무시된다. 

이런식으로 a 와 b의 값을 switch 할수있다. 
let a= 1;
let b=2;


[a,b] = [b,a];

객체일경우

let user = {name:'kim', age: 20}
let {name,age} = user;

name 와 age 키값이 바뀌어도 상관없음

(let name = user.name; let age = user.age; 와 같다.)

name = 'kim', age =  20

let{name:letter , age:num} = user.
//이런식으로 name의 키값을 letter로 age 키값을 num으로 바꿀수있다. 
let letter = user.name
let num = user.age 와 같다. 


let user = { 
	name: 'kim',
    age: 20,
};

let {name,age,gender:'male'} = user;

gender가 initialize가 안되어있을경우 

gender = 'male'이다.