[React] Hooks(1)

1-1. Hooks란?

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“ 할 수 있게 해주는 함수입니다.

• Hook은 class 안에서는 동작하지 않습니다.
• 대신 class 없이 React를 사용할 수 있게 해주는 것입니다.

1-2. 왜 사용하나요?

• 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵습니다. (HOC, render props)
• 복잡한 컴포넌트들은 이해하기 어렵습니다. (관심사의 분리, Lifecycle API)
• Class은 사람과 기계를 혼동시킵니다.
  • 그러나, Class 컴포넌트가 이러한 최적화를 더 느린 경로로 되돌리는 의도하지 않은 패턴을 장려할 수 있다는 것을 발견했습니다. Class는 최근 사용되는 도구에도 많은 문제를 일으킵니다. 예를 들어 Class는 잘 축소되지 않고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만듭니다. 우리는 코드가 최적화 가능한 경로에서 유지될 가능성이 더 높은 API를 제공하고 싶습니다. (공식 문서)
  • "클래스는 많은 기능을 한 번에 묶는데는 성공을 했지만, 그 결과 각각을 따로 쓰기 힘들게 만들어버렸습니다. 클래스는 State와 Action(메서드)의 조합이라고 이야기를 했습니다. State와 Action을 각각 따로 분리해서 생각을 할 수는 없습니다."

:: 클래스에서 클로저(Closure)로!

• 리액트에 존재하는 컴포넌트 종류?
  • 그간 왜 클래스 컴포넌트를 써왔을까?
    • state, 라이프 사이클 때문에
    • 마치 생명체처럼 클래스로 부터 한번 인스턴스가 생성이 되고 나면 독립적으로 움직일 수 있어서
    • 반면 함수는 한번 호출되고 메모리 상에서 사라짐 ⇒ state, 라이프 사이클 불가능
  • 클래스 사용해보니 해결하기 힘든 여러가지 문제 존재
• 함수 컴포넌트에 날개를 달아줘!
  • 2018년에 hooks 공개!
  • 그러면 어떻게 state, 라이프사이클을 구현했나?
  • 클로저! (함수 안의 함수!)

1-3. Hook 사용 규칙

규칙
1: 최상위(at the top level)에서만 Hook을 호출해야 합니다. 그리고 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.
규칙 2 : React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다

2. State Hook

const [state, setState] = useState(initialState);

상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. 최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같습니다.

setState 함수는 state를 갱신할 때 사용합니다. 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록합니다.

// 클래스형 컴포넌트
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

import React, { useState } from 'react';
// 함수 컴포넌트
function Example() {
  // 새로운 state 변수를 선언하고, count라 부르겠습니다.
  const [count, setCount] = useState(0);
	const [isModalActive, setIsModalActive] = useState(false);
	// 안 좋은 예시
	const [state, setState] = useState({
		color: "red",
		isActive: true,
		name: "jt".
		password: "sdaf"
	})
    return (
	<div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
	<button onClick={() => setIsModalActive(!isModalActive)}>modal btn</button>
    </div>
    );
    	}