Today I Learned-08

졍이🥨·2022년 11월 25일
TILToday I learned회고
0

개발일지

목록 보기
18/38
post-thumbnail

2022-11-25(금)

React 입문주차 1주차

💡정의 정리

React?
자바스크립트를 이용한 프론트엔드 개발을 더 편리하게 해주는 라이브러리.
React는 #SPA(Single Page Application)를 전제로 하고 있으며 #Virtual DOM을 활용하여 업데이트 해야하는 #DOM요소를 찾아서 해당 부분만 업데이트 하기 때문에, 리렌더링이 맞은 동적인 모던 웹에서 향상된 퍼포먼스를 낼 수 있다.

MPA(Multi Page Application) (SPA의 반대)
페이지마다 서버에 해당 페이지의 HTML 파일을 요청하고 이를 브라우저가 응답을 받아 유저가 볼 수 있도록 그려주는 구조.

Virtual DOM(Document Object Model) ?
자바스크립트로 조작이 가능한 객체 형태로 모델링 한 것이며 '가상돔'이라고도 한다.

DOM ?
웹 페이지를 우리가 사용하는 자바스크립트와 같은 프로그래밍 언어와 연결해주어 화면에 그려진 UI요소들을 조작할 수 있게 도와주는 역할.

가상돔의 필요성
왜 리렌더링이 잦은 동적인 모던 웹에서 퍼포먼스의 개선이 필요했을까?
자바스크림트를 이용해 DOM을 직접 조작하면 변경 사항이 있을 때마다 레이아웃과 페인트 단계를 초래하게 됨. 만약 10개의 돔 노드를 for문으로 일일히 수정하게 되면 for문으로 10개를 일일히 수정하게 되면 하나의 노드에 수정 사항이 생길 때 마다 화면을 다시 그리는 과정을 거쳐야한다. 즉, 10개를 한번에 수정하는 것이 아니라, 하나씩 수정된 노드가 10번에 걸쳐서 다시 화면에 그려질 수 있다는 이야기.
=> DOM을 직접 조작하는 것은 비용이 크다.

CRA(create-react-app)?
리액트 프로젝트를 하기 위해 필요한 여러 프로그램을 자동으로 설치해주는 도구

  • 구조 분해 할당?
    생긴 구조에서 내가 원하는 값만 뽑아서 할당. 객체나 배열을 구조분해하여 나타낼 수 있습니다.

👇1-3 component Part1

import React from "react";
function App() {
  // <---- 자바스크립트 영역 ---->
  
  const handleClick = () => {
    alert("클릭!"); //<----화살표 함수로 alert 띄우기---->
  };
  
  return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <span>이것은 내가 만든 App컴포넌트 입니다.</span>
      <button onClick={handleClick}>클릭!</button>
      {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
    </div>
  );
}

export default App;

👇1-4 component Part2 (컴포넌트의 부모 자식 관계 연결)
Component 는 꼭 첫글자는 대문자로 !
폴더이름은 꼭 소문자로 ! 

// src/App2.js
import React from "react";

function Child() {
  return <div>연결 성공!</div>;
}

function Mother() {
  return <Child />;
}

function GrandFather() {
  return <Mother />;
}

function App() {
  return <GrandFather />;
}

export default App;

👇1-5 JSX 문법 (JSX에서 style 줄 때 2가지 방법)

