React Hook(State)

리액트 사용할 때, 함수형 컴포넌트를 사용한다면 '리액트 훅'을 사용한다.

리액트 훅(React Hook)이란?

=> 함수형 컴포넌트에서 React state와 생명주기(lifecycle) 기능을 “연동(hook into)“할 수 있게 해주는 함수.

=> React 버전 16.8(2018년도 추가)부터 새로 추가됨.

리액트 훅(React Hook) 특징은?

=> Hook은 class형 컴포넌트 안에서는 동작하지 않음.

=> (선택적 사용) 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook 사용 가능.

==> 당장 Hook이 필요 없다면, Hook을 사용할 필요 없음.

=> 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것이 가능.

=> useState 같은 내장 Hook 제공.

=> Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있음.

✌️ Hook 사용 규칙

• **최상위(at the top level)**에서만 Hook 호출. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.
• React 함수 컴포넌트 내에서만 Hook 호출. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다.

---

📌 State Hook(상태 관리)

import React, { useState } from 'react';

function Example() {
// 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
const [count, setCount] = useState(0);

return null;
}

=> useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공. ==>이벤트 핸들러나 다른 곳에서 호출할 수 있다.

=> class의 this.setState와 거의 유사하지만, 이전 state와 새로운 state를 합치지 않는다는 차이점이 있다.

=> useState는 인자로 초기 state 값을 하나 받는다. ==> 초기값은 첫 번째 렌더링에만 딱 한번 사용.

=> 하나의 컴포넌트 내에서 State Hook을 여러 개 사용할 수도 있다.

=> React는 매번 렌더링할 때 useState가 사용된 순서대로 실행.

동적인 값 끼얹기, useState

컴포넌트에서 동적인 값을 상태(state)라고 부릅니다.

리액트에 useState 라는 함수가 있는데요, 이것을 사용하면 컴포넌트에서 상태를 관리 할 수 있습니다.

(https://react.vlpt.us/basic/07-useState.html

---

클래스 컴포넌트 vs 함수 컴포넌트(state hook 사용)

state 가져오기

클래스 컴포넌트는 count를 보여주기 위해 this.state.count를 사용.

<p>You clicked {this.state.count} times</p>

반면 함수 컴포넌트는 count를 직접 사용.

<p>You clicked {count} times</p>

state 갱신하기

클래스 컴포넌트는 count를 갱신하기 위해 this.setState()를 호출.

<button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button>

반면 함수 컴포넌트는 setCount와 count 변수를 가지고 있으므로 this를 호출하지 않아도 됨.

  <button onClick={() => setCount(count + 1)}>    Click me
  </button>

 

useState 활용 요약

 1:  import React, { useState } from 'react';
 2:
 3:  function Example() {
 4:    const [count, setCount] = useState(0);
 5:
 6:    return (
 7:      <div>
 8:        <p>You clicked {count} times</p>
 9:        <button onClick={() => setCount(count + 1)}>
10:         Click me
11:        </button>
12:      </div>13:    );
14:  }

• 첫 번째 줄: useState Hook을 React에서 가져옵니다.
• 네 번째 줄: useState Hook을 이용하면 state 변수와 해당 state를 갱신할 수 있는 함수가 만들어집니다. 또한, useState의 인자의 값으로 0을 넘겨주면 count 값을 0으로 초기화할 수 있습니다.
• 아홉 번째 줄: 사용자가 버튼 클릭을 하면 setCount 함수를 호출하여 state 변수를 갱신합니다. React는 새로운 count 변수를 Example 컴포넌트에 넘기며 해당 컴포넌트를 리렌더링합니다.

 

(예시)

import React, { useState } from 'react';

const [평균, setAvg] = useState(avg); // avg가 산출되어 있음. (avg 계산부분 생략)

<div className='Result'>평균 평점 {평균}

{/* reset 버튼 누르면 평점 평균 0.0으로 만들기 */}
<button className='ResetButton'
     onClick={() => {
        setAvg(parseInt(0).toFixed(1));
     }}
>

---

(참고)

https://ko.reactjs.org/docs/hooks-state.html

Using the State Hook – React

https://youtu.be/fE4t2Ovgp-0

---