본문 바로가기

카테고리 없음

[React]Props 와 State의 차이점

-Props와 State의 차이


1.Props의 특성

-읽기 전용이다.

-부모 요소에서만 설정 가능하다.

Props는 변할 수 없다. 자식 컴퍼넌트는 상속하는 부모 컴퍼넌트로부터 props를 받는데 이 props는 상속받는 자식 컴퍼넌트에서는 수정이 불가능하다. React의 데이터 흐름은 TOP-DOWN 형식이므로 부모 컴퍼넌트에서 데이트를 출력해서 자식 컴퍼넌트로 내려가는 형식이기 때문이다.props 는 "this.props.xxxx"로 표시된다.
2.State의 특성

-state 변경은 비동기 될 수 있다.

-state는 this.setState를 사용하여 수정되어 질 수 있다.

props와의 차이점은 변할 수 있다는 것이다. state는 고정된 데이터가 아니라 변경될 수 있는 처리할 때 효율적으로 사용할 수 있다. 또한 state는 함수형 컴포넌트가 아니라 클래스형 컴포넌트에서 사용해야 한다. 그리고 state값을 변경시 해당 컴포넌트는 다시 렌더링된다. 

 

컴포넌트는 다음과 같은 상황에서 다시 렌더링이 된다.

-자신의 상태(state)가 변경될 때.

-부모 컴포넌트가 리렌더링될 때.

-자신이 전달받은 props가 변경될 때.

-forceUpdate 함수가 실행될 때.

---forceUpdate() 란?

기본적으로 state 나 props 가 변경되면 해당 컴포넌트를 리렌더링시킨다.

하지만 state 나 props 가 아닌 다른 data 를 통해서 render()함수를 동작시켜야 할 때가 있다.

이런 경우에는 React의 기본적인 component life cycle 와 무관하기 때문에 직접 React에게 해당 component가 리렌더링되야 한다고 알려야 한다. 이때 사용가능한 함수가 forceUpdate()이다