[React/실전형 리액트 Hooks/노마드코더] React Hooks

 

강의출처

 

리액트 Hooks 사용법

https://www.youtube.com/watch?v=yS-BU6eYUDE

 

 

리액트 Hooks 사용 예시
https://youtu.be/sZDvByH2mNU

 

 

리액트 Hook 전체 플레이리스트
https://www.youtube.com/playlist?list=PL7jH19IHhOLPDyuhF_fLCt_pKvtuLI5qX

React Hooks

 

 

 

 

---

 

React Hooks

 

(장점)

앱을 만들 때 React Hooks을 사용하면 class component, did mount, render 등을 하지 않을 수 있어

함수형 프로그래밍(functional programming)의 스타일로 코딩을 진행할 수 있다.

그리고 React Hooks을 이용하면 코드의 가독성과 유지보수성을 높일 수 있다.

 

 

(배경)

React Hooks은 recompose라는 라이브러리에서 시작되었다.

recompose는 함수형 프로그래밍이고 hook과 매우 유사하다.

그리고 recompose 라이브러리는 react 팀에 흡수되었다.

 

즉, recompose와 react의 결합이 바로 React Hooks이라고 할 수 있다.

 

 

 

아래 예제를 보면서 차이를 알아보자.

 

class App extends Component {
	state = {
    	count: 0
    };
    modify = n => {
    	this.setState({
        	count: n;
        });
    };
    render() {
    	const { count } = this.state;
        return (
        	<>
            	<div>{count}</div>
                <button>onClick={() => this.modify(count+1)}>Increment</button>;
            </>
		);
	}
}

 

 

위 코드는 count 값을 증가시키는 함수를 만들고 button을 click 했을 때 적용되도록 하는 코드이다.

코드에서 확인할 수 있듯이 class component, state 등이 필요하고

이를 정의하거나 패스하는 등의 코드를 작성해야 하기 때문에 간단하지 않다.

 

 

그러나 위 코드를 React Hooks을 이용하면 함수형 프로그래밍으로 바꿀 수 있을 뿐만 아니라

this를 사용하지 않을 수 있고 클래스를 벗어나 함수에 머물 수도 있다.

 

 

const App = () => {
	const [count, setCount] = useState(0);
    return (
    	<>
        	{count}
            <button onClick{() => setCount(count+1)}>Increment</button>
        </>
    )
}

 

React Hooks을 이용해 코드를 수정해 보았다.

훨씬 코드가 간결해져 가독성이 좋아졌다.

 

 

구체적으로 어디 코드가 바뀌었는지 살펴보자.

 

 

먼저, useState는 2개를 준다.

하나는 value, 두 번째는 이를 변경하는 방법이다.

 

코드를 보면 이 작업을 array로 처리하고 있다.

왜냐하면, useState가 반환하는 것이 array이기 때문이다.

 

 

즉, useState가 리액트 state 매니지먼트의 밑으로 들어가 훅을 당기는 것이다.

따라서 class Component에서는 일일이 사용자가 직접 작업을 한 방식보다 가독성이 좋아졌다고 할 수 있다.

 

 

 

 

 

다음 포스팅에서는 useState에 대해 더 알아보도록 하겠다.