[React] 메시지 출력 (state & Lifecycle)

state로 일정 알려주는 웹 페이지 제작

•   notification 컴포넌트는 state에 아무런 값을 가지고 있지 않음
•  생성자에서는 앞으로 사용할 데이터를 state에 넣어서 초기화
•  클래스 컴포넌트에서 state를 업데이트 하려면 반드시 setState 함수 사용

• 키는 리액트 엘리먼트를 구분하기 위한 고유의 값
• 맵 함수를 사용할 때에는 필수적으로 들어가야 함

❤️ state

• 리액트 Component의 상태를 의미
• 리액트 Component의 데이터라는 의미에 더 가까움
• 리액트 Component의 변경 가능한 데이터
• 미리 정해진 것이 아니라 리액트 Component를 개발하는 각 개발자가 직접 정의하여 사용
• 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함하여야 함
• state가 변경될 경우 Component가 재렌더링되기 때문에 렌더링과 데이터 흐름에 관련 없는 값을 포함하면 불필요한경우에 Component가 다시 렌더링되어 성능을 저하시킬 수 있기 때문임
• 렌더링과 데이터 흐름에 관련 있는 값만 스테이트에 포함하도록 해야 하며 그렇지 않은 값은 Component의 인스턴스 필드로 정의하면 됨
• JavaScript의 객체
• 직접 수정 할 수 없음

❤️ Lifecycle

• 리액트 Component 생명주기를 의미
• 각 과정 하단의 초록색으로 표시된 부분은 생명주기에 따라 호출되는 클래스 컴포넌트의 함수
• Mounting 과정에서 컴포넌트의 컨스트럭터, 즉 생성자 실행
• 생성자에서는 컴포넌트의 state를 정의
• 컴포넌트가 렌더링되며 이후에 컴포넌트 디드 마운트 함수 호출
• Updating 과정에서는 컴포넌트의 Props가 변경되거나 setState함수 호출에 의해 state가 변결되거나 falseUpdate라는 강제 업데이트 함수 호출로 인해 컴포넌트가 다시 렌더링
• 렌더링 이후에 componentDid 업데이트 함수가 호출
• Unmounting 과정은 상위 컴포넌트가 현재 컴포넌트를 더 이상 화면에 표시하지 않게 될 때 이루어짐
• Unmount 직전에 componentWillUnmount 함수가 호출
• Component가 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고 업데이트 되다가 사라지