React Props, State

React Props, State

State

State

React에서 State는 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값

props는 위로부터 전달받은 값
state 는 내부에서 변화하는 값

Props 또는 State에 적합한 것은?
실제 생활에서 pops와 state를 나눈다면?

이름 : props - 변하지 않음
성별 : props - 변하지않음
나이 : state - 1년마다 변함
현재 사는 곳 : state - 이사할 때마다 변함
취업 여부 : state - 취업 퇴사 ㅎ
결혼/연래 여부 : state - 결혼 이혼 등 변함

Toggle Switch

State : On / OFF 여부 --> code로 { isOn : true} , {isOn : false} state가 변한다
Counter

State : 현재 숫자 값 --> code로 {count : 0} , {count : 3} { count : 6} 등 state가 변한다

Props

props의 특징

props는 컴포넌트의 속서(property)를 의미한다. 외부로부터 전달받은 값이며, 변하지 않는다
props는 부모 컴포넌트로부터 전달받은 값이며, 마치 함수의 전달 인자(argumrnt)처럼 전달받아서 React 엘리먼트를 반환한다.그렇기 때문에 컴포넌트가 최초 렌더링 될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다.
props는 객체 타입이기 때문에 어떠한 타입의 값도 전달이 가능하다.
props는 Read Only 이기 때문에 자식 컴포넌트에서 함부로 변경할 수 없다. 이는 개발자가 의도하지 않은 Side effect를 방지하고 데이터 흐름 원칙 (React is all about one-way date flow down the component hierarchy)에 위배되기 때문이다. 이러한 방식을 단방향, 하향식 데이터 흐름이라고 한다

How to use props

props를 사용하는 방법5단계

1.사용할 상위 컴포넌트와 하위 컴포넌트를 선언한다.
2.상위 컴포넌트 안에 하위 컴포넌트를 작성한다.
3.상위 컴포넌트에서 하위 컴포넌트로 전달하고자 하는 값과 속성을 정의한다.
4.props를 이용하여 상위 컴포넌트에서 정의한 값과 속성을 전달한다.
5.전달받은 props를 사용 또는 렌더링 한다.