React 만들어보기 (8) - hook에 대해 알아보자

Hook은 class를 작성하지 않고도 state와 다른 React 기능을 사용하게 해준다.

이것은 기존의  React는 Component가 상태를 가지려면 Class Component만이 instance로 상태를 가질 수 있었다. 

즉, Function Component는 함수이기 때문에 호출될 때마다 모든 값이 초기 상태로 리셋되므로 상태를 유지할 수 없없다.

 

hook은 두 가지의 규칙을 반드시 따라야 한다.(안 지키면 에러 뿅뿅)

 

1. 최상위에서만 Hook을 호출해야 한다.

반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출할 수 없다.

왜냐하면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 hook이 호출되는 것이 보장하여야 즉 렌더링 순서가 일정해야
React가 이를 추적할 수 있기에

 

그렇다면 어떻게 추적할까?

우선 우리가 작성한 코드에서 다음의 코드가 존재한다

redner(<App />, document.querySelector('#root'));

여기서 App은 createElement가 만들어놓은 객체임을 우리는 이전 포스트들에서 배웠다.

이를 console로 찍어보면

createElement로 만든 단일 객체를 확인할 수 있다.

 

이 부분에서 렌더링 순서가 일정하다에 대한

 

의미는 위의 사진처럼 Virtual DOM이라 불리우는 createElement로 만든 단일 객체를 가지고 React가 DOM을 만드는데,

이 단일 객체는 React의 render 메소드에 전달하는 객체이기에

이 객체는 매번 만들어 질 때마다 똑같은 형태를 구성한다는 것을 알 수 있다(모양은 달라질 수 있다)

부모와 자식의 관계 구성은 동일.

Component를 함수 호출 결과로 만들기 때문에 ...

2. 오직 React 함수 내에서 Hook을 호출해야 한다.

hook을 일반적인 javascript 함수에서 호출할 수 없다

대신 React 함수 컴포넌트, Custom hook에서 hook을 호출할 수 있다.

 

그렇다면 직접 useState hook을 만들어보자!

 

우리가 사용할 때 useState는 다음과 같이 선언한다.

const [initailValue, setInitailValue] = useState();
        변경값         설정값              초기값

 

이를 위해서는 ..

저장할 hooks 배열이 필요할 것이다

const hooks = [];
let currentComponentIndex = 0;

그리고.. 

function useState(initValue) {
	let position = currentComponent - 1 //중요 
    if (!hooks[position]){
        hooks[position] = initValue;
    }

    const modifier = nextValue => {
        hooks[position] = nextValue;
    }
    return [ hooks[position], modifier]
}

 

첫번째 if문을 통해 초기값을 설정하고,

 

modifer을 통해 두번째 인자값인 setValue에 대한 부분이다.

 

핵심은 ..

함수 Component가 호출된 다음에 hook이 함수 안에서 hook이 호출되면서 index가 일치되는 것이다

index 위치값 기반 외부 상태에 값을 저장하기에 

따라서 hook의 호출 순서가 중요한 것이다.