[React] State와 Props

Props

• Props는 Properties의 줄임말이다.
• Props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법이다.
• Props는 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않는다. 변하게 하려면 부모 컴포넌트에서 State를 변경해야 한다.

 

State

• 부모 컴포넌트에서 자녀 컴포넌트로 데이터를 보내지 않고 해당 컴포넌트 내부에서 데이터를 전달하려면 State를 이용한다.
• 예를 들어 검색창에 글을 입력할 때 글이 변하는 건 State를 바꾼 것이다.
• State는 변경 가능(mutable)하다.
• State가 변하면 re-render된다.

 

Props와 State의 차이점은?

Props와 State는 일반 JavaScript 객체다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있다. props는 함수 매개변수처럼 컴포넌트에 전달되는 반면, state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다.