Section4 / Unit3 : Component와 Hook

Hook

함수 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메서드

→ React Hook은 함수 컴포넌트가 상태를 조작하고 및 최적화 기능을 사용할 수 있게끔 하는 메서드

class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다.

 

똑같이 작동하는 카운팅 기능을 작성한다고 가정해보자

 

Class Component

  

    
    
    
    
  
class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0
        }
        this.handleIncrease = this.handleIncrease.bind(this);
    }

    handleIncrease = () => {
        this.setState({
            counter: this.state.counter + 1
        })
    }

    render(){
       return (
            <div>
                <p>You clicked {this.state.counter} times</p>
                <button onClick={this.handleIncrease}>
                    Click me
                </button>
            </div>
       ) 
    }
}

Function Component

  

    
    
    
    
  
function Counter () {
    const [counter, setCounter] = useState(0);

    const handleIncrease = () => {
        setCounter(counter + 1)
    }

    return (
        <div>
            <p>You clicked {counter} times</p>
            <button onClick={handleIncrease}>
                Click me
            </button>
        </div>
    )
}

클래스 컴포넌트는

복잡해질수록 이해하기 어려웠고,

컴포넌트 사이에서 상태 로직을 재사용하기 어렵다.

문법(ex. this)을 정확히 알지 못하면 동작 방식 자체를 정확히 이해하기 어려웠다.

 

함수 컴포넌트는

클래스형 컴포넌트에 비해 훨씬 더 직관적이고, 보기 쉽다.

다만 이전까지의 함수 컴포넌트는 클래스 컴포넌트와는 다르게 

상태 값을 사용하거나 최적화할 수 있는 기능들이 조금 미진했는데

보완하기 위해 → Hook 도입!

 

Hook 사용 규칙

1. 리액트 함수의 최상위에서만 호출해야 합니다.
   • 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 동작하지 않음 → 에러 발생!
   • 컴포넌트 안에는 useState나 useEffect 같은 Hook들이 여러 번 사용될 수 있는데
     React는 이 Hook을 호출되는 순서대로 저장한다.
   • 그런데 조건문, 반복문 안에서 Hook을 호출하게 되면 호출되는 순서대로 저장을 하기 어려워지고,
     결국 예기치 못한 버그를 초래할 수 있다.
2. 오직 리액트 함수 내에서만 사용되어야 합니다.
   • 리액트 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 JavaScript 함수 안에서 호출해선 안 된다.