[React] Props, State, 리렌더링 발생 조건

Props

Props란 Properties의 줄임말로, 리액트에서는 속성을 나타내는 데이터로 사용됩니다.

• props는 상위 컴포넌트에서 하위 컴포넌트의 단방향 데이터 흐름을 갖습니다.
• props는 하위 컴포넌트에서 값을 직접적으로 수정할 수 없습니다.

즉, props는 👉 컴포넌트가 부모 컴포넌트로부터 받아온 데이터입니다.

Reference - AWS

State

State란 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용됩니다.

• 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 주로 사용됩니다.
• 프로퍼티(props)의 특징은 컴포넌트 내부에서 값을 바꿀 수 없다는 것입니다. 하지만 값을 바꿔야 하는 경우도 분명 존재하며, 이럴때 state라는 것을 사용합니다.
• 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용됩니다.

state는 어떤 컴포넌트에만 한정하여 사용되는 데이터를 포함하며, 해당 데이터는 시간이 지남에 따라 변경될 수 있습니다.

state는 사용자가 자유롭게 정의할 수 있으며, 일반적인 자바스크립트 객체이어야 합니다.

어떤 값이 렌더링 또는 데이터 흐름 상에서 (예를 들어, 타이머의 ID) 사용되지 않는다면, 해당 값을 state에 넣지 않아도 됩니다. 그러한 값은 컴포넌트 인스턴스의 필드로 정의할 수 있습니다.

state의 값은 직접 변경하면 안 됩니다. 왜냐하면 이후 호출되는 setState()가 이전에 적용된 변경 사항을 덮어쓰기 때문입니다.
state 값은 기본적으로 불변적(Immutable)인 데이터로 취급하고, state의 값을 변경할때는 무조건 setState()를 이용해 state의 값을 변경해야 합니다.

즉, state는 👉 컴포넌트가 가지고 있는 데이터 입니다.

 

state 선언 방법

const [state, setState] = useState(initialState);
const [ 변경 될 데이터 값, 데이터 변경 함수 ] = useState(초기값);

 

리렌더링 발생 조건

React 컴포넌트가 렌더링을 수행하는 시점은 다음과 같습니다.

1. Props가 변경되었을 때
2. State가 변경되었을 때
3. forceUpdate() 를 실행하였을 때
4. 부모 컴포넌트가 렌더링되었을 때

1 ~ 3번의 과정을 통해 컴포넌트가 렌더링될 때, 자식 컴포넌트 또한 같은 과정으로 렌더링이 진행됩니다.

하지만, 컴포넌트에서 렌더링 결과에 전형 영향을 미치지 않는 변경사항이 발생하게 된다면, 불필요한 렌더링이 발생 하므로 성능 손실이 발생합니다. 이는 렌더링에서 수행하는 로직이 많을수록, 많은 컴포넌트를 출력할 수록 손실은 배가 됩니다.

 

References

State and Lifecycle – React

Components와 Props – React

React 렌더링 이해하기