[React] Hooks | useState() | 좋아요 숫자 올리기 | 1초마다 시간 나오게 하기 |

웹사이트를 인터렉티브하게 만들고

변화가능한 state로 만들기 위한 방법을 알아보자.

 

이 때 필요한 것이 Hooks이다. 

 

 

 

 

index.js에서 

다음과 같이 숫자와 버튼을 만든다. 

 

 

 

여기서 + 버튼을 한 번 누를 때마다 숫자가 올라가도록 하려면 어떻게 해야할까?

 

 

 

0으로 시작하는 변수를 하나 만들고,

 

 

1 씩 추가가 되는 함수를 만들어 보자. 

 

그 전에 우선 버튼 클릭시 함수가 잘 작동하는지 보기 위해

콘솔에 "I got clicked"가 프린트 되도록 해본다. 

 

여러번 눌렀더니 횟수가 옆에 표시가 된다. 

함수는 잘 작동하는 것을 볼 수 있다. 

 

 

 

이제는 1씩 증가하는 expression을 작성해 본다. ( increase by 1 )

 

 

console.log(count)를 해서 보면 숫자가 증가하는 것을 볼 수 있다. 

하지만 유저 인터페이스에는 아무런 변화가 없다. 

 

 

 

ReactDOM이 html element들을  re-render해줘야 화면에서도 숫자가 올라간다. 

그래서 함수가 작동될 때 element들이

다시 렌더되게 하기위해 render 코드 전체를 함수 안에 집어 넣어준다.  

 

 

이제 숫자가 잘 올라가는 것을 볼 수있다. 

 

 

 

하지만 코드의 중복이 생기고 보기 깔끔하지가 않다. 

여기서 Hooks를 사용한다. 

 

---

 

useState Hooks 사용하기 

 

Hooks는 functional component 안에서만 사용할 수 있다. 

그래서 index.js에서는 <App />만 남기고 

<App />으로 방금 작성한 코드들을 옮긴다. 

 

 

 

index.js

기본 뼈대만 남긴다.

index.js

 

App.jsx

코드를 옮겨 App.js 함수에 정리한다. 

App.jsx에서는 ReactDOM을 없애고 위 코드로 정리가 되었다. 

 

 

 

여기서 useState() 함수를 사용할 것이다. 

 

이 함수가 적용하면 자동으로 랜더가 되어 업데이트가 된다.

useState Hook 이라고 부르며 쓸 때는 useState()로 나타낸다. 

 

useState()는 시작 벨류과 하나의 함수로 구성된다. 

리액트 매소드에 들어있는 함수이다. 

 

 

useState()로

시작점을 0으로 설정하고 

함수로는 하나씩 늘어가는 것을 설정할 수 있다. 

그러면 Hook으로 자동 랜더가 된다. 

 

useState()를 사용하고 싶을 때 

React.useState()로 불러 사용해도 되지만 보통은 

React import 할 때 useState()도 같이 불러 사용한다. 

 

 

useState()를 state 변수에 담아 내용이 뭐가 있는지 한 번보자. 

 

일단은 에러가 나는 count++;는 커멘트 아웃 시키고,

{count}는 0으로 하드코드 해서 집어넣어 주어 에러를 없앴다.

 

그리고서 콘솔로그에 useState() 내용이 나오게 하였다.

 

 

array 안에 첫 번째 아이템은 initial state가 나오고,

두 번째 아이템은 함수가 나오는 것을 알수있다. 

console

 

 

useState() 함수 안에 0을 집어 넣으면 

 

 

콘솔에서 Initial State는 0으로 나오는 것을 볼 수 있다.

 

 

첫 번째 나오는 initial state만 콘솔에 나오게 하려면 

state에서 첫 번째 인덱스만 뽑으면 된다.  

콘솔에서 잘 나오는 것을 볼 수있다. 

 

 

 

h1 태그 안에도 첫 번째 인덱스를 넣어준다. 

 

 

 

화면에도 잘 나온다

화면 디자인을 바꿔보았다.

 

 

혹시 useState() 안 숫자를 바꾸면 

 

 

화면에서도 그대로 바뀌는 것을 볼 수 있다.

 

 

하지만 {state[0]}으로 코드를 짜서 시작 숫자를 정하는 건 

나중에 디버깅 할 때 state[0]가 뭐였는지 파악하기가 어렵다.

Destructuring 코드로 바꾸는게 좋다. 

 

 

---

 

 

Destructuring 

 

복잡한 구조를 destructure 한다. 

 

 

flatuicolors를 가서 

https://flatuicolors.com/

 

 

설정을 rgb로 바꾼후 

 

 

색상 하나를 선택해서 복사한다. 

 

 

 

rgb (red, green, blue) 의 숫자를 array로 순서대로 붙여준다. 

 

 

 

여기서 rgb array에서 녹색만 빼오고 싶다고 했을 때 

rgb[1] 로 빼온다면 나쁜 코드이다. 

rgb[1]가 뭘 의미하는 지 알기 어렵기 때문이다. 

 

 

그래서 destructure를 해야하는데 

array안에 각각의 벨류에 따라 변수명을 자세히 적어준다.

변수 이름을 [ ]에 담아 red, green, blue로 지정하고 

나중에 그 중에 필요한 것을 인덱스 번호가 아니라 

이름으로 불러온다. 

 

 

---

 

같은 방식으로 

state 변수는 value와 함수의 array로 되어있다. 

첫 번째 value만 이름을 적어주고

<p> 태그에 넣어 화면에 나오게 해보자.

 

 

여기서 자동 랜더링이 되게끔

어떻게 useState Hook을 사용할 수 있을까? 

 

 

여기서 destructuring array에 함수 이름을 setCount로 정하고,

increase() 함수에 이 setCount()가 호출 되도록 한다. 

setCount()가 호출되면 10을 리턴하도록 해보았다. 

onClick으로 마우스 클릭시 increase 함수가 호출되도록 하였다. 

 

 

그리고는 좋아요 버튼을 클릭하였더니 10이 나왔다. 

계속 눌러도 그냥 10이다. 

숫자가 올라가지는 않는다. 

 

 

이제 버튼을 누를 때마다 숫자가 올라가보록 해보자

일단 useState() 안 시작 숫자를 0으로 설정하고 

setCount() 함수 안에 count + 1 수식을 넣어준다. 

 

 

버튼 클릭한 만큼 숫자가 올라가는 것을 볼 수 있다. 

 

 

 

버튼을 하나를 더 만들어 숫자가 하나씩 내려가도록 해보자. 

 

숫자가 잘 내려가는 것을 볼 수 있다. 

 

 

다이나믹한 웹사이트를 만들기 위해서는 업데이트된 state가 필요하고

이 state는 useState hook에서 온다. 

함수로는 useState()로 표현한다. 

 

 

 

---

버튼 눌렀을 때 현재 시간이 나오게 하기 

 

refresh 버튼을 누를 때마다 현재 시간이 나오도록 해보자. 

 

 

 

내가 작성한 코드 

 

 

강사님이 작성한 코드 

둘 다 잘되긴 하는데.. 

 

 

---

 

 

 

자동으로 현재 시간 나오기 

 

 

매 초마다 시간이 바뀐다