TIL

24. 07. 22 TIL

효ㄷi 2024. 7. 22. 20:38

props란?

부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법.

단방향으로 부모 -> 자식으로만 흐름

읽기 전용으로, 값을 변경하지 않음

 

children이란?

props 중 하나인 children은 부모 컴포넌트가 자식 컴포넌트에게 전달하는 또 다른 방법

 

컴포넌트의 구조는 동일하게 유지하면서 내용을 쉽게 바꿀 수 있어

공통적인 레이아웃을 가지면서 내용만 바꾸고 싶을 때 레이아웃 컴포넌트에서 사용한다.

 

children은 부모 컴포넌트가 자식 컴포넌트에게 전달할 내용을

자식 컴포넌트에서 원하는 위치에 넣기 위해 사용한다.

자식 컴포넌트는 children을 사용해 부모가 전달할 내용을 특정 위치에 렌더링한다.

 

 

state

* 꼭 onChange와 value를 둘 다 연결해야 하는지?

-> 리액트에서 input 요소의 value 속성과 onChange 이벤트를 함께 사용해 입력 필드의 상태를 관리하는 것이 일반적임. 이러한 패턴을 제어 컴포넌트라고 함

 

(리액트에 의해 값이 제어되는 컴포넌트가 제어 컴포넌트임)

 

그래서 입력 필드의 값이 항상 리액트 상태와 동기화되고 데이터의 일관성과 정확성을 유지할 수 있다.

불변성

= 값이 한 번 저장되면 변경할 수 없는 성질

 

불변성이 있는 경우 -> 원시 데이터는 변경 불가. 새로운 값 할당시 새로운 메모리 공간에 저장됨

불변성이 없는 경우 -> 객체, 배열, 함수는 값 변경 가능. 원본 데이터가 직접 변경됨

 

리액트에서는 상태의 변화를 감지하여 화면을 리렌더링하는데, 상태가 변했는지 확인할 때 메모리 주소를 비교함. 그래서 원본이 변경되면 메모리 주소가 동일하므로 변화 감지 못함.

 

그래서 리액트에서는 직접 수정하지 않고 새로운 배열을 생성하여 불변성을 유지해야 한다.

import React, { useState } from "react";

function App() {
  const [dogs, setDogs] = useState(["말티즈"]);

  function onClickHandler() {
    setDogs([...dogs, "시고르자브르종"]); // 전개 연산자를 사용하여 새로운 배열 생성
  }

  console.log(dogs);
  return (
    <div>
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

컴포넌트

= 리액트의 핵심

리액트의 기본 빌딩 블록이며, ui를 표현하는 최소 단위

 

리액트 이전에는 직접 브라우저의 dom 객체를 조작해 ui를 변경했는데,

리액트는 컴포넌트를 선언하여 ui를 그리므로 더 쉽고 관리하기 편하다.

 

ex. 

1. 명령형 프로그래밍 (DOM 조작)

= ui를 어떻게 그릴지 하나하나 절차를 명령

 

2. 선언형 프로그래밍 (리액트)

= 어떤 ui를 그릴지 선언하고, 리액트가 알아서 그리는 방식

렌더링

= 컴포넌트가 현재 상태(state)와 속성(props)에 기반하여 ui를 만드는 과정

 

렌더링 트리거

= 렌더링이 발생하는 경우

1. 앱이 처음 실행될 때

2. 상태나 속성이 변경될 때

3. 부모 컴포넌트가 렌더링 될 때

 

리렌더링

= 상태나 속성이 변경되어 기존 ui를 업데이트하는 과정

 

브라우저 렌더링

1. 리액트 렌더링 = 리액트가 컴포넌트를 렌더링하여 DOM을 그리는 과정

2. 브라우저 페인팅 = 브라우저가 업데이트된 DOM을 그리는 과정

리액트와 뷰 같은 프레임 워크는 가상 Dom을 사용해 브라우저에 화면을 그림

 

1. DOM

= 웹 페이지의 문서를 트리 구조로 표현한 것

 

엘리먼트 

= 페이지를 구성하는 각 컴포넌트

 

노드 

= 트리의 각 요소, html 요소에 접근하고 수정할 수 있는 api 제공

 

2. 가상 DOM

= 실제 DOM의 복사본이며, 메모리에 객체 형태로 저장됨

실제 DOM을 직접 조작하는 것보다 가상 DOM을 변경하는 것이 훨씬 빠름

 

 

리액트 렌더링 과정

1. 가상 DOM 생성 = 컴포넌트의 렌더 함수를 실행해 가상 DOM 생성

2. diffing = 새로운 가상 DOM과 이전 가상DOM 비교

3. reconciliation = 변경된 부분만 실제 DOM에 반영

 

브라우저 렌더링 (페인팅)

리액트가 실제 DOM을 업데이트 한 후, 브라우저는 다음 과정을 통해 화면에 반영함

1. 스타일 계산 

2. 레이아웃

3. 페인팅

* 브라우저의 렌더링과 리액트의 렌더링은 서로 다른 독립적인 프로세스다.