Hook

Hook은 알고 있는 React 컨셉을 대체하지 않습니다. 대신에, Hook은 props, state, context, refs, 그리고 lifecycle와 같은 React 개념에 좀 더 직관적인 API를 제공합
니다. 또한 Hook은 이 개념들을 엮기 위해 새로운 강력한 방법을 제공합니다.

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 권장하지 않습니다. 대신 새로 작성하는 컴포넌트부터는 Hook을 이용하시면 됩니다.)

React는 useState 같은 내장 Hook을 몇 가지 제공합니다. 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것도 가능합니다

첨부 : https://ko.reactjs.org/docs/hooks-intro.html

훅은 (useState, useEffect) 라고 이해하면 된다.

Props vs State

props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

While props and state both hold information relating to the component, they are used differently and should be kept separate.

props contains information set by the parent component (although defaults can be set) and should not be changed.

state contains “private” information for the component to initialise, change, and use on it’s own.

... props are a way of passing data from parent to child. ... State is reserved only for interactivity, that is, data that changes over time.

Props : 매개변수용 데이터
State : 컴포넌트 안에서 운용되는 데이터 -> State를 매개변수로써 사용할 수 있다.

State Hook - useState

state는 컴포넌트가 다시 렌더링 되어도 그대로 유지될 것입니다. useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공합니다. 우리는 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있습니다

useState 의 렌더링과 함수형 업데이트

https://velog.io/@tjdgus0528/React-Native-5x048oii

Effect Hook - useEffect

React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업을 이전에도 종종 해보셨을 것입니다. 우리는 이런 모든 동작을 “side effects”(또는 짧게 “effects”)라고 합니다. 왜냐하면 이것은 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업이기 때문입니다.

Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다.

useEffect를 사용하면, React는 DOM을 바꾼 뒤에 “effect” 함수를 실행할 것입니다. Effects는 컴포넌트 안에 선언되어있기 때문에 props와 state에 접근할 수 있습니다. 기본적으로 React는 매 렌더링 이후에 effects를 실행합니다. 첫 번째 렌더링도 포함해서요.

기본 사용법

• Mount : 화면에 첫 렌더링

• Update : 다시 렌더링

• Unmount : 화면에서 사라짐

  위와 같은 상황이 발생할 때 어떠한 함수를 호출하고 싶으면 useEffect()를 사용한다. 즉, state의 값이 변할때도 useEffect가 호출된다 (update).nb

// 모든 경우에 함수 실행
useEffect(()=>{

})

// 배열에 state(value)를 넣어서 원하는 state에 대해서만 useEffect 효과 발생, 이외에는 초기 mount시에만 발생
useEffect(()=>{
}, [value])


// Clean Up - useEffect에서 사용된 여러가지 상황을 정리해야한다.
useEffect(()=>{
  
  	// 종료 후 하고싶은 행위 작성
	return ()=>{
      
    }
})

Tip