이 글은 <Do it! 리액트 프로그래밍 정석>을 참고하여 작성하였습니다.정리 느낌으로 작성하였으므로 내용이 정확하지 않고 구체적이지 않을 수 있습니다.
프로퍼티의 특징: 컴포넌트 내부에서 값을 바꿀 수 없다.
값을 바꾸려면 state를 사용한다.
state: 값을 저장하거나 변경할 수 있느 객체. 주로 이벤트에 사용
SetTimeout() 함수로 4초 뒤 state에 저장되어 있는 값을 변경
생성자 안에 bind,setTimeout() 실행 후,render() 실행
(setTimeout()은 비동기라 4초 대기 후 실행됨)
* 생성자(constructor) : 인스턴스 만들어주는 특별한 메서드. 메서드 중에 제일 먼저 실행
생성자를 생성하지 않으면 클래스에서 자동으로 만들어짐
constructor() {}
state 사용할 때 주의할 점
1.생성자(constructor)에서 반드시 초기화해야 한다. 초깃값이 없으면 내부 함수에서 state에 접근 불가.빈 객체라도 넣자
2.state값을 변경할 때는 setState() 함수(상태 관리 함수)를 반드시 사용해야 한다.왜냐면 render()로 화면 그려주는 시점은 리액트 엔진이 정하기 때문이다.즉,state값을 직접 변경해도 render() 함수는 새로 호출되지 않는다.setState()써야 자동으로 render()가 호출됨 -> 변경된 state값 출력
3.setState() 함수는 비동기로 처리되며, setState() 코드 이후로 연결된 함수들의 실행이 완료된 시점에 화면 동기화 과정을 거친다.
클래스 인스턴스 변수와 forceUpdate() 함수로 state 관리하기
화면 새로 그리고 싶으면 강제 출력인 forceUpdate() 함수 사용
이 방법은 리액트 성능에 제약이 있으므로 매번 새롭게 화면을 출력해야 되는 경우가 아니면 권장 x.
