[React] About Hook

goal

흠 .. 매우 두서없이 정리.. 다시 정리 필요

Hook

What is Hook?

• Hook는 Class없이 React 기능들을 사용하는 방법
• 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수
• Hook은 class 안에서는 동작하지 않는다. 대신 class 없이 React를 사용할 수 있게 해준다.
• React는 useState 같은 내장 Hook를 제공한다. 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것도 가능하다.

useState

• useState는 인자로 초기 state 값을 하나 받는다.
• this.state와는 달리 setState Hook의 state는 객체일 필요가 없다. 이 초기값은 첫 번째 렌더링에만 딱 한번 사용된다.

example

import React, {Component, useState, useEffect} from "react";

const App = () => {
  // hook? 은 특별한 함수다 / useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해준다.
  // 언제 사용? 함수 컴포넌트를 사용하다가, state를 추가하고 싶을 때! (기존에는 클래스 컴포넌트로 바꿔야 했음)
  // React는 Hook이 호출되는 순서에 의존한다

  // 함수 컴포넌트는 this를 가질 수 없기 때문에 this.state를 할당하거나 읽을 수 없다.
  // 대신, useState Hook을 직접 컴포넌트에 호출 -> useState()

  // useState를 호출하는 것의 의미는? -> 클래스컴포넌트의 this.state의 기능과 같음 (일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다.)
    // 1. state변수를 선언할 수 있다. (아래에서는 todos)
    // 2. 
    // (2개의 다른 변수를 저장하기를 원한다면 useState()를 두 번 호출해야 한다)

  // useState의 인자로 넘겨주어야 하는 것은?
    // state의(todos의) 초기값 (꼭 객체일 필요는 없으며, 숫자, 문자 타입도 가질 수 있다)

  // useState가 반환하는 것은? -> 클래스컴포넌트의 this.setState와 유사
    // "state변수" + 해당 변수를 갱신할 수 있는 "함수"(메소드) = 이 두 가지 쌍
  const [todos, setTodos] = useState(["hook, redux 공부하기"]) 
  // todos에는 
    // 1. setTodos의 첫번째 인자가 할당되어 있거나,
    // 2. 이후에 setCount의 결과값이 할당된다. 
  
  // state 가져오기
    // {this.state.todos} -> {todos}
  
  // state 갱신하기 (no need this)
    // this.setState( {count: this.state.count + 1} ) -> setTodos(todos + "운동") 

  
  //? useEffect의 역할은?
    // 리액트에게 컴포넌트가 "렌더링 이후에" 어떤 일을 수행해야하는 지를 말한다.
    // 리액트는 우리가 넘긴 함수를 기억했다가 dom 업데이트를 수행하 이후에 불러낸다.
    // 아래의 경우, effect를 통해 문서 타이틀을 지정하지만, 이외에도 데이터 가져오기, 명령형 api를 불러내는 일 등을 할 수 있다.
  
  //? useEffect를 컴포넌트 안에서 불러내는 이유?
    // useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 count state 변수 (or 그 어떤 prop에도)에 접근할 수 있게 된다.
  
  //? useEffect는 렌더링 이후에 매번 수행될까?
    // yes -> 기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행된다.
    // 마운팅, 업데이트의 개념을 잠시 잊고, just effect를 렌더링 이후에 발생하는 것으로 생각하자.
    // 리액트는 effect가 수행되는 시점에, 이미! dom이 업데이트되었음을 보증한다.  
  
  useEffect( () => {
    document.title = `You clicked ${count} times`;
  } );
  
  return (
    <>
      <h1>TODO APP</h1>
      <form action="">
        <input type="text" name = ""/>
        <button onCliek = { () => {setTodos(todos)} }>할일 추가</button>
      </form>
      <List todos = {todos}/>
    </>
  )
}

hook?

• hook는 특별한 함수다
• useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해준다.

언제 사용?

• 함수 컴포넌트를 사용하다가, state를 추가하고 싶을 때! (기존에는 클래스 컴포넌트로 바꿔야 했음)
• React는 Hook이 호출되는 순서에 의존한
• 함수 컴포넌트는 this를 가질 수 없기 때문에 this.state를 할당하거나 읽을 수 없다.
• 대신, useState Hook을 직접 컴포넌트에 호출 -> useState()

useState를 호출하는 것의 의미는?

• 클래스 컴포넌트의 this.state의 기능과 같음
  (일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다.)

1. state변수를 선언할 수 있다. (아래에서는 todos)
2. (2개의 다른 변수를 저장하기를 원한다면 useState()를 두 번 호출해야 한다

useState의 인자로 넘겨주어야 하는 것은?

• state의(todos의) 초기값 (꼭 객체일 필요는 없으며, 숫자, 문자 타입도 가질 수 있다

useState가 반환하는 것은?

• 클래스컴포넌트의 this.setState와 유사
• "state변수" + 해당 변수를 갱신할 수 있는 "함수"(메소드) = 이 두 가지 쌍
  const [todos, setTodos] = useState(["hook 공부하기"])