항해 21일차(state, props, 리렌더링 발생 조건)

Undong·2023년 4월 23일

항해구구

목록 보기
21/52
post-thumbnail

벌써 항해 21일차..

이번 주 공부한 것을 회고하면서 WIL를 작성한다. 한 주를 공부를 하면서 자주 나오는 state, props부분에 대해 좀 더 복습해야겠고, 또한 이러한 리액트를 사용하면서 렌더링이 발생하는 상황에 대해 궁금해서 이러한 주제로 WIL를 적을려고 한다.

먼저

state

리액트에서 이벤트에 의해 변경되는 동적인 값이다. 버튼을 클릭하는 onclick, input 입력으로 인해 발생하는 onchange 이벤트에 의해 입력값이 변경된 경우에 사용한다. 부모, 자식 컴포넌트도 데이터를 변경할 수 있다. 또한 useState라는 함수형 컴포넌트를 사용하여 state를 다룰 수 있다. 또한 State는 컴포넌트 내부에서 관리되는 데이터이다. 이 데이터는 컴포넌트의 랜더링 결과에 영향을 줄 수 있다. State는 객체 형태로 정의되며, 객체의 속성에 상태값을 저장한다.

그럼 state를 사용해보자~

먼저 state들을 다루기 위해 useState를 사용한다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default Counter;

위 예제에서는 useState() Hook을 사용하여 count State를 초기화하였다. useState() Hook은 배열을 반환하며, 첫 번째 원소는 State 값, 두 번째 원소는 State 값을 변경하는 함수이다.

handleClick() 함수는 버튼을 클릭할 때마다 count 값을 1 증가시키기 위한 함수이다. setCount() 함수를 사용하여 count 값을 증가시킨 다음, 자동으로 UI를 업데이트한다.

return 구문에서는 count 값을 출력하고, 버튼을 누르면 handleClick() 함수를 호출한다.

함수형 컴포넌트에서는 useState() Hook을 사용하여 State를 초기화하고, setCount() 함수를 사용하여 State를 변경합니다. 이를 통해 함수형 컴포넌트에서도 State를 쉽게 사용할 수 있다.

두 번째, props이다.

Props

리액트에서 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 데 사용되는 속성이다. Props는 읽기 전용이며, 자식 컴포넌트에서 직접 수정할 수 없다.
Props를 사용하여 데이터를 전달할 때, 부모 컴포넌트에서 전달할 데이터를 속성의 형태로 자식 컴포넌트에게 전달한다. 자식 컴포넌트는 이 속성을 받아서 사용한다. 

import React from 'react';

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

function ParentComponent() {
  return <ChildComponent name="React" />;
}

export default ParentComponent;

ChildComponent는 name이라는 Props를 받아서 사용한다. ParentComponent에서는 name이 "React"인 ChildComponent를 렌더링한다.

ChildComponent에서 props.name을 사용하여 name Props의 값을 출력한다.

부모 컴포넌트에서 Props를 전달할 때, 속성의 이름과 값을 정의하면 된다. 자식 컴포넌트에서 Props를 사용할 때, props 객체를 통해 속성에 접근할 수 있다.

Props는 컴포넌트 간에 데이터를 전달하는 데 사용되며, 리액트에서는 Props를 통해 컴포넌트를 구성한다.

_**이렇게 state와 props에 대해 알아보았다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데 state와 props는 차이점은 무엇일까?

props는 함수 매개변수처럼 컴포넌트에 전달되는 반면 state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다.

state와 props에 대해 알아보면서 렌더링이라는 단어를 볼 수 있다. 그럼 이런 렌더링이라는 것은 언제 발생하는 알아보자!!

렌더링

렌더링(Rendering)은 UI를 최초로 그리는 과정을 의미한다. 컴포넌트가 최초로 생성되거나, 상태나 속성이 변경되어 UI를 업데이트할 때, 리액트는 렌더링을 수행한다. 렌더링은 가상 돔에서 일어나며, 이후에 실제 돔(DOM)에 반영된다.

리렌더링

렌더링 이후에 상태나 속성이 변경되어 UI를 다시 그리는 과정을 의미한다. 리액트에서는 상태나 속성이 변경될 때마다 자동으로 리렌더링이 수행된다. 이때, 렌더링과 마찬가지로 가상 돔에서 업데이트가 수행되며, 이후에 실제 돔에 반영된다.

즉 리렌더링은 렌더링이 다시 발생하는 것이다.

그럼 이러한 리렌더링은 언제 발생할까??

전반적으로 리렌더링이 발생하는 조건들을 많다. 알아보자~

  1. state가 변경될 때 : 컴포넌트 내부에서 setState() 함수를 호출하여 상태를 변경하면, 해당 컴포넌트가 리렌더링된다.

  2. props가 변경될 때: 부모 컴포넌트가 자식 컴포넌트에게 props를 전달하면, 해당 컴포넌트가 리렌더링 된다.

  3. 부모 컴포넌트가 재렌더링 될 때 : 부모 컴포넌트가 재렌더링하게 되면 자식 컴포넌트도 재렌더링하게 된다.

  4. context가 변경될 때 : Context를 사용하는 컴포넌트는 Context 값이 변경될 때 마다 리렌더링된다.

4번인 경우는 중앙 상태값이 변경되는 것을 뜻한다.

주로 이렇게 리렌더링이 발생한다.

이러한 리액트는 상태나 속성이 변경될 때, 가상 돔(Virtual DOM)을 통해 변경된 부분만 업데이트하여 성능을 최적화한다. 그러므로, 최대한 리렌더링을 발생시키지 않도록 주의해야한다. 최적화를 하기 위해 React Memo, useCallback, useMemo라는 함수 컴포넌트를 사용한다.

마무리

state, props에 대해 복습할 수 있었고, 또한 state, props에 대해 리렌덩링이 발생할 수 있는 부분도 알 수 있었다. 즉 state, props를 사용할 때 리렌더링이 발생할 수 있는 조건들을 파악하여 최적화를 잘하면 좋을 것 같당!!~🔥

profile
Undong
console.log("Hello")
이전 포스트

항해 20일차 (또dux)

다음 포스트

항해 22일차 (reudx todo)

0개의 댓글