[React] Hooks이란? Hooks 종류

Hooks란?

React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리

hook은 class 안에서는 동작하지 않고, class 없이 react 사용이 가능하게 해준다.

Hooks의 종류?

1) useState

현재 state 값을 업데이트하는 함수를 반환
원형

const [state, setState] = useState(initialState);

2) useEffect

리액트 컴포넌트가 렌더링 될 때마다, 즉 DOM이 렌더링 된 이후에 작업을 실행할 수 있도록 명시함
-> 컴포넌트 렌더링 - 화면 업데이트 - useEffect 실행
=> 생명주기의 메소드 기능을 수행

useEffect(콜백함수, 의존성배열)

첫 번째 인자: 콜백함수
-> 컴포넌트가 마운트되거나 업데이트 될 때마다 실행되는 함수, 콜백 함수 내부에서 원하는 작업 수행 가능
두 번째 인자: 의존성 배열
-> 배열에 포함된 값은 콜백 함수가 실행되는 조건을 지정, 즉 배열에 포함된 값들 중 하나라도 변경되면 콜백 함수 실행

여기서 콜백함수란?

간단하게 말해 다른 함수가 실행을 끝낸 뒤 실행되는 함수를 말한다.
그리고, 함수를 만들 때, parameter를 함수로 받아서 쓸 수 있는데 그 함수는 callback!

3) useContext

context => 일반적인 리액트에서 데이터는 props를 통해서 부모에서 자식에게 전달함
어플리케이션 안의 여러 컴포넌트들에게 props를 전달해줘야 하는 경우 context 이용