React4-2. 컴포넌트(2)

목차

1. 컴포넌트의 생명주기 도표
2. 인스턴스 생성(Mounting) 시 호출되는 메서드들
3. 업데이트(Update) 시 호출되는 메서드들
4. 인스턴스 제거(Unmounting) 시 호출되는 메서드들
5. 자주 사용되는 생명주기 메서드( render() / contructor() / componentDidMount() )
6. 생명주기에 따른 코드 실행예시

 

 

 

---

 

 

1. 컴포넌트 생명주기

• 모든 컴포넌트는 각 생명주기에 따른 다양한 메서드를 보유한다
• 이 메서드를 선언하여 특정 시점(컴포넌트가 마운트되거나 언마운트되는 시점)에 코드가 실행되도록 설정 가능하다

 

-컴포넌트의 생명주기

1. 인스턴스 생성(Mounting)
2. 업데이트(Update)
3. 인스턴스 제거(Unmounting)

 

 

---

 

 

2. 생성(Mounting)

•  컴포넌트의 인스턴스가 생성되어 DOM에 삽입될때 아래의 메서드들이 순서대로 호출됨

 

1. construnctor()
2. static getDerivedStateFromProps()
3. render()
4. componentDidMount()
   

 

<주의>
componentDidMount() 메서드는 컴포넌트의 return이 DOM에 렌더링된 후에 실행된다.
= 컴포넌트의 render() 메서드가 먼저 실행된 후 실행된다는 의미

 

 

 

3. 업데이트(Update)

• props 또는 state가 변경되면 갱신이 발생
• 컴포넌트가 재 렌더링될 때 아래의 메서드들이 순서대로 호출됨

 

1. static getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

 

4. 해제(Unmount)

• 컴포넌트가 DOM상에서 제거될 때 아래의 메서드 호출됨

 

1. componentWillUnmount()

 

 

---

 

5. 자주 사용되는 생명주기 메서드

5-1. render() 메서드

• 클래스 컴포넌트에서 반드시 구현돼야 하는 유일한 메서드
• render() 메서드는 pure 해야 함.
• 즉, 컴포넌트의 state를 변경시키지 않고, 호출될 때 마다 동일한 결과 반환, 브라우저와 직접 상호작용 X

 

• render() 메서드 호출 시, this.props 또는 this.state의 값을 활용하여 아래 중 하나를 반환해야 함

• React 엘리먼트 - 보통 JSX를 사용하여 생성되며 DOM 노드 또는 사용자 정의 컴포넌트 생성을 지시함
• 배열 / Fragment - render()를 통하여 여러 엘리먼트를 반환
• Portal - 별도의 DOM 하위 트리에 자식 엘리먼트를 렌더함
• 문자열 / 숫자 - DOM상에 text 노드로 렌더됨
• 불리언 / null - 아무것도 렌더하지 않음

 

<참고1>
render() 메서드는 브라우저와 직접 상호작용하지 않기 때문에
( =render()메서드 호출 시, react가 렌더링 return 값을 일치 시키기 위해 DOM 업데이트)

만약 브라우저와 상호작용하는 작업이 필요하다면,
해당 작업을 componentDidMount()이나 다른 생명주기 메서드 내에서 수행할 것

<참고2>
shouldComponenUpdate()가 false 반환 시, render() 호출되지 않음

 

 

5-2. constructor() 메서드

• 메서드를 바인딩하거나 state를 초기화하는 경우, 해당 컴포넌트에 constructor 구현해야 함
• constructor() 메서드는 해당 컴포넌트가 마운트 되기 전에 호출됨
• React.Component를 상속한 컴포넌트의 생성자를 구현할 때는 다른 구문에 앞서 super(props)를 호출해야 함
• (constructor 내에서 this.props 정의 <> 버그 발생 가능)

 

 

• constructor 사용 목적

1. this.state에 객체 할당하여 state를 초기화(constructor은 this.state를 지정할 수 있는 유일한 공간이다)
2. 인스턴트에 이벤트 처리 메서드를 바인딩

 

 

5-3. componentDidMount() 메서드

• 컴포넌트의 retrun값이 DOM에 삽입(=컴포넌트 마운트)되고 난 후, React가 호출하는 함수
• 외부에서 데이터 불러와야 한다면, 네트워크 요청을 작성할 위치(db에서 데이터 가져올 때)
• 데이터 구독 설정할 위치

 

 

5-4. componentDidUpdate() 메서드

componentDidUpdate(prevProps, prevState, snapshot)

• 컴포넌트 갱신 시 DOM조작을 위해 활용
• 이전과 현재의 props 값을 비교해서 네트워크 요청

 

 

 

6.생명주기에 따른 코드 실행

1. 브라우저가 프론트 서버에 요청을 보낸다.
2. 프론트 서버가 브라우저에 응답을 한다 (렌더 메서드 호출로 화면 그린다-데이터 값이 없는 화면)
3. 프론트 서버가 백엔드 서버에 요청을 보낸다.
4. 백엔드 서버에서 응답을 준다.
5. 백엔드 서버에서 응답을 받은 프론트 서버가 componentDidMount 생명주기 메서드에서 this.setState 메서드로 상태를 바꾼다.
6. 이미 그려진 화면에 데이터 값을 넣는다.