function App() {
//<p style={{color:'orange', fontSize: '20px'}}>orange</p>

또는 //변수로 줄 수 있는

const styles = {
color: 'orange',
fontSize: '20px'
};

👇1-9 State Part 1

State ?
Component 내부에서 바뀔 수 있는 값, State를 사용할 때는 'useState'라는 것을 사용

🌞우리가 State를 이용해야 하는 이유.
우리가 배웠던 Component에는 LifeCycle이라는 개념이 있고 LifeCycle에 따라서 이 화면이 값이 변했을 때 그 변화된 값을 화면에 다시 리렌더링 시켜주기 위한 조건들이 있다.
그 조건들 중 하나가 State가 변경되었을 때이다.
let으로 선언해서 그 값을 새로운 값에 할당시켜 줄 수는 있지만, React에 의하면 변경된 값이 화면에 바로 반영되지 않는다. -> "State가 바뀌었다고 인식하지 못하기 때문"
그래서 React에서 변화를 감지하고 화면을 즉시 리렌더링 시켜주기 위해서 State를 이용해야한다.

<useState를 이용해서 State를 생성하는 코드>

const[Value, setValue]=useState(초기값)

빈배열의 첫번째 자리(Value)에는 State의 이름이 들어감.
두번째 자리(serValue)에는 set을 붙이고 State의 이름을 붙이게 되는데 첫번째 자리에서 선언했던 State의 이름. / State를 변경할 때 사용하는 함수.

useState에 괄화 안의 인자에는 State의 원하는 초기값(=initialState).

State는 새로고침하면 다시 초기값으로 바뀜.

<🌟더 알아보면 좋은 키워드🌟>

Hook?
React에서만 제공하는 React에서만 존재하는 개념이자 기능(Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수)
React에서 굉장히 중요한 개념❗

<📌더 알아보면 좋은 내용들📌>
🔍Q1. 우리가 배운 useState외에도 다른 Hook들은 무엇이 있을까?

  • useEffect : 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다. React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것이다.
  • useContext : 컴포넌트를 중첩하지 않고도 React context를 구독할 수 있게 해준다.
  • useReducer : 복잡한 컴포넌트들의 state를 reducer로 관리할 수 있게 해준다.
  • 이 외에도 useMemo, useCallback, useRef, useImperativeHandle, useDebugValue 등이 있다.

🔍Q2. State를 선언해 줄 때 사용한 const는 변경할 수 없는 상수인데 어떻게 State를 이용해서 값을 변경할 수 있었을까?

  • useState로 상태가 업데이트 될때, state값이 변경되는 것이 아니라, 재렌더링이 일어나게 되고 state는 항상 최신 상태의 값을 사용하기 때문이다.
  • 이전의 state 변수는 컴포넌트 함수가 실행되면서 매번 새로운 const 변수가 실행된다.const로 선언함으로 state 변수를 직접 수정하는 것을 방지하고, setState를 사용하게 하기 위함이 const로 선언되는 이유이다.

🔍Q3. Component가 리렌더링 되는 조건에는 어떤것들이 있을까?
1. 자신의 상태가 변경될 때(state 변경)
2. 부모 컴포넌트가 리렌더링 될 때
3. 자신이 전달받은 props가 변경될 때(props)
4. forceUpdate 함수가 실행될 때

👇1-10 State Part 2

<button에서의 useState>

function App() {
function onClickHandler() {
console.log("hello, button")
}
return (
<div>
  <button onClick={onClickHandler}>버튼</button>
</div>
);
}

<State를 이벤트 핸들러와 연결>

// src/App.js
import React, { useState } from "react";

function App() {
  function onClickHandler() {
    setName("누렁이");
  }
  const [name, setName] = useState("길동이");
  return (
    <div>
      {name}
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;
<input에서의 useState>
// src/App.js
import React, { useState } from "react";

const App() => {
  const [Value, setValue] = useState("");
  return (
    <div>
      {name}
      <input type="text" />
    </div>
  );
};

export default App;

<State를 핸들러와 연결>

// src/App.js
import React, { useState, value } 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;

불변성 ?
메모리에 있는 값을 변경할 수 없는 것

자바스크립트의 데이터 형태 (변수가 메모리에 저장되는 방식과 연관됨)

  • 원시데이터 : 불변성 O
  • 객체, 배열, 함수 : 불변성 X

🌟React에서 데이터에 불변성을 지켜주어야하는 이유
: React에서는 화면을 리렌더링 할지 말지를 결정할 때 State의 변화를 확인한다.
State가 변했으면 리렌더링, 변하지않았으면 리렌더링 하지 않음.

State가 변했는지 안변했는지 알 수 있는 방법
: State 변화 전과 후의 메모리 주소를 비교하는 것.

React에서 원시데이터가 아닌 데이터를 수정할 때 불변성을 지켜주지 않고 직접 수정해버리면, 값은 바뀌지만 메모리 주소는 변함이 없다.
그래서 개발자는 해당 값을 바꿨지만 React에서는 State가 변했다는 것을 인지하지 못하게 된다. 그래서 리렌더링이 일어나야 할 상황임에도 리렌더링을 할 수 없게 된다.

👇1-11 컴포넌트와 렌더링

Component ?
React의 핵심빌딩블록 중 하나로 UI요소를 표현하는 최소한의 단위이며 화면에 특정부분이 어떻게 생기지 정하는 선언체

명령형 프로그래밍 / 선언형프로그래밍
명령형-어떻게(How)
:프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태
선언형-무엇(What)
:제어의 흐름보다는 목적을 중요시 여기는 형태

렌더링 ?
React에서의 렌더링은 Component가 현재 Props와 State의 상태에 기초하여 UI를 어떻게 구성할지 Component에게 요청하는 작업

🌞렌더링이 일어나는 프로세스🌞
1. 렌더링 일으키는 것은 (triggering)- UI를 주문하고 주방으로 전달하는 것
2. 렌더링한다는 것은 (rendering)- 주방에서 컴포넌트가 UI를 만들고 준비하는 것
3. 렌더링 결과는 실제 DOM에 커밋한다는 것은 (commit) - 리액트가 준비된 UI를 손님 테이블에 올려놓는 것

🌞(1) 렌더링 트리거

  • 렌더링이 발생하는 경우
  1. 첫 리액트 앱을 실행했을 때
  2. 현재 리액트 내부에 어떤 상태(state)에 변경이 발생했을 때.
    • 컴포넌트 내부 state가 변경되었을 때
    • 컴포넌트에 새로운 props가 들어올 때,
    • 상위 부모 컴포넌트에서 위에 두 이유로 렌더링이 발생했을 때

🌞(2) 리렌더링

컴포넌트 상태에 변화가 생기면 리렌더링이 발생합니다. 이때 여러 상태가 변경됐다면 리액트는 이를 큐 자료구조에 넣어 순서를 관리합니다.

  1. 주방 예시를 다시 들어보면 리렌더링은 음식점 손님이 첫 주문 이후에 갈증이 생겨 추가로 음료를 주문하거나 처음 받은 음식이 마음에 들지 않아 새로운 메뉴를 주문하는 것과 같습니다.
  2. 새로운 UI주문(리렌더링)이 일어나면 리액트가 변경된 내용을 주방에 있는 요리사인 컴포넌트에 전달하고 컴포넌트는 새로운 변경된 주문을 토대로 새로운 요리(UI)를 만듭니다.
  3. 새롭게 만들어진 요리(렌러딩 결과)는 리액트에 의해 다시 손님 테이블에 올려집니다(DOM에 반영 - commit phase).

(3) 브라우저 렌더링

브라우저의 렌더링과 리액트의 렌더링은 엄연히 다른 독립적인 프로세스입니다. 렌더링이 완료되고 React가 DOM을 업데이트한 후 브라우저는 화면을 그립니다. 이 프로세스를 "브라우저 렌더링"이라고 하지만 혼동을 피하기 위해 📌"페인팅"이라고도 합니다.

👇1-12 Counter 만들기
익명함수로..
+를 누를때마다 1씩 더해지기, -를 누를 때마다 1씩 줄어들기
<익명함수 형태>
__={() => {}}

// src/App.js
import React, { useState } from "react";

const App() {
  const [Number, setNumber] = useState(0)
  return <div>{Number}
  <button onClick={() => {setNumber(number+1)}}>+</button>
  <button onClick={() => {setNumber(number-1)}}>-</button>
  </div>
}
export default App;

💟참고자료

Hook
값이 변하는 State를 변할 수 없는 상수 const에 선언하는 이유
Component가 리렌더링 되는 조건

profile
졍이🥨
Front-End :)
이전 포스트

Weekly I Learned-02

다음 포스트

Today I Learned-10

0개의 댓글