리액트 훅 React Hook

아직 익숙하지 않은 관계로 cmd창의 명령문까지도 기입하고자한다.

 

프로젝트 새로 생성

 

 

폴더닫기 

폴더열기

 

---

자 그럼 실습을 해보자!

 

클래스 컴포넌트 

import React, { Component } from "react";

class App extends Component {
  state = {
    count:0
  };

  countUpdate(n){
    this.setState({count:n});
  }

  render(){
    const {count} = this.state; // const나 let으로 변수 설정

    return(
      <div>
      <h3>class 컴포넌트 사용</h3>
        number : {count}&nbsp;
        <button onClick={() => {
          this.countUpdate(count + 1);
        }}>증가 1</button>
        <hr/>
        <h3>function 컴포넌트 사용1</h3>
        <HookTest/>
        <hr/>
        <h3>function 컴포넌트 사용2</h3>
        <HookTest2></HookTest2>
      </div>
    );
  }
}

 

 

같은 것을 함수형 컴포넌트로 바꿔보자

import React, { useState } from "react";
import HookTest from "./mydir/HookTest";
import HookTest2 from "./mydir/HookTest2";

const App = () => {
  const [count, setCount] = useState(0);

  const countUpdate = (n) => { //이벤트핸들러(처리) 함수
    setCount(n);
  };

  return (
    <div>
      number : {count}&nbsp;
      <button onClick={() => countUpdate(count + 1)}>증가 1</button>
    </div>
  );
};


export default App;

 

 

버튼을 누르면 number : 뒤의 숫자가 증가한다.

이 안에서만 작동하며, 새로고침 버튼이 깜빡거리지 않는것을 확인 할 수 있다. 

 

 

---

 

React Hook 리액트 훅 

등장배경

리액트 초기에는 일반적으로 함수형 컴포넌트(Functional Component)를 사용하였으나, 값의 상태를 관리(state) 혹은 Lice Cycle Method(생명 주기=컴포넌트가 생성되고 사라지는 과정이 존재 할 때)를 사용하여야 할 때에만 클래스형 컴포넌트(Class Component)를 사용하였다.

 

클래스형 컴포넌트(Class Component)의 대표적인 단점.

 

1. 코드의 구성이 어렵고 Component의 재사용성이 떨어진다.
2. 컴파일 단계에서 코드 최적화를 어렵게 한다.
3. 최신 기술의 적용이 효과적이지 않다.

 

  이러한 클래스형 컴포넌트(Class Component)의 단점을 보안하여, 함수형 컴포넌트(Functional Component)를 사용 할 수 있도록 등장한 것이 바로 React Hook(리액트 훅)이다.

 

 

React Hook이란?

함수형 컴포넌트(Functional Component)에서 사용되는 몇가지 기술들을 일컫는다.

리액트 훅은 함수형 컴포넌트(Functional Component)가 클래스형 컴포넌트(Class Component)의기능을 사용 할 수 있도록 해주며 대표적인 예로는 useState, useEffect 등이 존재한다.

 

 

대표적인 React Hook

1. useState

useState는 Component에서 상태(state)값을 추가 할 때 사용되며, 클래스형 컴포넌트(Class Component)에서만 사용 가능하던 State를 함수형 컴포넌트(Functional Component)에서도 사용 가능 하도록 한 대표적인 기능이다.

선언은 const [변수명, 상태를 업데이트 할 함수명] = useState(초기값) 을 통해 할 수 있으며, useState로 선언된 변수는 상태(state)가 변할 때 마다 페이지를 리렌더링 시키게 된다. 이 때 (상태를 업데이트 할 함수명)은 비동기로 처리 되는데, 이는 함수가 호출 될 때 마다 화면을 다시 렌더링 하기 때문에 성능이슈가 발생 할 수 있기 때문이다.

 

2. useEffect

useEffect는 화면이 렌더링 될 때마다, 특정 작업을 실행 할 수 있도록 하는 Hook이다. 이를 통해 함수형 컴포넌트(Functional Component)에서 Side Effect를 사용 할 수 있게 됐을 뿐만 아니라, 클래스형 컴포넌트(Class Component)의 Life Cycle Method에서 사용되는 componentDidMount(최초 렌더링) 와 componentDidUpdate(렌더링 후 업데이트)를 합친 형태로, 페이지가 렌더링 될 때 변화된 값으로 인해 바뀌어야 할 화면의 데이터들을 처리해준다.

선언은 useEffect( () => {익명함수}, []) 이며 매개변수는 보이는것과 같이 익명함수와 빈 배열이다. 뒤의 빈 배열의 종류에 따라 렌더링의 횟수를 조절 할 수 있다.
1. [] = 최초 렌더링(마운트) 될 때 한번만 실행
2. [상태값1, 상태값 2..] = 선언한 상태값들이 업데이트 될 때만 실행
3. 생략 = 리렌더링시마다 반드시 실행

 

3. useReducer

useReducer는 이 전 상태(state)와 Action을 결합하여, 새로운 상태값(state)를 만든다. 일반적으로 React에서 상태관리를 위해 사용하는 Hook은 useState이지만, 좀 더 복잡한 상태 관리가 필요한 경우 reducer를 사용 할 수 있다.

선언은 const [변수명, dispatch] = useReducer[reducer, 초기값, 초기함수) 이다.
1. dispatch = reducer 함수를 실행시키며, action 객체(=어떠한 행동인지를 나타내는 type 속성과 관련 데이터로 구성)를 인자로 받으며, action 객체를 통해 컴포넌트 내에서 상태 값(state)의 업데이트를 일으킨다.
2. reducer = dispatch를 통해 실행되며, 컴포넌트 외부에서 상태 값(state) 를 업데이트 한다. 함수의 인자로는 state와 action을 받으며 이를 통해 새로운 state를 반환한다.

 

 

---

useState

 

HookTest.js

import React, {useState} from 'react';

const HookTest = () => {
    const [count, setCount] = useState(0);

    return(
        <div>
        number : {count} &nbsp; 
        <button onClick={() => setCount(count +1)}>증가2</button>
        </div>
    );
};

export default HookTest;

 

상단에 {useState}가 import된것을 확인할수 있다.

 

형식 

const/let [state, setState] = useState(initialState);

                데이터, 데이터변경함수      초기값

 

useState, useEffect

HookTest2.js

import React, {useState, useEffect} from 'react';


export default function HookTest2(){
    const [item, setItem] = useState(0); //동적변수. 데이터수정시 함수를통해 수정.
    //const a = 1; //정적변수. 변수의 값을 직접 수정.

    const incrementItem = () => setItem(item +1); // 아이템증가함수
    const decrementItem = () => setItem(item -1); // 아이템감소함수

    useEffect(() => {
        let a = 1;
        console.log(a);  // 변수 a 사용
    }, []);

    return(
            <div>
            number: {item}&nbsp;
            <button onClick={incrementItem}>증가</button>&nbsp;
            <button onClick={decrementItem}>감소</button>
            </div>
    );
}

 

앞선 HookTest2.js에서는 하단에 export를 해주엇다. 

 

같지만 다른 표현법으로 적어보았다.

 

 

const [item, setItem] = useState(0);

동적변수. 데이터수정시 함수를통해 수정.

 

const a = 1;

정적변수. 변수의 값을 직접 수정.

 

 

 

---

https://well-made-codestory.tistory.com/44

[ReactJS] React Hook(리액트 훅) 이란?