State
: 리액트 컴포넌트의 상태
- 리액트 컴포넌트의 변경 가능한 데이터
- 개발자가 직접 정의
- 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함
- 그렇지 않은 값은 컴포넌트의 인스턴스 필드에 저장
- javascript 객체
- 직접 수정하면 안됨!! ➡️ setState 함수 사용!!
++ 현재 컴포넌트의 state 정의
++
➡️ prop, state 값이 변경되면 새로운 리턴값을 만들어 UI 바꿈
💡 prop: 컴포넌트 사용하는 외부자를 위한 데이터
💡 state: 컴포넌트 만드는 내부자를 위한 데이터
Lifecycle
: 리액트 컴포넌트의 생명주기
- 출생 (mount)
: 컴포넌트가 생성되는 시점
- constructor가 실행: 컴포넌트에 state 정의
- 컴포넌트 렌더링 -> componentDidMount 함수 호출
- 인생 (Update)
: 업데이트 되는 과정 (렌더링)
- 컴포넌트의 props 변경
- setState() 함수에 의해 state 변경
- forceUpdate() 함수에 의해 컴포넌트 다시 렌더링
- 렌더링 이후에 componentDidUpdate 함수 호출
- 사망 (Unmount)
: 상위 컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않을 때
- componentWillUnmount 함수 호출
⭐️컴포넌트는 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고 업데이트 되다가 사라짐 !!
