항해99 | 4주차 WIL회고

항해99 | 4주차 회고

안녕하세요 TriplexLab 입니다.
이번주 회고 주제는 라이프사이클(클래스형 vs 함수형), react hooks 입니다.

👉라이프사이클

생명주기 메서드, 즉 리액트의

라이프사이클

데이터가 실행되고 움직이는 순서같은 거라고 생각하면 된다.

👉클래스방식

위 그림을 보면, 클래스 방식으로 리액트 컴포넌트를 만들 때 그 컴포넌트의 여러 메소드 들이 어떤 순서로 호출되는가를 보여준다.

시작점에서 시작하여 componentWillMount() 라는 메소드는 리액트가 그 컴포넌트에 구현되어있는 메소드를 호출하는 것으로 약속되어있다. 어떤 컴포넌트가 생성되기 전에 처리해야 할 일이 있다면, componentWillMount()라는 메소드를 구현하는것을 통해서 (컴포넌트가 우리가 필요로 하는 코드를 갖다놓는 과정을 통해서) 컴포넌트가 생성되기 직전에, 즉 랜더가 호출되기 전에 해야될 일을 갖다놓을 수 있다.
이후, Render()메소드가 호출되면 마운트가 된다. 즉 화면에 그려진다.
그 다음에 해야될 일이 있다면, componentDidMount() 라고 하는 메소드를 컴포넌트가 생성된 후에 해야 될 일을 처리할 수 있게 할 수 있다.

👉코드로 설명

라이프사이클

라이프사이클

componentWillMount(렌더 되기 전에 실행 될 것) -> render (화면에 그려줌)-> componentDidMount(렌더 다음에 처리애야 할 일)

컴포넌트가 한번 만들어지고 난 다음에는 역시 render() 메소드가 호출 될 것인데, 렌더가 호출될 필요가 있냐 없냐를 결정하는 shouldComponentUpdate가 있고,
componentWillUpdate 라는 애도 있고, componentDidUpdate 들이 있다.

컴포넌트 상태가 바뀔때

라이프사이클

라이프사이클

👉함수형

함수형

함수형

useEffect 라는 React Hook을 사용하여 렌더가 완전히 끝난 다음, useEffect 의 인자로 전달 된 함수가 랜더가 끝난 다음에 호출되도록 약속되어있다.

useEffect 라고 하는 hook 은 웹페이지가 처음으로 랜더 끝낚ㅆ을 때 실행되고, 컴포넌트가 업데이트 될 때마다 실행되는것으로 보아 이게 클래스형에서 componentDidMount, componentDidUpdate 와 똑같은 효과를 내는것이 useEffect라는 것을 알 수 있다.

useEffect 라는 말은 side Effect 가 생갹된 말이다.

👉React Hook

Hooks 는 리액트 v16.8 에 새로 도입된 기능이다. 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부른다. 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공한다.

그렇다면 왜 굳이 잘 쓰고 있던 클래스형 컴포넌트를 함수형 컴포넌트로 바꿔야할까? 
react를 배우는 데에 있어서 클래스는 큰 진입장벽이었다. 코드의 재사용성과 코드 구성을 어렵게 만들고, this의 사용이나 이벤트 핸들러의 등록 등 기본적인 JS 문법 사항을 알아야 다룰 수 있기 때문이다. 
또한 클래스는 잘 축소되지 않고, reloading을 깨지기 쉽고 신뢰하기 어렵게 만든다. 따라서 react의 최신 기술들이 클래스형 컴포넌트에 효과적으로 적용되지 않았다. 

• 클래스의 문법이 어렵다. 
• 축소가 어렵다. 
• reloading의 신뢰성이 떨어진다. 
• 최신 기술의 적용이 효과적이지 않다.

 이러한 클래스의 단점들을 함수형 컴포넌트로 커버할 수 있다. 하지만 클래스 컴포넌트의 장점인 state 사용이나 life cycle을 직접 다루는 등의 기능을 사용하지 못한다. 이를 해결하기 위해 Hook이 등장했다.

Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.

useState와 useEffect를 사용하여 특징적으로 state와 lifecycle과 같은 기능을 사용 가능하게 해준다.