React 의 특장점, 렌더 라이프사이클 및 Hook(2) - 단방향 바인딩 + Hook

React Hook의 도입

Model-View 그리고 Controller

• view(HTML): 화면에 보이는 것, 화면 (렌더링) -> return해서 우리 눈에 보이게 되는 것
• Model(JS): 브라우저 메모리에 있는 데이터 (데이터) -> state
• Controller(JS): Model(값)을 변경하는 함수 (이벤트(~=데이터) 핸들러) -> `useState()`

---

단방향 바인딩의 의미: 함수형 컴포넌트 그리고 Hook

함수형 컴포넌트

바인딩 = View와 Model싱크 = "화면에 보이는 것, 화면" 과 "브라우저 메모리에 있는 데이터"를 일치시키는 것

React는 과거 클래스 컴포넌트를 기반으로 개발했었으나, 이젠 함수 컴포넌트를 지배적으로 사용

• 단방향 바인딩이라는 특성에 맞춰 Model -> view를 함수의 흐름으로 부드럽게 구분
• 메서드 기반이 아닌 로직 기반(함수 흐름 그대로, 위에서 아래로 직관적)
• 관련 없는 로직 및 보일러플레이트 코드 없음
• State + Effect(side-effect) 분리하여 API 제공 = 생산성 및 유지보수성 향상 (useEffect가 side-effect)
• Model 변경을 위해 View는 controller인 상태변경 핸들러(SetState)를 호출하여 상태를 변경한다.

 

Hook

The two rules of React Hooks
: Only call Hooks at the top level of your functional component

 

모든 함수 컴포넌트는 최상단에서 호출되어야한다.

import { useState, useEffect } from 'react';

const App = () => {
    // ✅ - correct
    const [todos, setTodos] = useState([]); //최상단에서 호출
   
    // ❌ - Breaks the call order
    if (todos) {
        const [count, setSetcount] = useState(todos.length);
    }

    // ❌ - Breaks the call order
    todos.forEach(todo => {
        useEffect(() => {
            console.log(todos);
        });
    });
   
    // ✅ - correct
    useEffect(() => {
        console.log(todos);
    });

    return (
        // ...
    );
};

export default App;