[React] Hooks

React Hook(훅) 이란?

https://react.dev/reference/react/hooks

Built-in React Hooks – React

• React 16.8 버전에서 새로 추가된 기능으로, 기존의 Class형 Component을 사용하면서 발생하는 문제점들을 해결하기 위해 도입됨

 

 

 

Component에 대하여

• 리액트에서는 UI를 "컴포넌트"라는 단위를 이용하여 구분함.
• 컴포넌트 관리의 핵심은 state와 생명주기를 다루는 것에 있음.
• Class형 컴포넌트와 함수형 컴포넌트로 나뉨

 

 

 

Class Component

[정상우님의 블로그] 에서 코드의 예시를 가져왔습니다.

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lookups: null
    };
    // this를 사용하기 위해서 아래와 같이 바인드메서드 사용
    this.fetchLookups = this.fetchLookups.bind(this);
  }

  // -------------------- 생명주기 관리 부분 ---------------------------
  componentDidMount() {
    this.fetchLookups(this.props.pathName);
  }
  componentDidUpdate(prevProps) {
    // pathName prop이 변경 되었을 때
    if (prevProps.pathName !== this.props.pathName) {
      this.fetchLookups(this.props.pathName);
    }
  }
  // -------------------------------------------------------------------
    
  // API 호출용 함수
  fetchLookups(pathName) {
    fetchApi({ url: `/lookup?url=${pathName}` }).then((lookups) => {
  	  // lookups 데이터가 반환 되면 state업데이트
      this.setState({
        lookups
      });
    });
  }
  
  // 렌더 함수
  render() {
    if (!this.state.lookups) return null;
    return <pre>{JSON.stringify(this.state.lookups)}</pre>;
  }
}

• Class형 컴포넌트에서는 state를 선언하고 관리할 수 있으며, life cycle과 관련된 각종 메서드들이 제공됨.
• Class형 컴포넌트를 사용하던 시기에도 함수형 컴포넌트는 존재했지만, state나 life cycle이 존재하지 않는 순수한 UI 컴포넌트를 위해 사용되었음.
• 문제점
  • 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기가 어려움(고차 컴포넌트(HOC), render props와 같은 방법을 사용해야함)
  • 생명주기 함수 내부에 비즈니스 로직을 확장해야하는 경우, 따로 분리하기가 힘들며 테스트 하기도 쉽지 않음
  • state, props, 컴포넌트 내의 메서드 호출... 등을 위해 Javascript의 this에 대한 이해가 필요함.

 

 

 

Hook의 등장

[정상우님의 블로그]에서 코드의 예시를 가져왔습니다.

const HomeWithHook = ({ pathName }) => {
  const [lookups, updateLookups] = useState(null);
  
  // 생명주기 관리 부분
  useEffect(() => {
    if (pathName) {
      fetchApi({ url: `/lookup?url=${pathName}` }).then((lookups) => {
        updateLookups(lookups);
      });
    }
    // 컴포넌트가 생성 되었을 때 처음 실행되며, 이후 pathname이 변경되었을 때에도 실행
  }, [pathName]);
  if (!lookups) return null;
  return <pre>{JSON.stringify(lookups)}</pre>;
};

• Hook의 등장으로 state와 life cycle을 관리하기 편리해졌다