1. Hook

1.1 Hook이란?

1.1.1 Hook의 정의

1.1.2 Hook의 종류

• 기본 Hook은 상태 관리와 생명주기 기능을 위해 가장 많이 사용됩니다.

• 추가 Hook은 기본 Hook을 변경하거나 특정한 경우에 필요에 따라 사용합니다.

• Hook 라이브러리에서는 여러 유용한 기능을 제공하고 있어 Custom Hook을 만들기 전에 살펴보기 좋습니다.

1.2 Hook의 특징

1.2.1 이전 버전과의 호환성

1.2.2 선택적 사용

1.2.3 Class와 호환성

Hook은 존재하는 코드와 함께 나란히 작동함으로써 점진적으로 적용할 수 있습니다. (중략) React의 개발자들은 현재 사용 중인 Class 사례를 Hook으로 교체하는 것을 염두에 두고는 있지만, 미래에도 계속 클래스 컴포넌트들을 지원할 예정입니다.

1.3 Hook의 사용 규칙

1.3.1 오직 React 함수 내에서 Hook을 호출해야 합니다.

1.3.2 최상위(at the top level)에서만 Hook을 호출해야 하고 훅을 호출하는 순서는 항상 같아야 합니다.

// 올바른 예제 
useEffect(function Form() {
    if (name !== '') {
      console.log("😀");
    }
  });

// 올바르지 않은 예제 (조건문 내에 Hook이 위치함)
if (name !== '') {
    useEffect(function Form() {
      console.log("😀");
    });
  }

npm install eslint-plugin-react-hooks --save-dev

// ESLint 설정 파일
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
  }
}

1.4 Hook을 사용하는 이유

// 클래스 컴포넌트 예시
class Example extends React.Component {
	constructor() {
		super();
		this.state = {title: "example"};
	}
	render() {
		return <p>hello, {this.state.title}</p>
	}
}

// 함수형 컴포넌트 예시
function Example () {
	let [title, setTitle] = useState("example")

	return <p>hello, {title}</p>	
}

1. Hook을 통해 컴포넌트 간 상태 로직을 재사용 할 수 있습니다.

2. Hook은 구조를 이해하기 쉽습니다.

3. Hook은 클래스 컴포넌트 없이 React를 사용 가능하게 만듭니다.

1.4.1 Hook을 통해 컴포넌트 간 상태 로직을 재사용 할 수 있습니다.

// 고차 컴포넌트로 컴포넌트 재사용하기
// 고차 컴포넌트
function withLogin(WrapperComponent) {
    return class extends React.Component {
        // 생성자 및 공통 상태 로직
        constructor() {
            state = {
                user: []
            }
        }

        componentDidMount() {
            // 비동기 작업 처리(데이터 받아오기)
        }
				
				// 내부 컴포넌트 렌더링
        render() {
            return <WrapperComponent 
                        {...this.state}
                        {...this.props} />;
        }
    };
};

// 컴포넌트 재사용
function LoginPage ({ user }) {
    // 내려받은 user 데이터 사용
}
export default withLogin(LoginPage); // --- ① 고차 컴포넌트로 감싸주기

// Custom Hook으로 컴포넌트 재사용하기
// Custom Hook
function useLogin() {
    const [user, setUser] = useState([]);

    useEffect(() => {
        // 비동기 작업 처리(데이터 받아오기)
    }, []);

    return [user];
}

// 컴포넌트 재사용
function LoginPage() {
    const [user] = useLogin();

    return (
        <>
            {user.map(({ no, email, name }, idx) => {
                <div key={no}> 
                    <p>{email}</p>
                    <strong>{name}</strong>
                </div>
            })}
        </>
    )
}

1.4.2 Hook은 구조를 이해하기 쉽습니다.

💡

컴포넌트의 생명주기

모든 컴포넌트는 여러 종류의 ‘생명주기’를 가지며, 클래스 컴포넌트에서는 ‘생명주기 메서드’를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다.

생명주기는 보통 페이지의 렌더링 준비 과정에서 시작하여 페이지를 업데이트하고 페이지에서 사라질 때 끝나게 됩니다. 이를 초기화(Initialize) - 생성(Mounting) - 업데이트(Props change, State Change) - 소멸(Unmounting)의 4단계로 표현할 수 있습니다.

컴포넌트가 생성되고 업데이트된 후 소멸되는 과정에서 생명주기 이벤트가 발생하게 되는데 해당 생명주기 단계에서 비동기적으로 사용자의 입력을 화면에 렌더링하거나 웹 서버와 통신하여 데이터를 조회하는 등의 업무를 처리할 수 있습니다.

 

→ Hook을 이용하면 함수 컴포넌트에서도 상태 관리(state)와 React의 기능(생명주기 이벤트 등)을 사용할 수 있습니다.

 

 

1.4.3 Hook은 클래스 컴포넌트 없이 React를 사용 가능하게 만듭니다.