React Hook 이란?

React Hook 이란?

함수형 프로그래밍을 가능하게 해줌. 그말은 즉슨, 리액트에서 클래스를 벗어나서 함수로 사용할 수 있게 된다는 것 !

why?

기존의 리액트는, 컴포넌트 사이에서 state와 관련된 로직을 재사용하기가 어려웠다. state관리가 어려웠기때문에 항상 변경시에는 컴포넌트를 재사용해야하며, 클래스의 계층을 이리저리 왔다갔다해야만 했다. wrapper hell 이라고도 불리는, 이리저리 this 파티와 어떤클래스를 가리키는 this인지 헷갈리는, 그러한 지옥에 빠지게 되는것이다.

그래서 리액트 상태 관련 로직을 공유하기위해서, 훅을 사용하면 여러가지장점이 생긴다.

Hook을 사용하면, 생명주기 메서드를 기반으로 쪼개는데 초점을 맞추기보다는 로직에 기반을 둔 작은 함수로 컴포넌트를 나눌 수 있다.

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

그리고 그 함수인 hook은, useState 같은 내장 훅들이 있고, 이를 기반으로 사용자들이 새로운 훅을 만들어 사용하면 된다. 그래서 훅은 클래스 안에서 동작하지 않는다.

 

---

 

내장 Hook

1. State hook
2. Effect hook

 

1. State Hook

useState가 hook을 호출해 함수 component 안에 state를 추가했다. 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지된다.

기본 형태는 useState(initialValue)로, 초기 state 값을 하나 받는다. 이 초기값은 첫 번쨰 렌더링 딱 한번!만 사용된다.

또한 this.setState와 유사하지만 이전 state와 새로운 state를 합치지 않는다는 큰 장점이 있다.

function RegestPerson = () => {
    const [age, setAge] = useState(24);
    const [country, setCountry] = useState('Seoul');
}

과 같이 하나의 함수에서 여러개의 변수에서 useState를 사용할 수 있고, 이는 각각의 존재이다.

 

 

2. Effect Hook

리액트 컴포넌트 안에서 데이터를 가져오는등의 DOM(import ReactDOM from 'react-dom'패키지를 사용하여 DOM[Document Object Model]에 render()렌더링하는등의 사용)을 직접 조작하는 작업을 side effect(a.k.a. effects)라고 한다. 이 effects는 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업이다.

useEffect가 하고있는 기능은 여러가지가 있다.

• componentDidmount의 역할 : refresh
• componentDidUpdate의 역할 : onClick등의 이벤트 Update
• componentWillUnMount의 역할 : [] 빈 배열이거나 2번째 deps에 아무런 값이 없을 떄 모든 변화에 감지

기본 형태는 useEffect(function, [dependency]) : deps 배열에 있는 값들이 변할때만 활성. [] 빈 배열 일 경우에는 아무런 값이 변하지 않음. 배열 내 값이 바뀔 때 만, function component가 mount되었을 때 실행시킨다.

export default function App() {
    const sayHello = () => console.log('say hello!');
    const [number, setNumber] = useState(0);
    const [aNumber, setAnumber] = useState(0);
    useEffect(sayHello, [number]);

    return (
        <div className="App">
            <h1>hello</h1>
            <button onClick={() => setNumber(number + 1)}>{number}</button>
            <button onClick={() => setAnumber(aNumber + 1)}>{aNumber}</button>
        </div>
    );
}

이와같이 useEffect를 사용하여 refresh, eventHandler 의 역할을 구현할 수 있다.

 

 

---

 

ESLint 플러그인

npm install eslint-plugin-react-hooks --save-dev을 통해 리액트 훅의 규칙(위에서 언급한

 

✔️리액트 훅의 규칙

1. 최상위(Top Level)에서만 Hook을 호출해야한다.
2. React 함수 내에서 Hook을 호출해야한다.

을 강제하는 ESLint 플러그인을 다운로드 하여 적용할 수 있다.