React - 컴포넌트의 리렌더링

 

리액트에서 컴포넌트가 리렌더링되는 조건은 상태값이 변경되었을 때 발생한다. 아래와 같은 세가지 경우에서 상태값 변경이 주로 일어나며 해당 컴포넌트의 변경된 상태 부분이 변화하는 것을 확인할 수 있다.

• 상태값이 변경되었을 때 (useState, Redux 등을 통한 상태값 변경시)
• props의 값이 변경되었을 때
• 상위 컴포넌트가 렌더링될 때

 

• useState 변경

import React, { useState } from 'react';

const TestComp = () => {
  console.log('TestComp Component');
  const [ test, setTest ] = useState(true);

  return (
     <>
       <button onClick={() => setTest(!test) }>리렌더링 테스트</button>
     </>
  )
}

export default TestComp;

다음과 같이 버튼을 클릭할 때 마다 test라는 state의 상태값이 계속 바뀌는 간단한 컴포넌트를 만들어보았다. 버튼을 클릭할 때 마다, 'TestComp Component'라는 로그가 콘솔창에 계속해서 찍히는 것을 확인할 수 있다. 버튼을 클릭할 때, test라는 상태의 값이 변경되지 않도록 하면, 콘솔 로그가 맨 처음 페이지에 렌더링 될 때마만 찍히게 되지만, 상태의 값이 변경되면 해당 콘솔이 매번 찍히게 된다.

컴포넌트가 리렌더링 될 때, 화면에 모든 요소가 다시 그려지는 것이 아니라, 바뀐 요소들만 다시 그려진다. 위의 컴포넌트에서는 단순히 버튼 클릭으로 인해 화면의 요소가 변경되도록 하지 않았기에 단순히 콘솔 로그만 찍히고, 화면의 요소들은 그대로 나오는 것을 확인할 수 있다.

 

import React, { useState } from 'react';

const TestComp = () => {
  console.log('TestComp Component');
  const [ fruit, setFruit ] = useState('mango');

  return (
     <div>
       <button onClick={() => setFruit('orange) }>리렌더링 테스트{ fruit }</button>
     </div>
  )
}

export default TestComp;

만일 이런식으로, 버튼 텍스트에 상태값을 출력시킨다면 어떨까? 버튼을 클릭하면 useState fruit의 상태값은 orange로 바뀌게 된다. 

fruit의 상태값이 바뀌기 때문에 TestComp라는 컴포넌트는 리렌더링된다. 리렌더링되면서 전체의 요소가 바뀌는 것이 아닌, { fruit } 부분의 버튼 텍스트 부분만 바뀌게 된다.

 

 

• redux 변경

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setHandleRedux } from '../moduls/test'; 

const TestComp = () => {
  const dispatch = useDispatch();
  const testText = useSelector(state => state.testText);
  
  function handleRedux() {
    dispatch( setHandleRedux('test text') );  
  }

  return (
     <>
       <button onClick={ handleRedux }>리렌더링 테스트{ testText }</button>
     </>
  )
}

export default TestComp;

버튼을 클릭하면, handleRedux함수가 실행되고 dispatch를 통해 redux 스토어에 존재하는 testText라는 상태값을 변경해준다. 상태가 변경된 후, useSelector를 통해 버튼 텍스트 문구가 변경되는 것을 확인할 수 있다.

 

• props 변경

// App.js
import React, { useState } from 'react';
import { Main } from './Main';

const App = () => {
  const [ fruit, setFruit ] = useState('mango');
  
  function handleClick() {
    setFruit('orange');
  }
  
  return (
    <div>
      <Main fruit={ fruit }/>
      <button onClick={ handleClick }>click</button>
    </div>
  )
}

export default App;

 

// Main.js

import React from 'react';

const Main = (props) => {
  return (
    <div>
      <h1>{ props.fruit }</h1>
    </div>
  )
}

export default Main;

위와 같이 App.js에서 버튼을 누르면 handleClick이라는 함수가 실행되며 useState의 fruit값이 기본값 mango에서 orange로 바뀌도록 코드를 작성했다. 버튼을 누르면 fruit이라는 상태값이 바뀌게 된다. 상태가 바뀌면서 Main컴포넌트로 전달되는 props값인 fruit도 바뀌게 된다. 이렇게 props가 변경되면 Main컴포넌트도 리렌더링되며 변경된 값이 반영되어 화면에 문구가 보여지는 것을 확인할 수 있다.