기존 클래스형 컴포넌트의 문제점

클래스형 컴포넌트는 라이프 사이클 메서드를 통해 컴포넌트를 관리한다. 그러나 컴포넌트의 선언부터 this와 render의 사용,,, 코드가 늘어지고 복잡해지는 경향이 있다. 또 여러 인스턴스들을 생성하는 과정에서 성능이 저하되는 문제가 발생하기도 한다.

이러한 문제점을 해결하기 위해 함수형 컴포넌트를 위한 Hook이 도입되었다.

Hook은 리액트의 함수형 컴포넌트에서 상태값과 생명주기에 대한 접근과 관리를 가능하게 해준다. 함수형 컴포넌트는 한번 호출되고 나면 메모리에서 사라지는 문제가 발생하는데, Hook을 통해 이러한 문제점을 해결해주고, class형 컴포넌트를 대체할 수 있게 해주었다

Hook 사용 규칙

• Hook은 컴포넌트 최상위 레벨에서만 사용 가능하다.
• 일반 js 함수가 아닌 리액트 함수에서만 사용 가능하다. (Custom Hook은 예외)

useState

변수(상태)를 관리해주는 훅으로 해당 변수(상태값)이 변경될 때마다 화면을 렌더링해준다.

• const [state, setState]=useState(’초기값’) 으로 생성한다
• setState는 일종의 함수로 setState()안에 변경하고 싶은 state 값을 넣어주면 된다
• 배열 혹은 객체의 경우에는 새로운 객체를 생성하여 setState에 넣어주어야 한다. 배열 객체의 경우에는 새로운 값을 인지해야 변경 가능해져서……….
• 렌더링이 필요하지 않은 값들이면 state에 담아줄 필요가 없음

useEffect

특정 경우에 특정한 함수가 발생하도록 하는 훅이다. 이를 통해 함수 컴포넌트에서도 side effect의 사용이 가능해진다. side effect란 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리해야하는 부수적인 효과들이다.