221126 TIL React 입문 주차 2

1-10 State Part 2

React에서 함수와 Component를 연결하는 방식

1. useState + onClick Event

사용예시

// { useState } 이 부분을 넣어줘야 함.
import React, { useState } from "react";

function App() {
	// 버튼을 클릭하면 "누렁이"로 바뀐다.
    // 이 부분을 event handler라 부른다.
  function onClickHandler() {
    setName("누렁이");
  }
  // 평소에는 길동이를 출력하고 있다가
  const [name, setName] = useState("길동이");
  return (
    <div>
      {name} //여기에 name 값을 받아옴
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

- function 을 사용하던 화살표함수를 사용하던 둘다 함수 component를 생성하는 방식이다.

 

2. useState + onCange Event

사용예시

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");
  const onChangeHandler = (event) => {
    const inputValue = event.target.value;
    setValue(inputValue);
  };
  console.log(value);
  return (
    <div>
      <input type="text" onChange={onChangeHandler} value={value} />
    </div>
  );
};

export default App;

왜 두개씩 나오지?

 

3. 불변성

불변성 이란? 메모리에 있는 값을 변경할 수 없는 것, 자바스크립트의 데이터 형태중에 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성 없습니다.

원시데이터	원시데이터가 아닌 값
변수이름이 달라도 데이터가 같으면 같은 메모리를 참조함	데이터내용이 같아도 변수 이름이 다르면 각각의 만들어진 메모리를 참조함
따라서 데이터가 같은 서로 다른 이름의 변수를 비교하면 "true"값을 반환함	따라서 데이터가 같은 두 변수를 비교해도 "false"를 반환함
같은 메모리를 참조하던 변수가 다른 데이터를 선언하면 참조가 바뀜	데이터 내용이 바뀌면 기존에 메모리값에 데이터가 교체됨
불변성 있음	불변성 없음

 - "불변성에 주의해야 한다" 는 말의 뜻: 

 React에서는 state가 변하여 rerendering을 할때 memory 주소를 비교하여 rerendering 할지 말지를 결정한다. 그런데 memory 주소가 변하지 않고 데이터만 바뀌는 경우에는 state가 변하지 않은것으로 인식하여 rerendering을 하지 않는다. 그래서 React에서 원시데이터가 아닌 데이터를 수정할때 불변성을 지켜주지 않고 직접 수정하면 React에서는 state가 변화한것을 인지하지 못하여 rerendering을 하지 못한다. 그렇기 때문에 React에서는 전개연산자를 사용하여 기존의 값을 복사하고 그 이후에 값을 추가 하거나 수정하는 방식으로 구현한다. 

? 전개연산자를 사용하여 기존의 값을 복사한 후 값을 추가하거나 수정하는 방식이면 메모리 주소가 어떻게 되는거지?

 

더 알아보면 좋은 키워드

원시 데이터 타입이란?

객체, 배열, 함수의 불변성을 지키면서 값을 수정할 수 있는 메서드들은 어떤게 있을까?

 

1-11 컴포넌트와 렌더링

1. Component

명령형 프로그래밍 방식과 선언형 프로그래밍 방식

 - 명령형은 어떻게(How)를 중요시여겨서 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태입니다.

 - 선언형은 무엇(What)을 중요시 여겨서 제어의 흐름보다는 원하는 목적을 중요시 여기는 형태입니다.

 

DOM (명령형 프로그래밍)

예시

// Hello, World! 화면에 출력하기
// 순수 javaScript 명령형 코드
const root = document.getElementById('root'); 
const header = document.createElement('h1'); 
const headerContent = document.createTextNode(
	'Hello, World!'
);

header.appendChild(headerContent); 
root.appendChild(header);

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

React 코드의 경우 내가 UI을 선언하고 render 함수를 호출하면 React가 알아서 절차를 수행해 화면에 출력해주죠. 즉, 화면에 어떻게 그려야할지는 React 내부에 잘 숨겨져 추상화되어 있습니다.

예시

// React 코드 (선언적인)
const header = <h1>Hello World</h1>; // jsx
ReactDOM.render(header, document.getElementById('root'));

	DOM (명령형 프로그래밍)	리액트 (선언형 프로그래밍)
실행 순서	절차적	비절차적
효율성	비효율적	효율정
복잡성	복잡함	덜 복잡함

 

2. 렌더링이란?

 - 리액트에서 렌더링이란, 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미합니다.

 - 렌더링이 일어나는 프로세스를 적절한 비유와 함께 설명하시오? (주방 비유 제

 1) triggering - 사용자가 버튼을 클릭하는 것

 2) rendering - 버튼을 클릭하면 보여주려고 하는 UI를 준비하는 것

 3) commit - 준비한 UI 를 DOM 에 반영하는 것

 4) browser rendering(painting) - update 된 DOM을 화면에 그려주는 것.

브라우저는 어떻게 작동되는가?

https://d2.naver.com/helloworld/59361