React ~0419 State 이해하기

마지막 작성일로부터 5일간의 부재 이건 미친 짓

---

---

그렇다 난 5일 동안 몇 번의 자살행위를 한 걸까 푸하하 달력을 또 보면 이것저것 한건 많은데 분명..?

코태기(코딩 권태기) 아직 많이 사랑하지도 않는데 왜 이러지 암튼 오래간만에 리액트를 잡고 차차 했다.

당연히 전에 했던 내용은 기억이 안 나서 왼쪽엔 티스토리 블로그, 오른쪽에는 아톰편집기를 켜고 차차 복습했다.

차차 따라갔고 오늘 새로 배운 내용을 정리하고자 다시 돌아왔다.

 

오늘 배운건 State 물론 오늘 배운 방법으로 쭉 할 건 아니고 State의 운용방식을 이해하고자

이 방법을 썼다 하니 

정리하고 복습해보자

 

표면적인 목표는 맨 처음에 바닐라 js를 이용해 만든 코드에서는 버튼을 클릭하면 화면에 몇 번 눌렀는지 표시가 되었다.지금은 콘솔 창에는 알려주지만 우리가 보는 화면에는 새로 갱신되고 있지가 않다 이에 대한 기능을 만들어 볼 것이다.새로운 코드와 저번 코드를 비교하면서 차차 이해해보자

Container안에 있는 여러가지 태그들이 색상이 바뀌지가 않는데 이유는 모르겠다 작동은 잘 되니 뭐 가만두자 저 친구들도 다 뜻이 있겠지 ◠ ͜ ◠

저번에 Title과 Button을 각각 함수로 만들어 이벤트 리스너를 통해 콘솔 창에 메세지를 출력하는 h3, button태그를 추가했다면

 

1. 이 두 함수를 없애고 Container라는 함수를 만들어 div를 만들고 안에 h3, button태그를 만들었다.

2. h3와 버튼 안에 각각 클릭수를 나타내는 counter, 클릭하면 counter의 값을 늘려주도록 이벤트리스너를 넣었다.

3. 버튼을 몇 번 버튼을 눌렀는지 카운트를 세어줄 역할의 counter변수를 let으로, 초기값은 0으로 선언했다.

4. 버튼을 누르면(onClick)한다면 count를 하나씩, 하나씩 늘려주는 함수 countUp을 제작했다 밑에 있는 render함수는 잠시 대기

5. render라는 함수를 만들었는데 저번 시간에 쭉 봐온 ReactDOM을통해 렌더링 하는 함수이다.  여러 번 쓰여서 함수로 만들었다.

 

우리가 처음에 렌더링 해서 버튼과 h3태그를 화면에 보여준 후 우리가 버튼을 클릭해서 countup을 통해 counter의 값이 하나 증가

다만, 이 증가한 counter을 새로 갱신해서 h3태그해서 보여주지 못하고 있다. 이때 우리는 render를 사용해서 새로 갱신 가능

 

6. countUp함수 안에 마지막 줄에 render()가 있는 이유가 위 때문이다. 개수를 늘려준 counter를 새로 갱신시키고 우리에게 보여주는 것이다.

왼쪽 밑에 요소창을 집중해서 보자

이 코드를 작성하고 js를 썼을 때 보다 더 간결하게 나타내는 점과 또 다른 점이 콘솔 창을 보고 버튼을 클릭할 때마다 

span태그 전체가 새로 갱신되는 바닐라 js와 달리 리액트에서 딱 counter만 새로 갱신이 되었다.

 

대단한 건 알겠지만 조리 있게 정리해서 딱 말할 수가 없어 찾아보니

 

js의 경우  노드 정보가 바뀔 때마다 노드 트리를 처음부터 다시 생성하는 거에 반해 리액트의 경우 가상 돔을 써서 딱 필요한 부분만을 리 렌더링 하므로 노드 트리의 최적화가 된다고 한다.

 

그렇다. 느낌은 오지만 어렵다 그 흐지부지? 알듯 말 듯? 아무튼 계속 가보자 나태 지옥을 서서히 벗어날 때가 되었다.

머리 쓰니 배고프네 고기 먹어야지