[React] props와 state

 

React에서 props란?

• 컴포넌트에 원하는 값을 넘겨줄 때 사용하는 input 값이다.
• props를 넘겨받은 컴포넌트 내부에서는 임의로 수정할 수 없는 읽기 전용 값이다.
• props로 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JS 요소라면 제한이 없다.
• props를 사용하는 주목적은 컴포넌트에 데이터를 넘기거나, state의 변화를 주거나, 컴포넌트를 효율적으로 재사용하기 위함이다.

 

React에서 state란?

• 컴포넌트의 생애 주기 동안에 컴포넌트 내에서 생성, 변경될 수 있는 값이다.
• state가 생성된 컴포넌트 내에서만 접근할 수 있다.
• state가 변경되면 해당 컴포넌트는 리렌더링 된다. 따라서, state를 가능한 간단하게, 구성 요소를 최소화하여야 한다.
• 반드시 setState 함수를 사용하여 변경해야 한다.

 

props와 state 비교

• props와 state는 모두 순수 JS 객체이다. 두 객체 모두 render 함수의 output에 영향을 줄 수 있지만, props는 함수의 파라미터와 같이, state 함수 내에 선언된 변수와 같이 작동한다.