react) state사용

props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할때 사용하고, state는 하나의 컴포넌트 안에서 전역변수처럼 사용한다.

 constructor(props){
        super(props);
        this.state = {
            StateString: this.props.reactString,
            StateNumber: 200,
        }
    }
    render(){
        return (
            <div style={{padding:"0px"}}>
                {this.state.StateString}{this.state.StateNumber}

            </div>
        )
    }
}

생성자 함수constructor안에서 state변수의 초깃값을 정의하고, 새로운 StateString변수에는 props로 전달된 reactString값을 저장하고, StateNumber 변수에는 숫자 새로 200을 저장한다. 

this.state.변수명 문법으로 state변수에 접근할수있다.

 

setState()

this.state.변수명=value와 같이 state를 직접 변경하면 render()함수를 호출하지않아서 화면에 보이는 state값은 바뀌기 전 상태로남아있다. 그래서 setState()함수로 state를 변경해야 render()함수를 호출해 변경된 값을 화면에 보여준다.

 

** class 형 컴포넌트가 Component와 PureComponent 두개가 있다. 

Component에서는 setState()함수로 값이 변경되거나 초기화 되면, 변경된 값이 진짜 다른 값이되었든 아님 setState()가 실행됬지만, 동일한 값을 setState()로 변경해도 render()함수가 실행된다.

반면 PureComponent 컴포넌트는비교대상의 값을 비교해서 동일하지 않을때 변경이 발생했다고 본다. 그래서 불필요한 render() 함수 실행을 줄여서 페이지 성능을 향상 시킨다.

 

PureComponent 에서도 기본적으로 변수값만 비교하지만, 예외적으로 객체에 대해서는 참조값을 비교한다. 그래서 setState()로 새로 객체를 생성하게 된다면 같은 값이라 하더라도 다른 참조값이라서 다르다 인식하고 render() 함수를 굴린다. 그래서 이때 state값의 변경을 비교하는 것과 동일한 기능을하는 함수를 제공하는 shallow-equal 패키지를 이용한다.

 

shallow-equal 패키지

해당 패키지는 npm install shallow-equal 명령어로 패키지를 프로젝트 내에 설치해야한다.

shallowEqualArray() 함수

해당 함수를 사용하면 문자열과 배열은 값만 비교한다. 객체는대신 PureComponent와 동일하게 참조값을 비교한다.