[React]컴포넌트와 렌더함수, 렌더링, 리렌더링(Componet, Render 함수)

컴포넌트와 렌더함수, 렌더링, 리렌더링(Componet, Render 함수)

 

1. 컴포넌트(Component)

 : 버튼, 텍스트 박스, h1 태그등등의 요소들을 정의해서 UI를 설계.

→ 재사용 가능, 컴포넌트 내에 생김새 및 작동 방식을 정의 해줌.

 

  1) 함수형 컴포넌트

   : JavaScript의 함수(Funtion)를 사용하여 정의.

import React from "react";

function Home(){

    return <h1>Home 홈화면 입니다.</h1>

}

export default Home;

 

  2) 클래스형 컴포넌트

   : 컴포넌트 구성 요소, 리액트 생명주기를 모두 포함

   : 프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용

import React, {Component} from "react";

class Home extends Component{

    render(){

        return <h1>Home 화면 입니다.</h1>

    }

}

export default Home;

 

 

2. Render() 함수

 : UI를 나타낼때 눈에 보이는 화면을 렌더링(화면으로 나타내줌) → render() 함수

 : render 함수는 컴포넌트가 어떻게 생겼는지 정의하고  뷰의 구성과 작동 방식에 대한 정보를 지닌 객체를 반환한다.

 

 

3. 초기 렌더링

 : render()함수로 컴포넌트의 정보를 이용해 화면을 구성(렌더링)

 : 렌더링이 되면 render()함수가 반환한 객체의 정보를 이용하여 문자열 형식의 HTML 코드를 반환해 DOM에 입력

 

  ① 컴포넌트 정의

  ② 컴포넌트 정보를 이용해 렌더링

  ③ 문자열 형식의 HTML 코드 반환

  ④ DOM 요소에 입력됨

 

4. 리렌더링

  : 리액트에서 뷰를 업데이트 할 때 리렌더링(새로고침 한다고 생각)

  

  ① 데이터의 업데이트

  ② 업데이트된 데이터를 이용한 render() 함수 리렌더링

  ③ 이전의 컴포넌트와 리렌더링된 컴포넌트의 차이를 비교

  ④ 바뀐 요소들만 DOM에 주입

 

 ▶ 리렌더링이 필요할때

• 자신의 state값 변경
• 부모 컴포넌트의 리렌더링
• 자신이 전달받은 프로퍼티값 변경
• 강제 업데이트 실행

 

 

※ 프로퍼티(props, properties)

 : 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름) 

 : 프로퍼티는 수정할 수 없다.(자식입장에서 읽기 전용 데이터)

  → 사용방법: 문자열을 전달할때 큰따옴표(" "), 문자열 와의 값을 전달할 때는 중괄호({ })를 사용

 

 

 

※ 스테이트(state)

 : state값 => 동적인 값(useState)

ex)

    const [num, setNumber] = useState(0);

num =  useState의 기본값 0을 갖는 변수

setNumber = num 변수에 대한 setting 할 수 있는 함수(num을 바꿀 수 있는 함수)