State
상태
-> 리액트 Component의 상태(데이터->변경가능한 데이터)
State는 개발자가 정의한다.
렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함
왜냐면
state가 변경될 경우 재 렌더링을 해야하는데
데이터 흐름에 불필요한 값이 포함된 경우
불필요한 컴포넌트 렌더링 -> 시스템성능 저하로 연결될 수 있음.
State는 JavaScript 객체이다.
예제 코드
<모든 Class에는 Constructor라는 이름의 생성자 함수가 포함됨>
이렇게 만든 state는 직접 수정 할 수 없다.(할 수 있긴 한데, 하면안된다...)
위처럼 스테이트를 직접수정하면 안된다
아래처럼 setState를 통해 대치해주어야함,,
맘대로 수정하면 개발자가 의도한대로 작동하지 않을 수 있음
Life Cycle (리액트컴포넌트)
생명주기
출생단계에서
constructor 단계 state를 정의하게 됨
인생 ->render 다양한 update를 하게됨 New Props, setState, forceupdate etc..
사망 : unmount
상위 컴포넌트에서 해당 컴포넌트를 더이상 호출하지 않을때
이때 언마운트 직전에 componentWillUnmount 함수가 호출됨
요약:
(실습) state 사용하기
notifications라는 빈 배열을 생성자에 넣었음
이처럼 생성자에서는 앞으로 사용할 데이터를 state에 넣어서 초기화한다.
setState 함수를 통한 대치(업데이트)(변경x)
개념을 확실히 잡고가자 (컴포넌트 생애주기)
UDR Branding Manager