[SSAFYCial] React의 useEffect에 대해 알아보자! (1)

 

여러분 안녕하세요 :)

 

바쁘게 코딩하다보니 시간이 정말 빨리 가네요 ,, ㅎㅋㅋ

 

10기는 벌써 2학기 공통 프로젝트 기간에 접어들었는데요,

다들 프로젝트 잘 진행하고 계신가요?!

 

저는 모바일을 하게 되어서 플러터로 개발하고 있는데,,

1학기보다 더 바쁘게 지내고 있습니다 ㅠㅠㅋㅋ

 

 

이번엔 1, 2편으로 나누어 React의 Life Cycle과 useEffect에 대한 내용을 준비해봤습니다 :)

 

---

 

useEffect가 뭘까요?

 

useEffect는 함수형 컴포넌트에서도 부작용(Side Effect)을 처리할 수 있게 해주는 Hook입니다.

 

* 여기서 부작용이란, 컴포넌트가 렌더링 되거나 상태가 업데이트 될 때 발생하는 작업을 말합니다.

 

함수형 컴포넌트 이전에는 클래스형 컴포넌트를 사용했었는데요, 오늘은 클래스형 컴포넌트의 내용을 먼저 다루고 함수형 컴포넌트로 넘어가볼게요!

 

 

 

리액트의 Life Cycle

useEffect를 이해하기 전에 리액트의 라이프 사이클을 먼저 이해하면 좋을 것 같아요.

아래 그림은 리액트의 대략적인 라이프 사이클입니다.

 

딱 봐도 어려운 그림인데요,,

더 쉽게 이해하기 위해 공식 문서에 나와있는 예제를 가져와보았는데요,

예제를 보시면서 리액트 라이프 사이클 과정을 생각해보시면 좋을 것 같아요!

 

시계를 만들어봅시다

 

index.js

React를 사용하시고 계시다면 많이 본 코드일텐데요

root.render 메소드에 Clock 컴포넌트를 전달하면, Clock의 constructor가 호출됩니다.

 

Clock.js

 

constructor에서는 state와 props를 초기화합니다.

(최신 버전 React는 클래스 필드 문법으로 초기화가 가능합니다.)

 

시계니까 시간을 표시해야겠죠!

현재 시각이 포함된 객체를 할당하여 지역 state를 초기화 해줍니다.

 

 

Render() 호출

 

이제 React는 Clock 컴포넌트의 render() 메소드를 호출합니다.

화면에 표시되어야 할 내용을 React가 알게 되었습니다.

 

 

맨 처음에 본 코드에서 ReactDOM이 있었죠?!

ReactDOM은 이전 랜더링에서 생긴 DOM 트리와 현재 가상 DOM 트리를 비교하면서

바뀐 부분만을 실제 DOM에 반영하는 역할을 합니다.

 

 

 

이제 실행하면 이런 화면을 볼 수 있습니다.

시계는 아직 동작하지 않구요!

 

이제 아까 그림에서 보았던 메소드를 작성해보겠습니다!

 

컴포넌트가 렌더링 되거나 상태가 업데이트 될 때 발생하는 작업을 처리하는 메소드를

생명주기 메소드라고 하는데요,

 

컴포넌트가 mount 되면 React는 생명주기 메소드인 componentDidMount()를 호출합니다.

메소드 안의 내용을 살펴보면 setInterval로 브라우저에게 1초마다 tick 메소드를 실행하라고 시키고 있군요.

this.tick()에서 this는 Clock 컴포넌트(Clock Object)를 가리킵니다.

 

 

Clock 클래스 안에 tick 메소드를 살펴보면 setState를 통해 date를 현재 시각으로 업데이트하고 있습니다.

 

 

 

componentDidMount() 가 궁금해서 안으로 들어가보니 친절하게도 다음과 같이 설명이 달려있었습니다.

 

 

 

 

 

다시 돌아가보겠습니다.

 

setState() 호출 덕분에 React는 state가 변경된 것을 인지한 뒤,

화면에 표시될 내용을 알아내기 위해 해당 컴포넌트의 render()를 다시 호출합니다.

 

render() 메소드 안에 변경된 state 값이 들어가고, React는 이에 따라 DOM을 업데이트합니다.

 

 

컴포넌트가 업데이트 되었을 때 작업을 처리하고 싶다면? componentDidUpdate() 메소드를 사용할 수 있습니다. 이것도 정리해봤습니다.

 

 

 

 

 

componentWillUnmount() 를 사용하면 컴포넌트가 unmount 되기 직전, 또는 다음 업데이트가 실행되기 이전에 실행할 작업을 처리할 수 있는데요,

 

이 시계 예제에서는 clearInterval(timerId); 로 Interval을 제거시켜주었습니다.

코드를 더 자세히 보고 싶으시면 리액트 공식 문서 (옛날 버전)을 참조하시면 좋을 것 같아요!

 

 

어떠신가요.. 클래스형 컴포넌트도 메소드들이 좀 어렵죠..?

 

하지만 useEffect를 사용하면 이것들이 쉬워진답니다!

 

 

그럼 다음 편에 계속..ㅎ