03/30-2

state

class StateComp extends Component{
    //state 컴포넌트 안에서 사용되는 변수
    constructor(props){
        //constructor를 사용하면 props를 따로 연결
        super(props);
        //this.state안에 객체형태로 값을 작성 할 수 있다.
        this.state={
            number:0,
            name:"홍길동"
        }
    }

state 안의 객체를 불러내는 것은 prop처럼

let {객체명}=this.state

로 불러낸다

버튼에 onlick으로 number 값을 1씩 증가하는 함수를 넣고 싶다면

button 태그안의 onclick 에 대한 함수를 넣고{화살표 함수}에서 실행할 함수 부분에

this.setState({number:number+1}) 를 넣어주면 된다. [JSON 을 못넣기 때문에 억지로 쪼개서 적음] setState는 글자 그대로 State의 속성값을 set(변경)해준다

똑같은 number 처럼 보이지만 앞의 number는 프로퍼티이고 뒤에 number는 let으로 되어 있다. 간단하게 생각하면 number=number+1이라고 보면 된다. 앞의 number는 반환할값이고, 뒤에 number는 계산할 값이다. 실제로 앞의 number에 +1을 붙여보면 실행하기 전에 문제 에 오류가 나온다. 좀 더 간단하게 생각하면 :를 기준으로 앞에는 객체명을 의미, 뒤에는 해당 객체에 들어갈 값 을 생각해놓으면 된다.

데이터 효율을 위해서 비동기로 움직인다.동기를 확인하기 위해서 함수 형태로 사용

(()=>({})) 예)(prevState)=>({state속성:값})

이런 형태로 사용하는 이유 : return 으로 객체 전달

이전에 있던 state값을 prevState로 들고와서 수정하고 값이 바뀐 후에 들고오기 때문에 동기적으로 값이 수정된다