React의 온고지신 정신 : Hook

 

 

React로 여기저기 구글링을 하다보면 Hook이라는 단어가 많이 보인다.

Hook이 뭐지?? 레프트 라이트 훅에 그 훅인가? 후크선장의 갈고리 그 훅인가?

자주 등장아니까 중요한거 같은데 정확히 개념 정립이 안돼 있어서 이번에 정리해본다.

 

Hook 소개 및 기본 개념

◎ Hook이란 무엇인가?

Hook은 React 16.8 버전에서 소개된 기술로, 함수형 컴포넌트에서 상태(state) 및 다른 React 기능을 사용할 수 있게 해주는 JavaScript 함수임. 이전에는 상태 관리 및 부수 효과를 위해서 Class 컴포넌트를 사용했지만, Hook은 함수형 컴포넌트에서도 이러한 작업을 수행할 수 있게 해준다.

 

◎ 왜 Hook이 도입되었나?

코드를 더 간단하고 읽기 쉽게 만들어주며, 상태 관리와 사이드 이펙트 처리를 쉽게 할 수 있게 돕는다. 이전에 Class 컴포넌트에서는 상태와 생명주기 메서드를 활용했지만, 이에 대한 복잡성과 컴포넌트 간 로직의 재사용 문제 등이 있었음.

 

◎ Class 컴포넌트와의 차이점은 무엇인가?

Class는 약간 구문법 느낌. 함수형 컴포넌트가 간결하고 깔끔하다.

Hook은 함수형 컴포넌트에서 상태와 React 기능을 사용 가능하게 하며, 코드를 간결하게 작성하여 로직을 모듈화 및 재사용이 가능하게 한다.

//함수형 컴포넌트
const FunctionalComponent = (props) => {
  // 상태와 생명주기 메서드 없음
  return <div>{props.text}</div>;
};

//클래스형 컴포넌트
class ClassComponent extends React.Component {
  // 상태와 생명주기 메서드 포함
  render() {
    return <div>{this.props.text}</div>;
  }};

useState와 useEffect 활용

◎ useState Hook을 사용하여 상태를 어떻게 관리하는지?

함수형 컴포넌트에서 상태를 다루는데 사용된다. 상태란 컴포넌트의 정보나 데이터를 나타내며, useState를 통해 상태를 생성하고 업데이트할 수 있다 예를 들어, 사용자 클릭 수를 저장하는 "count" 상태를 만들 수 있다.

const [count, setCount] = useState(0);

 

◎ useEffect Hook을 이용하여 부수 효과를 처리하는 방법은?

부수 효과란 컴포넌트가 렌더링될 때 실행되는 작업으로, 예를 들어 데이터 가져오기, 외부 이벤트 처리, 상태 업데이트 후의 동작을 정의할 때 사용된다. 이렇게 useEffect를 사용하면 컴포넌트 생명주기와 관련된 작업을 처리할 수 있음.

unction MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(result => setData(result));
    return () => {/* 정리 작업 */};
  }, [data]);

  return <div>{data}</div>;

 

정리!

리엑트가 업데이트 되면서 클래스 컴포넌트가 불편했다.

그래서 함수형 컴포넌트로 사용됐는데 클래스 컴포넌트의 라이프사이클 매서드가 필요했다.

그래서 Hook을 도입하여 클래스 컴포넌트의 이점을 가져온 것!

바로 옛것을 배우고 새로이 발전하는 '온고지신' 정신 이었던 것...!