항해 14일차(props, state, virtual dom)

Undong·2023년 4월 16일

항해구구

목록 보기

14/52

항해 14일차

벌써 2주차의 마지막이 날이 왔다. 한 주를 되돌아 보며 몰랐던 virtual dom과 복습 차원에서 props와 state에 대해 WIL를 써볼려고 한다.

먼저 공부 했었던 props와 state를 보면,

👉 props

상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성이다. 즉 단방향 데이터의 흐름을 갖는다.

기본 문법

컴포넌트 내부에서 코드를 작성한다.

<Hello name="아무거나">

받는쪽은 props 라는 예약어를 통해 받는다.

function Hello(props) {
  return <div>{props.name}</div>
}

비구조화할당

컴포넌트의 파라미터에서 {}안에 받는 내용을 미리 표기한다.

function Hello({name}) {
  return <div>{name}</div>
}

defaultProps

컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정하면 된다.

function Hello({name, age}) {
  return <div>{name}</div>
}

Hello.defaultProps = {
  name: '이름없음'
}

Props.children

컴포넌트 태그 사이에 값이 있을때 'children'이란 예약어를 사용한다.

import React from 'react';

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
      {children}
    </div>
  )
}

export default Wrapper;

쓰이는 곳(App.js)에서 값을 정한다 = props(부모)
쓰임 당하는 곳(Hello.js나 Wrapper.js 등)에서 값을 정한다 = children

이제 State를 살펴보겠다.

👉 State

즉 상태를 의미한다. 상태를 바꾸기 위해서는 아래에 있는 useState라는 리액트 훅을 사용해야한다.

useState

컴포넌트에서 바뀌는 값 관리하기

우리가 리액트 컴포넌트를 만들 때는, 동적인 부분이 하나도 없었다. 값이 바뀌는 일이 없었다. 이번에는 컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때 어떻게 구현할 때 사용한다.

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데요, 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. 이번에는 useState 라는 함수를 사용해보게 되는데, 이게 바로 리액트의 Hooks 중 하나이다.

기본 문법

useState 를 사용 할 때에는 상태의 기본값을 파라미터로 넣어서 호출해줍니다. 이 함수를 호출해주면 배열이 반환되는데, 여기서 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수이다.

const [state, setState] = useState(초기값); //

useState를 사용할려면

import { useState } from 'react'; // 선언해주어야 한다.

변수 재선언

setState(2); // state의 값을 2로 변경

예시

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

마지막으로 virtual dom에 대해서 보겠다.

👉 Virtual Dom

Dom을 추상화한 가상의 객체라고 할 수 있다. 즉 가상돔이다. 여기서 Dom이란 브라우저에서 다룰 HTML 문서를 파싱하여 문서의 구성요소들을 객체로 구조화하여 나타낸 것이다. 즉 HTML/ XML 문서에 접근하기 위한 인터페이스이다.

이러한 Dom들은 트리 구조로 되어 있어 이해하기 쉽지만, 노드의 수가 많아질 수록 속도가 느려지고, Dom 업데이트에 잦은 오류를 발생할 수 있다. 즉 Dom 트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신된다는 점이다. 이 말은 즉, 화면에서 10개의 수정사항이 발생하면 수정할 때마다 랜더 트리가 10번 수정되면서 새롭게 만들어지게 되는 것이다.

이런 단점을 줄일 수 있는 Dom이 Virtual Dom이다. Virtual Dom은 가상 돔을 만들어 UI가 변경되면 전체 UI를 Virtual Dom으로 렌더링하고 현재 Virtual Dom과 이전 Virtual Dom을 비교해 차이를 계산한다. 그 후 변경된 부분을 Dom에 반영한다.

즉 효율적이고, 단순하고 성능 향상에 도움이 되며, 상태 변경을 생각하지 않고 애플리케이션을 빌드할 수 있다.

마지막으로 이러한 virtual dom과 dom의 차이를 보겠다.

Dom VS Virtual Dom

업데이트

Dom이 느리고 Virtual Dom이 빠르다.

HTML 업데이트 방식

HTML을 직접적으로 업데이트하고 HTML을 직접적으로 업데이트 하지 않는다.

새로운 element 업데이트 방식

새로운 element가 업데이트된 경우 새로운 DOM 생성하고 새로운 element가 업데이트 된 경우 새로운 가상 DOM 생성 후 이전 DOM과 비교 후 차이점 DOM만 업데이트한다.

메모리

메모리 낭비가 심하고 메모리 낭비가 덜하다.

이렇게 props,state, virtual dom에 대해서 살펴 보았다.

마무리

WIL를 쓰면서 props,state에 대한 개념들을 더욱 더 복습할 수 있었고, 공부했었던 부분에서 몰랐던 부분과 새롭게 알 수 있었던 부분들을 찾아 공부할 수 있어 좋았다. 또한 궁금했던 virtual dom에 대해서 알 수 있었고, 다음주 공부도 열심할 수 있는 좋은 계기가 된거 같다. 또한 TIL들을 다시 보면서 한 주를 되돌아 볼 수 있어 좋았다.😍