State, Props, Condition for re-rendering

이번주에는 State,Props와 리랜더링이 되기위한 조건에 대한 글을 써보았다. 

이번주 숙련주차를 들어가면서 여러가지를 알 수 있었는데 그중에서 3가지를 일단 정리해보려합니다.

 

React를 사용하는 개발자라면, state와 props의 개념에 익숙할 것입니다. 

이러한 개념들은 동적이고 상호작용하는 애플리케이션을 구축하는 데 필수적입니다. 

이번 글에서는 이 두 개념이 어떻게 함께 작동하여 컴포넌트의 다시 렌더링을 트리거하고, 

이 과정에서 조건이 어떤 역할을 하는지에 대해 알아봅시다.

우선, state와 props가 무엇인지 정의해보겠습니다. 

State는 컴포넌트의 내부 데이터를 나타내며, `setState()` 메서드를 사용하여 업데이트할 수 있습니다. 

 

const [state, setstate] = useState();

Props는 반면에 부모 컴포넌트에서 전달된 컴포넌트의 입력값입니다. 

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

Props는 자식 컴포넌트에서 업데이트할 수 없습니다.

import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="John" />
    </div>
  );
}

export default App;

그렇다면 이 두 개념은 언제 컴포넌트의 다시 렌더링을 트리거할까요? 

 

이에 대한 답은 React 컴포넌트의 라이프사이클 메서드에 있습니다. 

컴포넌트의 state나 props가 변경될 때마다, React는 자동으로 `render()` 메서드를

호출하여 새로운 변경사항으로 DOM을 업데이트합니다. 이를 다시 렌더링이라고 합니다.

하지만 어떤 조건에서만 컴포넌트를 다시 렌더링하고 싶다면 어떻게 해야 할까요? 이때 조건문을 사용하여 컴포넌트를 제어할 수 있습니다. 예를 들어, `shouldComponentUpdate()` 메서드를 사용하여 현재의 props와 state가 이전의 props와 state와 다른지 확인할 수 있습니다. 만약 같지 않다면, 다시 렌더링이 필요합니다.

아래는 state, props, 조건문을 사용하여 다시 렌더링을 트리거하는 예제입니다:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  
  handleClick() {
    this.setState({count: this.state.count + 1});
  }
  
  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }
  
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.handleClick()}>Click me!</button>
      </div>
    );
  }
}

위 예제에서는, 컴포넌트에 `count`라는 state 변수가 있으며, 처음에는 0으로 설정됩니다.

하지만, 버튼을 클릭할 때마다 `handleClick()` 함수가 호출되어 `count` 변수를 1씩 증가시키고, 

이로 인해 컴포넌트의 `shouldComponentUpdate()` 메서드가 호출됩니다.

 `shouldComponentUpdate()`는 현재의 `count`와 이전의 `count`를 비교하고, 

다르다면 다시 렌더링이 필요하다는 것을 알려줍니다.

이를 통해 컴포넌트가 불필요하게 다시 렌더링되지 않도록 제어할 수 있습니다. 

이는 성능 향상에 매우 중요합니다. 

 

개발자로서 고려해야할 점

React 개발자라면, 컴포넌트를 만들 때 항상 다시 렌더링이 필요한 경우를 고려해야 합니다.

컴포넌트가 매번 다시 렌더링될 때마다, 애플리케이션의 성능이 저하될 수 있습니다.

따라서 컴포넌트를 최적화하여 불필요한 다시 렌더링을 방지하는 것이 중요합니다. 이를 위해 `shouldComponentUpdate()` 메서드나 React의 불변성 원칙 등을 활용할 수 있습니다.