02/17 [React] Hook

[ React Hook]

Hook의 규칙
  https://ko.reactjs.org/docs/hooks-rules.html
  Hook은 React 16.8에 새로 추가된 기능이다. 
  Hook은 클래스를 작성하지 않고도 State와 컴포넌트의 Life Cycle의 관리가 가능해졌다
  Hook은 JavaScript 함수이다. 하지만 Hook을 사용할 때는 두 가지 규칙을 준수해야 한다
  
  첫번째. 최상위(at the Top Level)에서만 Hook을 호출해야 한다
               반복문, 조건문 혹은 중첩된 함수(함수 안에 함수) 내에서 Hook을 호출하면 안된다
  두번째. 오직 React 함수(함수형 컴포넌트)내에서 Hook을 호출해야 한다. 클래스에서는 사용불가이다
                Hook을 일반적인 JavaScript 함수에서 호출하면 안 된다
                단, Custom Hook에서 Hook을 호출할 수 있다.

 

한마디로....

  *** hook함수는  컴포넌트인 함수 안에서만 호출이 가능하고, 반복문이나 조건문 등에서는 호출할 수 없다.

         단, 함수형 컴포넌트가 아니라도 custom hook(컴포넌트는 아닌데 나만의 hook을 만들 수 있는 함수 임)

         에서는 호출 할 수 있다.

 

[useState Hook]

컴포넌트의 상태정보값.  즉, state를 생성(사용)하고 업데이트할 수 있게 해주는 함수로
두 개의 값을 담은 배열을 반환한다.

 동일한 컴포넌트를 재사용하더라도 각 컴포넌트의 state는 독립적이다.
*** 만약 UI에서 상태를 변경시켜야 한다면 하나의 컴포넌트로 분리하자.***
동일한 컴포넌트라도 컴포넌트마다 상태를 별도로 유지하기 위해서다.

 

const [state,setState] = useState(초기값 혹은 콜백함수);

state:컴포턴트의 현재 상태값  ,(얘는 객체? 변수고)
setState:컴포넌트의 상태를 변.경.할. 수. 있.는. 함수.   (얘는 함수다....)
   변경시에는 setState(대체값 혹은 콜백함수);
   콜백함수는 컴포넌트 성능 최적화시에 유리하다

콜백함수를 인자로 전달하면 해당 콜백함수는 마운트될 때(컴포넌트가  DOM에 붇을 때 )에만 한 번 호출된다.

state변경시 함수형 컴포넌트가 다시 호출되서 리렌더링 된다

 

소스코드는 추후에 ...