[React]8. Life Cycle, useEffect

[클래스형 컴포넌트]

1. 컴포넌트: 리액트로 만들어진 애플리케이션의 UI를 이루는 최소 단위
2. 컴포넌트의 종류

 

1)함수형 컴포넌트

2)클래스형 컴포넌트

 

구분	함수형 컴포넌트	클래스형 컴포넌트
State	state 사용불가	state 사용가능
Life Cycle	Life Cycle 사용불가	Life Cycle 사용가능

 

3. Life Cycle: 컴포넌트의 생성부터,변화,소멸까지의 전 과정

*클래스형 컴포넌트에서만 사용가능

 

4. Life Cycle단계별 메소드

*클래스형 컴포넌트 구조 단축키: rcc+Enter

 

[실습]텍스트, 숫자 변경

1)Mount

•  constructor(생성자)

    -초기 state 값 설정

    -화면 렌더링 전 가장 첫 번째 단계

 

 

2)ComponentDidMount

 

3)componentDidUpdate

 

• 숫자 증가/문장 변경 함수

 

• 렌더링: 화면을 구성하는 요소 작성

[useEffect]Life Cycle을 대체할 수 있는 React Hook

1. Hooks: 기존 함수 컴포넌트에서 할 수 없었던 다양한 작업을 가능하게 하는 기능
2. useEffect: 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 Hook

• 사용하는 이유

-NodeJS는 Single Thread이므로 코드가 절차적으로 진행되지 않음→실행시점을 조절할 수 있도록 useEffect 사용

-open API, backendAPI 사용할 때 화면이 먼저 출력되고 데이터를 가져와야 사용자가 빠르다고 느낌 

예)Naver에서 화면이 먼저 뜨고 광고가 나중에 출력됨

 

• 사용법: useEffect(callback, deps)

• 배열의 형태에 따라 실행이 달라짐

     1)배열 생략: 렌더링 할 때마다 실행 

        →didMount, didUpdate할 때

     2)빈 배열 생성: 첫 렌더링 할 때

        →didMount 시 실행

     3)변경을 확인할 값을 담은 배열 생성: 변경을 확인할 값이 변할 때 실행

        → didMount, didUpdate할 때

[실습]텍스트와 숫자 변경

• State 선언

 

• 함수 선언

 

• 배열 생략했을 때

(출력결과)

 

• 빈 배열 생성

 

(출력결과)

 

• 변경된 값을 확인할 값들을 담은 배열 생성

 

(num 버튼 클릭 시)

(text 버튼 클릭 시)

 

• 화면에 출력할 return문 작성

-State 값을 출력(text, num)

-함수들을 적용한 button 출력