20210901 TIL

실전 리액트 프로그래밍

[컴포넌트의 속성값과 상탯값]

• 리액트 컴포넌트에서는 UI 데이터를 속성값이나 상탯값으로 관리해야 함

import React, { useState } from 'react';

// let color = 'red';
// export default function App() {
//   function onClick() {
//     color = 'blue';
//   }
//   return (
//     <button style={{ backgroundColor: color}} onClick={onClick}>
//     좋아요
//     </button>
//   )
// }

// color 값이 변경되었지만 리액트가 이 값이 변경되었다는 사실을 모르기 때문에
// 버튼 색이 빨강이다.
// 값의 변경 사실을 알려면 상탯값으로 관리를 해야한다.

export default function App() {
  const [color, setColor] = useState('red');
  function onClick() {
    setColor('blue');
  }
  return (
    <button style={{ backgroundColor: color}} onClick={onClick}>
    좋아요
    </button>
  )
}

• 부모 컴포넌트가 렌더링될 때마다 자식 컴포넌트도 렌더링(자식의 속성값이 변하지 않았을 때 굳이 렌더링 할 필요가 없을 수 있다) >> 속성값이 변경될 때만 이 컴포넌트가 렌더링되게 하려면 React.memo를 사용할 수 있다.
• 속성값은 불변 변수 / 상태값은 불변 변수가 아니다. (하지만, 불변 변수로 관리하는 것이 좋다)
• 리액트는 상태값 변경 유무를이전 값과의 단순 비교로 판단

[컴포넌트 함수의 반환값]

• 배열로 반환할 때는 항상 리액트 요소가 key를 갖고 있어야 함
• key는 렌더링을 효율적으로 하기 위해서 필요한 값, 이 값을 이용해서 가상돔에서의 연산을 효율적으로 할 수 있음
• <React.Fragment> 반환 가능 (요소의 순서가 key 역할을 함) .... <></> (축약형)
• 조건부 렌더링 (boolean 값 이용)

{count.value1 > 0 && <Title title={`현재 카운드: ${count.value1}`} />}
// && 왼쪽의 조건을 모두 만족해야 && 뒤에 있는 것이 렌더링된다.

• 리액트 Portal - html에서 root 엘리먼트 말고 다른 엘리먼트에 렌더링하고 싶을 때 사용(모달을 위해서 많이 사용되기도 함)

index.html

<div id="root"></div>
<div id="something"></div>

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter';

export default function App() {
  return (
    <React.Fragment>
      <p>안녕</p>
      <p>하세요</p>
      <Counter/>
      {
        ReactDOM.createPortal(
          <div>
            <p>안녕</p>
          </div>,
          document.getElementById('something'),
        )
      }
    </React.Fragment>
  )
}

[리액트 요소와 가상돔1]

• 리액트 요소는 리액트가 UI를 표현하는 수단
• jsx 문법은 babel이 createElement를 호출하는 코드로 변환해 준다.

const element = <a href="http://google.com">click here</a>;
const element = React.createElement(
    'a',
    { href: 'http://google.com'},
    'click here',
);

• 빠른 렌더링을 위해 돔 변경 최소화 하는 게 좋다 > 리액트는 메모리에 가상돔을 올려놓고 이전과 이후의 가상돔을 비교 > 변경된 부분만 실제 돔에 반영
• 컴포넌트의 key를 변경하게 되면, 해당 컴포넌트는 삭제됐다가 다시 추가됨
• 컴포넌트 삭제 (unmount) / 컴포넌트 추가 (mount)

[리액트 요소와 가상돔2]

• 리액트 요소 트리 - 여러 개의 요소가 트리 구조로 구성
• 가상 돔 이해하기 - 리액트에서 데이터 변경에 의한 화면 업데이트는 렌더 단계(가상 돔)에서 커밋 단계(실제 돔)를 거친다. 렌더 단계는 실제 돔에 반영할 변경 사항을 파악하는 단계이고, 커밋 단계는 파악된 변경 사항을 실제 돔에 반영하는 단계이다. 리액트는 렌더링을 할 때마다 가상 돔을 만들고 이전의 가상 돔과 비교.
• React.memo

const Title = React.memo(({ title }) => {
    return <p style={{ color: 'blue' }}>{title}</p>;
});
// title 속성값이 변경될 때만 렌더링된다.

• 최종 리액트 요소 트리를 만들기 위해서 치환되는 컴포넌트의 리액트 요소도 메모리에 저장되서 렌더 단계의 효율을 높이는데 사용됨

[리액트 훅 기초 익히기1]

리액트 훅(hook)

• 컴포넌트에 기능을 추가할 때 사용하는 함수
  → ex ) 컴포넌트에 상탯값 추가, 자식 요소에 접근
  → 리액트 16.8에 새로 추가됨
  - 그 전에는 클래스형 컴포넌트 사용
  - 클래스형 컴포넌트보다 장점이 많으며 리액트 팀에서도 훅에 집중하고 있음

• useState: 상태값 추가

const [count, setCount] = useState(0);
// const [상태값, 상태값 변경함수] = useState(초기값);

import React, { useState, useEffect } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    function onClick() {
        // setCount(count + 1);
        // setCount(count + 1);
        // 상태값 변경 함수는 비동기이면서 배치(batch)로 처리된다.
        // 만약에 리액트가 상태값 변경 함수를 동기로 처리하면 하나의 상태값 변경 함수가 호출될 때마다
        // 화면을 다시 그리기 때문에 성능 이슈가 생길 수 있다.
        setCount(v => v + 1);
        setCount(v => v + 1);
        // 상태값 변경 함수에 함수를 입력하면 처리되기 직전의 상태값을 매개변수로 받는다.

    }
    console.log('render called');
    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onClick}>증가</button>
        </div>
    );
}

• useEffect: 부수효과 처리(외부의 상태 변경)

import React, { useState, useEffect } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        document.title = `업데이트 횟수: ${count}`;
    });
    return <button onClick={() => setCount(count + 1)}>increase</button>
}

// 첫 번째 매개변수로 함수(부수효과 함수)를 입력하면, 이 함수는 컴포넌트가 렌더링된 후에 호출
// 렌더링 결과가 실제 돔에 반영되고 비동기로 호출

→ 서버 API 호출, 이벤트 핸들러 등록 등