React (2) Compenent

■  Component의 생성

● 1. render()

- return 되는 html형식의 코드를 화면에 그려주는 함수(랜더링이다.

- 화면에 내용이 변경되어야 할 시점에 자동으로 호출된다.

 

● 2. constructor(props)

- 생성자 함수로 생명주기 함수들 중 가장 먼저 실행되며 처음 딱 한 번만 실행된다.

- component내부에서 사용되는 변수(state)를 선언하고 부모객체에서 전달받은 변수(props)를 초기화할 때 사용된다.

- super()함수는 생성자 함수 가장 위에서 호출된다.(자바와 동일)

 

● 3. getDerviedStateFromProps(props, state)

- constructor() 함수 호출 다음과 render() 함수 호출 직전에 실행되는 함수이다.

- 컴포넌트가 새로운 props를 받게 되었을 때 state값을 변경해 준다.

 

● 4. componentDivMount()

- 생성과 관련된 함수들 중 가자 마지막에 실행된다.

- 화면이 만들어지고 나서 할 수 있는 작업인 이벤트 부여나 초기화 작업 시 활용되는 메서드이다.

- 초기화 시에는 setState() 함수를 활용한다.

setState()
- state의 상태도 변경 시키면서 화면에 변경된 값을 불러오는 메서드
- state값 변경시 render() 함수가 자동으로 호출된다.

 

■  Component의 변경

● 5. shouldComponentUpdate

- props, state가 새로운 값으로 갱신되어서 render() 메서드가 호출되어야 하는 시점을 감지해서 컴포넌트를 업데이트할지 말지 여부를 결정하는 함수

- 반환값은 true/false로 설정하여서 true값 반환 시에는 render()메서드를 호출하고 false값 반환시에는 render() 함수를 호출하지 않는다.

※ 주의사항 : 초기 랜더링, 강제 업데이트 시에는 호출되지 않는다.

 

● @ 6. componentDivUpdate()

- 컴포넌트가 실제 화면에 출력된 이후에 실행

- 부모 컴포넌트로부터 전달된 이전 props와 이전 state를 인자로 전달받는다. 

 

■  Component의 소멸

● @ 7. componentWillUnmount

- 컴포넌트가 제거되기 직전에 수행하는 함수 

 

■  State란?

- 컴포넌트 내부에서 전역변수로 저장할 객체

- 컴포넌트 내부에서 state에 값을 저장하고 변경하면서 화면을 다시 그려줄 목적으로 사용한다.

ex) 일반 게시글에서 총 댓글 숫자를 저장하고, 새로운 댓글이 달리면 댓글 숫자를 증가시켜 주면서 화면을 랜더링 시킨다.

- 리액트 이벤트 부여방식으로 JSX함수로 태그에 인라인 방식으로 on + 이벤트명으로 부여가 가능하다.

 

■  props란?

- 부모 컴포넌트가 자식 컴포넌트에 넘겨주는 객체 형태의 데이터

- 자식 컴포넌트의 시작태그에 작성하는 속성은 key값으로, 속성값은 value값의 형태로 넘어간다.

 

■  작성한 컴포넌트를 내보내는 방법

1. export default 객체명; 

- default :: 현재 모듈 안에서 내보내기 할 객체가 한 개일 때 사용

2. export {클래스(함수), 상수, 배열, ...}

ex)

export default Lifecycle;
export {Lifecycle}

 

■  내보낸 컴포넌트 사용하는 방법

1. react모듈에서 default옵션을 사용해서 Component를 export 했다면 import 모듈명 from "모듈경로";

2. react모듈에서 default옵션을 지정하지 않고 export했다면 import {가져올 객체} from "모듈경로";

ex)

import {Lifecycle} from './01_Lifecycle';

import { Component } from "react"; 
// 현재 클래스를 Component로 만들기 위해 필요한 클래스