함수형 컴포넌트

함수형 컴포넌트 위주로 책이 진행됩니다.
props 넘겨봤습니다. (부모자식관계)

오예

• props 기본값 설정: defaultProps 책 094
• 태그 사이의 내용을 보여 주는 children
• 비구조화 할당문법을 통해 props 값 추출 (destructuring)
• propTypes를 통한 props 검증 (isRequired도 있습니다.)
• 클래스형 컴포넌트에서 props 사용하기 this.props 하면 됩니다.

클래스형 컴포넌트의 State

클래스형의 컴포넌트의 State는 객체형이여야 합니다.

다음 예제도 해봤습니다

• this.setState 를 사용하여 state 값을 업데이트 할 때는 상태가 비동기적으로 업데이트 됩니다. 만약 두번 연속 호출하면 어떻게 될까요?

onClick = {() => {
	// this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다.
    this.setState({number: number + 1})
    this.setState({number: this.state.number +1 })
}}

• this.state.number 로 업데이트된 값을 가져올수 있을것 같지만 그렇지 않습니다.
• 책 109족 처럼 prevState "명시적인 변수명이아닌 이전 "상태" 를 받아 사용해야 합니다"
• 여기서 느낀게 상태는 단순히 데이터만 포함하는 보통 객체가 아닌것 같습니다.
• React 의 상태 선언을 하면 상태관리를 할수 있는 함수와 같이 쓸수가 있다는 겁니다.
• setState(), callback, prevState 등

함수형 컴포넌트의 State

함수형도 비슷하고 useState 라는 Hooks API 를 사용합니다.

어떤 컴포넌트든 간에 state값을 바꿀 때에는 setState 혹은 useState 를 통해 전달받은 세터 함수를 사용해야합니다.

내생각1) 상태라는것은 데이터만포함하는 일반 객체가 아닙니다. React 상태 선언을 하면 상태관리를 할수 있는 함수도 같이 쓸수가 있습니다. 이 상태관리할 수 있는 함수를 이용해야 유용하게 업데이트를 할수있습니다.(prevState, callback, setState)
내생각2) state를 사용할때 주의사항 - state 값을 바꿀어야 할 때는 setState 혹은 useState 를 통해 전달받은 세터 함수를 사용해야 합니다.
근본적으로 상태관리하는 이유가 getElement 도배하면 추적이 힘들어서인것 같습니다. 추적가능하려면 일관성이 있는 상태가 있어야 합니다. 이 상태를 일관성있는 방법으로만 업데이트가 가능합니다. 바로 상태삼수를 이용해서입니다. 이래야 상태 내부에서 추적이 가능합니다. 만약 사용자가 컴포넌트안에서 일반 값을 바꾸고 상태를 업데이트 하지 않았으면, 상태가 아닌 그냥 값이 될뿐 아무 의미가 없어집니다.

이러한 그냥 값들은 최대한 불변성을 유지해야합니다. 예를 들어 배열이나 객체를 업데이트 해야 할때는 사본을 만들고 그 사본에 값을 업데이트 한 후 그 사본의 상태를 세터함수를 통해 업데이트 해야합니다. (ex.배열에 append 가 아닌 concat을 사용하는 이유) 원본은 상태가 아니니 불변성을 유지해야합니다. 아니면 코드상으로 추적하기도 힘들고 수정된 원본은 상태 업데이트도 안됩니다(? 안해봄)
요약 : 원본은 불변성을 유지 (사본이용) -> 원본 안되는지 확인하기! 아니면 그냥 추적하기 힘들어서 그런건지.. 확실히 알고가기
상태는 순수성, 일관성 때문에 상태함수로 업데이트 (다른방식으론 업데이트가 안됨)

내생각3) 생각해보니 지금까지 배운 상태라는것은 같은 컨텍스트 안에서만 유효한것 같습니다. 자식에서 프롭통해서 전달하고 다시 받아서 상태 수정하고.. 그러면 같은 컴포넌트에서만 상태가 유효한거네.. 프롭통해서 자식으로 전달하고.. 부모에선 결과 받아서 상태 업데이트 하고.. 아니면 자식 컴포넌트에서 만 유효한 상태는 자식컴포넌트에만 있고.. 흠.. 나중에 나오는 Redux 없었으면 힘들었겠는데..?
나중에 위에글 정리하기