React State & Props

1. State & Props

State는 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만,
props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다는 차이가 있다.
props를 사용했는데도 state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것에 있다.

Props 생성

React에서 props는 기본적으로 자동 생성해 준다. 우리가 별도의 코드를 작성하지 않아도. 컴포넌트 객체에 props가 생성된다.

Props 설정 및 사용

한번 설정하면, Read-Only로만 사용하는 props는 두가지 방법으로 설정 가능하다.
부모로 부터 설정 (부모가 해당 component)을 생성할때 값을 전달해서 설정
기본값을 설정하여, 기본값으로 동작하도록 설정한다.

실습 후 정리

• props, state 모두 component에서 사용가능한 정보를 담을 수 있다.
• props는 read-only 이고, 부모로 부터 설정되거나, 기본값으로만 한번 설정된다. (불변)
• state는 change가능하고, component에서 처음 init을 해야만 설정된다.
• state의 설정은 setState라는 함수를 통해서 해야하고, 해당 함수는 비동기로 동작한다. 따라서 prevState에 설정하는 형태를 취해야 한다.