[React] props와 state

* 리액트는 컴포넌트로 구성되며, 하나의 컴포넌트는 부모로부터 전달된 props를 바탕으로 DOM을 렌더링하기 위해 element들을 조합하여 render한다.

* 또한 컴포넌트는 필요에 따라 값을 내부적으로 변경하기 위해 state를 갖는다.

1. props

• properties의 줄임말로 상위 컴포넌트(부모)가 하위 컴포넌트(자식)에 값을 전달하기 위한 방법으로 단방향 데이터 흐름
• 이 프로퍼티는 하위 컴포넌트 즉, 전달 받은 컴포넌트에서 수정이 불가
• 외부에서 전달되는 값으로 변경이 불가능한 특징을 가짐

2. props입력과 출력

index.js - 부모

- 자식 컴포넌트를 부르는 부모 컴포넌트에서 속성으로 prop를 입력할 수 있다.

Day02A4.jsx(클래스형) - 자식

Day02A4.jsx(함수형) - 자식

-  상위 컴포넌트(부모)에서 하위 컴포넌트(자식)에게 prop을 입력을 했기 때문에 DOM을 출력으로 반환하는 곳에서 입력 받은 것을 사용할 수 있다.

- this.props.속성명 을 사용하면 입력받은 것을 사용할 수 있으며 {}을 이용해서 DOM으로 출력할 수 있다.

- 컴포넌트에서 반환하는 DOM을 index.js에서 받아 실제 HTML로 렌더링 함으로 화면에 출력된다.

3. state

this.state = { count : 0, a : 10 }	초기 생성시
this.setState({ count : 1, a : 5 )}	업데이트 시
var count = this.state.count var a = this.state.a // 위에 있는 두개와 밑에 있는 하나가 같은 의미 var { count, a } = this.state	사용 시

• props는 외부에서 전달되는 값으로 변경이 불가능한 특징을 가짐
• state는 그와 다르게 내부에서 값을 스스로 변경해야 하는 경우 상태 관리를 위한 것
• 일반적으로 이벤트와 함께 사용하여 값을 저장/변경 할 때 사용
• render 이후에 state를 변경하게 되면 자동으로 업데이트가 되면서 DOM에도 업데이트가 됨
  (setState는 state 변경과 동시에 DOM에 적힌 state도 업데이트 됨 )
• state는 이벤트와 함께 사용되는데 그것은 이벤트 핸들러 부분에서 예시로 보여줄 예정이다.

4. state 사용( + props )

index.js

- 위처럼 부모 컴포넌트에서 하위 컴포넌트에게 props를 입력해주는데 변수를 이용해 {}로 감싸 준다.

- 숫자로 props를 주고 싶으면 {}로 감싸줘야 한다.

Day03A1.jsx

- 대부문 constructor() 함수에서 state 초기를 설정해준다.

- render가 되고 나서 componentDidMount() 를 통해 DOM을 접근할 때 setState를 통해 state를 변경해주면 자동으로 DOM에도 업데이트 되어서 화면에 나타난다.

- setInterval(function, time) 함수는 두번째 파라미터 시간마다(ms) 매번 주기적으로 첫번째 함수를 호출하는 타이머 함수이다. 위의 함수는 1초마다 state 카운트를 1씩 증가하면서 setState로 state를 변경해주는 함수이다.

- 그렇게 되면 DOM에도 당연히 업데이트 되어서 화면에 나오게 된다.