항해99 4주차 WIL

3주차만 해도 리액트가 너무 낯설었는데

1주일만에 이제 좀 친해진 느낌이다. 

주특기 숙련주차에는 전역상태관리가 가능한 리덕스를 집중적으로 학습했다.

이번주 주특시 심화주차에는 리덕스를 더 파워풀하게 활용하여 로그인 기능을 공부하고 있고, 청크 미들웨어를 사용해서 리덕스에서 비동기 처리를 하는 것에 집중하고 있고, 불변성관리가 편한 immer도 사용해보고 있다. 다음주에는 불변성과 immer에 대해 심도있게 생각해보는 시간을 가지려 한다.

이번주 WIL주제는 컴포넌트 라이프사이클과 리액트 훅이다.

1. 컴포넌트 라이프사이클

프로그래밍 개념에 대해 공부하다보면 너무 추상적이라서 시각적으로 표현되면 참 공부하기 좋겠다. 생각하는데 이 라이프사이클이라는 주제만큼은 참 잘 나와있는 것 같다. 위 사진이면 이해가 잘 된다.

 

컴포넌트가 Mount Update Unmount, 즉 생겨나고 업데이트되고 없어지기까지(생애) 주기동안 겪는 과정이다.

컴포넌트가 처음 생겨나는 것을 Mount라고 하고 이 과정이 첫번째 열에 나와있다. 일단 처음 컴포넌트의 state, defaultProps, context를 저장하게 되고 그 후에 render가 되면서 컴포넌트를 DOM에 띄우고 이 과정이 완료되면 componentDidMount가 호출된다.

컴포넌트가 호출완료되자마자 실행시키고 싶은 함수를 componentDidMount메소드에서 실행시키면 된다.

라이프사이클에 대해 알아야하는 이유가 아마도 리액트컴포넌트 자체가 유저의 행동에 따라 살아움직이는 것 처럼 변화하며 태어나고 죽는 삶과 같기때문 아닐까? 왜냐하면 우리가 실행하고 싶은 행동(함수)는 어떤 상태에 실행되어야 하는지 그 타이밍이 명확하기 때문이다.

그래야 사용자의 행동에 반응하듯 인터렉티브한 웹서비스를 만들 수 있기 때문이지 않을까?

두번째는 update단계인데 컴포넌트가 업데이트 되는 상황은 총 4가지이다. 

1. 부모로 부터 받은 데이터, 즉 Props가 바뀔때

2. 내가가진 데이터 State가 바뀔때

3. 부모컴포넌트가 리렌더링 될때

4. 강제로 렌더링될때

이때는 componentDidUpdate메소드가 실행되고 컴포넌트가 업데이트 된다. 이것은 컴포넌트가 업데이트 되었을때 dom을 조작하기 위해 사용하거나 현재의 props를 비교하여 네트워크요청을 보내는 작업을 할때 유용하다.

unmount는 사라지는 단계로 componentWillUnmount는 컴포넌트가 사라지기 직전에 호출된다. 뭔가 사라지기 직전에 실행하고 싶은 함수를 이 안에서 작성한다.

2. React hooks

클래스형 컴포넌트에서는 라이프사이클메소드를 사용하지만 주류가 된 함수형 컴포넌트 React에서는 useEffect라는 리액트 훅을 사용한다. useEffect훅은 mount, update, unmount가 하나로 합쳐진 함수로써, 더 간결하고 이해하기도 쉽다.

지금 연습하고 있는 리액트 과제에서는 이렇게 사용했는데, 이는 컴포넌트가 처음 마운트 될때 한번만 진행하겠다는 뜻이다.

두번째 매개변수자리에 온 []빈 배열이 있는데,

만약 배열안에 어떤 state가 들어간다면 처음 마운트될때 + 그 state 가 바뀔때마다 실행된다.

예를들어 이렇게 써놨다면 something이라는 state만 지켜보고 있다가 state가 업데이트 될때 실행한다는 뜻이다.

즉 클래스형 컴포넌드의 componentWillMount와 componentDidUpdate가 합쳐진 형태이다.

심지어 componentWillUnmount의 역할도 할 수 있다.

말은 안되지만, 저렇게 useEffect안에 return 으로 함수를 제공하면 컴포넌트가 사라질때 실행된다고 한다.

즉 componentWillUnmount의 역할을 하는 것이다.

그리고 지켜보는 state가 여러개일때는 배열안에 여러개를 넣어도 되고

내가 쓴것처럼 빈 배열을 넣어두면 처음 mount시에만 한번 실행하게 할 수도 있다.

이처럼 리액트 훅은 함수형컴포넌트를 쉽게 사용하기 위해 만들어 놓은 장치라고 할 수 있다.

그리고 똑똑한 사람들이 만들어 놓은 훅을 언제든 찾아서 사용해볼 수도 있다. 

이렇게 4주차 항해를 마무리하고 

이번 주는 꼭! 리덕스와 비동기처리, 불변성과 친해지도록 하자!