React Hooks란 무엇인가?
React Hooks는 class없이 state를 사용할 수 있는 기능이다.
React Hooks가 필요한 이유?
Class Component로 사용되어온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해 개발되었다.
원래 React는 주로 Class Component를 사용하고 React Hooks는 Functional Component를 사용한다.
React Component
-
Class Component : 더 많은 기능 제공, 더 긴 코드 양, 더 복잡한 코드, 더딘 성능
-
Functional Component : 더 적은 기능 제공, 짧은 코드 양, 더 심플한 코드, 더 빠른 성능
리액트의 생명주기
리액트의 생명주기를 함수형 컴포넌트에서는 사용을 못했기에 클래스형 컴포넌트를 써왔지만, 이제는 함수형 컴포넌트에서도 생명주기를 사용할 수 있기에 데이터를 가져오고 컴포넌트를 시작하자마자 API를 호출하고 많은 부분을 할 수 있게 되었다.
Hooks 장점
-
일반 클래스 컴포넌트에서 생명주기를 사용하는 부분
-
React Hooks를 이용한 생명주기 이용
두 코드를 보면 React Hooks를 이용했을 때 훨씬 간결해진 것을 알 수 있다.
그 이유는, Class Component에서 생명주기를 이용할 때 componentDidMount와 ComponentDIdUpdate와 나중에 언마운트를 하는것 각각 다르게 처리를 해주지만,
React Hooks를 사용할 때는 useEffect 안에서 다 처리가 가능하기 때문이다.
즉, 생명주기를 위해 Hooks에서는 componentDidMount, componentDidUpadte, componentWillUnmount 모두를 useEffect를 이용해 처리해준다.
그리고, HOC 컴포넌트를 Custom React Hooks로 대체하여 많은 Wrapper 컴포넌트를 줄일 수 있다.
HOC(Higher Order Component)란?
화면에서 재사용 가능한 로직만을 분리하여 component로 만들고, 재사용 불가능한 UI와 같은 다른 부분들은 parameter로 받아서 처리하는 방법이다.(컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수)
이런식으로 A 페이지와 B 페이지에서 유저 리스트를 가져오는 부분의 소스가 같다. 이렇게 모든 페이지에서 유저 리스트를 가져오기 위해서 똑같은 소스를 넣어준다면 너무 많은 중복이 된다.
이를 해결하기 위해, 중복이 되는 부분은 따로 HOC 컴포넌트를 만들어준다.
유저 리스트를 가져오는 공통적인 부분은 HOC 컴포넌트에 넣어주고 그 HOC 컴포넌트로 각각의 컴포넌트를 감싸주면 모든 컴포넌트에 중복하지 않아도 된다. Hooks가 나오기 전에는 이 방법이 베스트였으나, 너무나 많은 Wrapper 컴포넌트가 생길수 있다는 문제점이 있다.
이런식으로 말이다.
위와 같이 Wrapper 문제는 어떻게 해결하느냐? -> Custom React Hooks
왼쪽의 HOC를 사용하는 방법을, 오른쪽의 useAuth()라는 Custom React Hooks를 만들어주어 fetchUsers를 이용해 users를 가져온 다음에, return으로 유저를 보내준다. 그리고 Apage()에서 useAuth()라는 Hooks를 가져온 다음에 users를 가져와 Apage에서 바로 사용할 수 있게 된다.
Hooks에서 state를 업데이트 해주기 위하여
state를 정의해줄 때,
const [ name, setName ] = useState(""); 위와 같이 정의한다.
여기서 setter인 setName을 이용해 state를 업데이트 할 수 있다.
정리하자면, HOC 대신에 Custom Hooks를 이용해 컴포넌트를 만들어 처리하여 Wrapper가 많아지는 일을 방지할 수 있다.
