1. input과 증가버튼을 만들어준 다음 state를 선언해주고(useState로 구현) input에 value를 input으로 묶어주고 onChange를 함수(input에 값을 입력하면 그 값이 작성한 value값으로 변경됨.)로 묶어주고 밑에는 그 값을 뿌려준다({input}).
2. 변수 count를 0으로 선언하고 증가버튼에 onClick을 달아서 함수(count값이 증가,console.log)를 선언해주고 밑에는 그 값을 뿌려준다.

입력한 값은 잘 렌더링 되지만 버튼을 누른 증가 값은 렌더링 되지 않는다.

콘솔에는 나온다.

여기서 알수 있는것.

1. 리엑트는 화면을 렌더링할지를 state의 변화에 따라 결정한다.

2. 단순 변수는 무시한다.

3. state가 원시데이터일땐 상관없지만 객체나 배열일 경우 불변성을 지켜주는게 중요하다.

ex)

위와 같이 버튼을 누르면 짱구에서 철수로 바뀌게 만들었지만...

결과는 콘솔에는 바뀌지만 렌더링은 되지 않는다..
그래서 불변성을 지켜주는게 중요하다!!

해결방법.

obj의 name을 철수로 변경 후 새로운 객체 obj2를 만들어 obj를 복사하는데 스프레드 문법을 이용해 전혀 새로운 주소값을 할당해준다.(불변성을 지켜준다)그리고 변경 값을 obj2로 할당해준다.

결과.

렌더링이 잘 되는걸 확인할수 있다.