[React] Hooks

Hooks란

함수 컴포넌트 안에서 State와, 생명주기 기능을 사용 할 수 있게 해주는 함수라고 생각하면 된다.

• 함수 컴포넌트 안에서 사용되는 것이기 때문에 class 안에서는 동작하지 않는다.
• class 컴포넌트와 함수형 컴포넌트는 섞어서 사용해도 되기 때문에 hooks를 사용하기 위해서 굳이 이전 class형 컴포넌트를 모두 함수형으로 바꾸지 않아도 된다.(hooks를 사용하는 컴포넌트만 함수형 컴포넌트로 사용해도 무관)

Hooks를 사용하는 이유

• hooks를 사용하지 않으면 복잡하게 엮여있는 컴포넌트들을 이해하기 어렵다
  • componentDidMount 같은 함수도 컴포넌트당 하나만 사용 할 수 있기 때문에 모든 함수들이 하나의 CDM에 묶어 있다.

  • ex)1

    componenetDidMount () {
      functionName1()
      functionName2()
    }

    ex)2

    useEffect(() => {
      functionName1()
    }, [])
    useEffect(() => {
      functionName2()
    }, [])

    이렇게 분리해주면 연관된 컴포넌트와 함수를 연결 할 수 있어서 가독성이 좋아짐

hooks 사용법

1. 함수형 컴포넌트 안에서만 사용이 가능하다

   function ComponentName () {
   const [state, setState] = useState(initialState);
   useEffect(() => {
   setState(바꿀값)
   },[여기 쓴 값이 바뀌면 useEffect가 실행])

   함수형 컴포넌트 안에서만 hooks를 호출 할 수 있다.

   ---

   useState 를 사용하는 방법은

   1. const로 선언하고,
   2. 배열 안에 바뀌는 값을 저장할곳을 배열 0번에, (state)
   3. state 를 변경해줄 함수를 배열 1번에, (setState)
      넣어준다.
   4. useState 함수를 써주고, 뒤에 인자부분에 초기값(initialState)
      을 넣어준다

   ---

   useEffect 를 사용하는 방법은

   1. useEffect 함수안에 state를 변경해줄 함수를 작성(useState 배열 1번에 들어간것)
   2. state를 변경해줄 함수 인자에 변경되는 값 입력
   3. 배열 안에 useEffect를 실행하는 state 값 입력(state 값 변경 될때마다 useEffect 실행)