React

Inflearn 생활코딩

베이스 캠프

state와 props의 차이점<br?

props vs state

props는 read-only
state는 this.setState로 바꿀 수 있다.

컴포넌트 안에서 자신에게 전달된 props의 값을 바꾸는 것은 금지

컴포넌트 밖에서 props를 바꾸는 것은 허용

내부적으로 필요한 데이터나 상태는 state를 통해 관리한다.
props와 state 모두 render 함수를 호출하기 때문에
이 두가지를 적절히 사용하여 화면의 UI를 바꿀 수 있다.

state

사용자의 props와 구현자의 state
외부에서는 props를 통해서 컴포넌트를 제어한다.
이 컴포넌트는 props와 state에 따라서 어떤 상태가 될 것인데
그 상태가 실제 웹 브라우저의 HTML(DOM)에 영향을 줘서 UI가 그려진다.

상위 컴포넌트가 하위 컴포넌트에게 값을 전달할때는 props
하위 컴포넌트가 상위 컴포넌트에게 값을 전달할때는 Event

지금 TOC 컴포넌트에서 글 목록은 어떤 props를 통해 전달하게 될까? App 컴포넌트가 하위 컴포넌트에게 data라고 하는 props의 값을 전달하는 것.

명령 = props

그리고 이벤트가 실행되었을 때 - onclick 같은
this.setState 함수가 실행되면서 상위 컴포넌트(App)의 상태를 바꿀 수 있다.

props와 state

create 구현 : 소개

CRUD
Create
Read
Update
Delete

생성, 수정, 삭제 버튼 만들기