리액트 - React Hooks

 

● React Hooks란 무엇인가?

 React Hooks는 ReactConf 2018에서 발표된, class없이 state를 사용할 수 있는 새로운 기능.

 

 

 

● React Hooks가 필요한 이유?

항상 기술은 그 전에 것의 불편함이나 문제점을 해결하기 위해서 더욱 발전한다.

그와 같이 React Hooks도 주로 Class Component로 사용되어 온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해서 개발되었다.

 

 

 

원래 React는 주로 Class Component를 사용하고

React Hooks는 Functional Component를 사용하기 때문에 서로 비교해 봄

 

 

 

 

 

- 리액트의 생명주기

- Mounting : 컴포넌트 시작할 때

- Updating : 업데이트할 때

- Unmounting : 다시 시작할 때

 

 

이전에는 중요한 리액트의 생명주기를 함수형 컴포넌트에서는 사용 못했기 때문에 함수형 컴포넌트가 더 간결하고 빠르더라도 클래스형 컴포넌트를 써왔다.

 

하지만 React 16.8 Hooks 업데이트로 인해 변경되어

함수형 컴포넌트에서도 생명주기를 사용할 수 있기에 데이터를 가져오고 컴포넌트 시작하자마자 API도 호출하고 많은 부분을 할 수 있게 되었다.

 

생명주기를 위해서 Hooks는 componentDidMount, componentDidUpdate, componentWillUnmount 이 모두를 useEffect를 이용해서 처리한다.

 

Hooks로 인해 어떻게 가능한지 보여주는 예시 ) 

클래스 / Hooks

 

* Hooks에서 state를 업데이트 해주려면 

 state를 정의해줄 때 const [ name, setName ] = useState( "" ); 이런식으로 하는데  여기서 setName을 이용해서 state를 업데이트 시켜줄 수 있다.

 

 

 

 

Hooks로 인한 또 다른 이점?

 

왼쪽 코드와 오른쪽 코드를 보면 선명하게 코드가 간결해진 것을 볼 수 있다.

그 이유는 Class Component에서는 생명주기를 이용할 때 componentDidMount와 ComponentDidUpdate 그리고 componentWillUnmount 이렇게 다르게 처리를 해주지만

리액트 훅을 사용할 때는 userEffect 안에서 다 처리를 해줄 수 있기 때문이다.

 

( react Hooks을 이용한 코드에서 

패치 리스트로 리스트를 가져와서 id가 변경되면 fetchLists 부분을 한번 더 실행시켜줘서 구현해주는 것이다.

즉, 왼쪽의 componentDidUpdate부분을 오른쪽의 [id] 부분에 넣어서 한번 더 실행시키는 것)

 

 

 

 

 

또 다른 Hooks로 인한 장점은

HOC 컴포넌트를 Custom Reack Hooks로 대체해서 너무나 많은 Wrapper 컴포넌트를 줄일 수 있다.

 

- HOC (Higher Order Component) 란?

화면에서 재사용 가능한 로직만을 분리해서 component로 만들고, 재사용 불가능한 UI와 같은 다른 부분들은 parameter로 받아서 처리하는 방법.

즉, 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 린턴하는 함수.

 

위의 코드를 보면 A 페이지와 B 페이지가 있는데 두 페이지에서 같은 소스를 사용하고 있는 부분이 있는데 그 부분은 유저 리스트를 가져오는 부분이다. 어떠한 페이지에서든 유저 리스트를 가져와야 하는 애플리케이션을 만드려고 할 때 모든 페이지에서 유저 리스트를 가져오기 위해서 똑같은 소스를 넣어준다면 너무 많은 중복이 되기 때문에 중복이 되는 부분은 따로 HOC 컴포넌트를 만들어 사용한다.

 

 

유저 리스트를 가져오는 공통적인 부분은 HOC 컴포넌트에 넣어주고 그 HOC 컴포넌트로 각각의 컴포넌트를 감싸주면 모든 컴포넌트에 따로 인증을 위한 부분은 넣어주지 않아도 된다.

Hooks가 나오기 전에는 이 방법이 추천되는 방법이었지만 여기서도 문제가 있다. 그 문제는 바로 너무나 많은 Wrapper 컴포넌트가 생길 수 있다는 것인데 Wrapper가 너무 많아지면 데이터 흐름을 파악하기가 힘들어진다.

 

wrapper 많은 예시

 

AuthHOC - HOC인증을 위한 HOC

ThemeHOC - 테마를 위한 HOC

LanguageHOC - 언어를 위한 HOC

 

 

이러한 문제들은 Custom React Hooks를 이용해서 해결할 수 있다.

왼쪽을 오른쪽으로 가능

 

 

즉, React Hooks에서는 HOC 대신에 따로 Custom Hooks를 이용해서 컴포넌트를 만들어서 처리를 해주기 때문에 Wrapper가 많아지는 일을 방지할 수 있다.

 

 

바벨로 클래스컴포넌트와 함수형 컴포넌트를 바꿔줄때 사이즈의 양이 차이나는 것을 볼 수 있다.

(https://babeljis.io/)

 

바벨 : 자바스크립트는 크롬, 파이어폭스, 사파리, 익스플로러 등 다양한 브라우저에서 사용되는데, 각 브라우저마다 자바스크립트 엔진이 다르다. 이러한 자바스크립트 엔진은 자바스크립트 코드를 실행하기 위해 자바스크립트 코드를 기계어로 변환하는데, 이 변환 과정에서 각 브라우저마다 다른 방식으로 변환한다. 이러한 이유로 자바스크립트 코드를 작성할 때는 크로스 브라우징 이슈를 고려해야 한다. 바벨은 이러한 크로스 브라우징 이슈를 해결하기 위해 사용한다.

 

 

위의 코드들을 바벨을 사용해서 변환했을 경우 아래 코드처럼 나오는데 클래스형과 함수형의 코드가 많이 차이나는 것을 확인 할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고  : https://wonbeenna.github.io/blog/javaScript/babel