State

State는 리액트에서 앱의 유동적인 데이터를 다루기 위해 있는 객체이다.

일반적으로 리액트에서는 유동적인 데이터는 변수에 담아서 사용하지 않고 useState() 라는 리액트 함수를 사용하여 State라는 저장공간에 담아 사용한다.

State를 사용하는 이유

State가 변경이되면 자동으로 재렌더링 된다. (변수는 변경되어도 자동 재렌더링이 안됨)

Props

프로퍼티 즉 properties
props는 부모 컴포넌트로부터 받아온 데이터이며 컴포넌트 끼리 값을 전달하는 수단이다.

state 와 props 차이

props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내 선언된 변수처럼) 컴포넌트 안에서 관리한다.

• state와 prop을 정리하면 아래와 같다.

1. 둘 다 일반 자바스크립트 객체다
2. state는 컴포넌트 안에서 사용된다
3. prop은 컴포넌트에 매개변수처럼 전달하는 것이다

리렌더링 발생 조건

1. State가 바뀔 때
2. Props가 바뀔 때
3. 부모컴포넌트가 업데이트 되었을 때(즉 리렌더링 됐을 때)
4. 강제로 업데이트 했을때 (forceUpdate)를 통해 강제로 컴포넌트를 업데이트 했을 때