React 의 Components 는 과연 언제 rendering 이 될까?

React의 Components는 과연 언제 rendering 이 될까?

 

 

• 상위 컴포넌트가 변경되었을때 <상위 컴포넌트가 랜더링이 되면 하위 컴포넌트도 랜더링이 일어난다>
• 컴포넌트 안에 있는 state 가 변경되었을때
• 컴포넌트의 Props 가 변경되었을 때

👍이게 무슨 말일까??? 쉽게 접근해 보기 위해 함수형 Components의 랜더링 과정을 코드로 살펴보자 

<예제 코드>

import React from 'react';

const Counter1 = () => {

    let count = 1

    const change = () =>{
        count++
        console.log("change"+ count)
    }

    return (
        <div>
            <h1>{count}</h1>
            <div>
                <button onClick={change}>+</button>
                <button>-</button>
            </div>
        </div>
    );
};

export default Counter1;

이 코드를 화면에서 확인해보면

+ 버튼을 눌렀을 때 콘솔 창에서는 count 값이 증가하지만 화면에서는 변화가 없다 이것은 랜더링이 안 일어나고 있다는 건데.......  

 

<이렇게 수정해보자> 

import React, {useState} from 'react';

const Counter1 = () => {

    const [count,setCount] = useState(1)

    const change = () =>{
        setCount(count + 1)
        console.log("change"+ count)
    }

    return (
        <div>
            <h1>{count}</h1>
            <div>
                <button onClick={change}>+</button>
                <button>-</button>
            </div>
        </div>
    );
};

export default Counter1;

 

 

useState( )라는 함수를 사용하는 걸 볼 수 있다 그렇다면 이건 무엇일까??? 화면에서는 어떤 식으로 나오고 있을까요? 

랜더링이 정상적으로 일어나 화면에서도 값이 증가하고 있다 그 말은 useState( ) , count , setCount 이런 코드들이 랜더링을 할 수 있게 만들어 주었다는 것인데  정확한 확인을 위해 로그도 한번 찍어보자 

import React, {useState} from 'react';

const Counter1 = () => {

    console.log(useState)

    const [count,setCount] = useState(1)

    const change = () =>{
        setCount(count + 1)
        console.log("change"+ count)
    }

    return (
        <div>
            <h1>{count}</h1>
            <div>
                <button onClick={change}>+</button>
                <button>-</button>
            </div>
        </div>
    );
};

export default Counter1;

로그로 useState를 찍어보았더니

dispatcher이라는 게 찍혀있다... 넌 또 머니...?  아니 그래서 지금 무슨 일이 벌어지고 있는 거야!!!?? 

 

😉 현재 이 코드 상황을 살펴보자 

• Counter1이라는 컴포넌트가 있고 useState( )를 실행하면 2가지를 배열로 return 한다
• 그 배열에는 get 방식의 값과 set방식의 함수 가 들어있다
• useState ( ) 실행하면 눈속임이 시작되는데 컴포넌트가 사용할 수 있는 <값 get>과 useState ( )에게 연락? 할 수 있는 방법인 <함수 set>을 하나 준다
• 여기서 get 값 은 임 뮤터블 하다
• 위 코드를 예시로 보자면 <get 값 = count> <set 함수 =setCount> 이름이 정해진 건 아니고 그냥 이름을 부여해준 것뿐이다
• useState( )에서 컴포넌트에게 값 <get>을 줄 때 연결되어있는 값을 주는 것이 아닌 deep copy 된 값을 준다
• set <함수>를 호출하면 dispatcher에게 새롭게 랜더링해!!!라고 말해준다
• useState( )는 컴포넌트에게 읽을 수 있는 값 하나와 변경할 수 있는 함수를 하나 주는데 변경하려면 useState( )를 통해서 변경해야 한다?라고 이야기해준다

정리해 보자면 useState( ) 통해 컴포넌트의 state 값이 변하였고 그 결과 랜더링이 일어난 것이다 그 말은 랜더링을 하게 만들어 주려면 set을 해주어야 한다는 것인데 그럼 set... 너는 뭐니...? 그것은 다음 글에서 이어서 설명해보겠습니다