39일차

🐙

39일차

 

Part 10. React 로 쇼핑몰 만들기 (React 기본)

Ch 8. React Testing

Ch 9. React Advanced

 

---

 

 

Ch 8. React Testing

 

 

 🔗 JavaScript Unit Test & Jest 사용하기 

 

https://jestjs.io/docs/expect

Expect · Jest

https://github.com/testing-library/jest-dom

GitHub - testing-library/jest-dom: Custom jest matchers to test the state of the DOM

 

$ npm i jest -D
$ npm test # test 실행
$ npx jest --watchAll # test 자동 실행

// pakeage.json

{
  "scripts": {
    "test": "jset"
  },
  ...

// ./example.test.js

describe("expect test", () => {
  it("37 to equal 37", () => {
    expect(37).toBe(37);
  });
  
  it("{age: 39} to equal {age: 39}", () => {
    expect({ age: 39 }).toEqual({ age: 39 });
  });
  
  it(".toHaveLength", () => {
    expect("hello").toHaveLength(5);
  });
  
  it(".toHaveProperty", () => {
    expect({ name: "Mark" }).toHaveProperty("name");
    expect({ name: "Mark" }).toHaveProperty("name", "Mark");
  });
  
  it(".toBeDefined", () => {
    expect({ name: "Mark" }.name).toBeDefined();
  });
  
  it(".toBeFalsy", () => {
    expect(false).toBeFalsy();
    expect(0).toBeFalsy();
    expect("").toBeFalsy();
    expect(null).toBeFalsy();
    expect(undefined).toBeFalsy();
    expect(NaN).toBeFalsy();
  });
  
  it(".toBeGreaterThan", () => {
    expect(10).toBeGreaterThan(9);
  });
  
  it(".toBeGreaterThanOrEqual", () => {
    expect(10).toBeGreaterThanOrEqual(10);
  });
  
  it(".toBeInstanceOf", () => {
    class Foo {}
    expect(new Foo()).toBeInstanceOf(Foo);
  });
});

 

 

 

 🔗 React Component Test 

 

$ npm test # test 실행

 

 

 🔗 testing-library/react 활용하기 

 

https://reactjs.org/docs/testing-recipes.html#act

Testing Recipes – React

 

// ./components/Button.test.js

import { act, fireEvent, getByText, render } from "@testing-library/react";
import Button from "./Button";

describe("Button 컴포넌트 (@testing-library/react)", () => {
  it("컴포넌트가 정상적으로 생성된다.", () => {
    const button = render(<Button />);
    expect(button).not.toBe(null);
  });

  it('"button"이라고 쓰여있는 엘리먼트는 HTMLButtonElement 이다.', () => {
    const { getByText } = render(<Button />);
    const buttonElement = getByText("button");
    expect(buttonElement).toBeInstanceOf(HTMLButtonElement);
  });

  it('버튼을 클릭하면, p 태그 안에 "버튼이 방금 눌렸다." 라고 쓰여진다.', () => {
    const { getByText } = render(<Button />);
    const buttonElement = getByText("button");
    fireEvent.click(buttonElement);
    const p = getByText("버튼이 방금 눌렸다.");
    expect(p).not.toBeNull();
    expect(p).toBeInstanceOf(HTMLParagraphElement);
  });

  it('버튼을 클릭하기 전에는, p 태그 안에 "버튼이 눌리지 않았다." 라고 쓰여진다.', () => {
    const { getByText } = render(<Button />);
    const p = getByText("버튼이 눌리지 않았다.");
    expect(p).not.toBeNull();
    expect(p).toBeInstanceOf(HTMLParagraphElement);
  });

  it('버튼을 클릭하고 5초 뒤에는, p 태그 안에 "버튼이 눌리지 않았다." 라고 쓰여진다.', () => {
    jest.useFakeTimers();

    const { getByText } = render(<Button />);
    const buttonElement = getByText("button");
    fireEvent.click(buttonElement);

    // 5초 흐른다.
    act(() => {
      jest.advanceTimersByTime(5000);
    });

    const p = getByText("버튼이 눌리지 않았다.");
    expect(p).not.toBeNull();
    expect(p).toBeInstanceOf(HTMLParagraphElement);
  });

  it("버튼을 클릭하면, 5초 동안 버튼이 비활성화 된다.", () => {
    jest.useFakeTimers();

    const { getByText } = render(<Button />);
    const buttonElement = getByText("button");
    fireEvent.click(buttonElement);

    // 비활성화
    // expect(buttonElement.disabled).toBeTruthy();
    expect(buttonElement).toBeDisabled();

    // 5초 흐른다.
    act(() => {
      jest.advanceTimersByTime(5000);
    });

    // 활성화
    // expect(buttonElement.disabled).toBeFalsy();
    expect(buttonElement).not.toBeDisabled();
  });
});

// ./components/Button.jsx

import { useEffect, useRef, useState } from "react";

const BUTTON_TEXT = {
  NORMAL: "버튼이 눌리지 않았다.",
  CLICKED: "버튼이 방금 눌렸다.",
};

export default function Button() {
  const [message, setMessage] = useState(BUTTON_TEXT.NORMAL);
  const timer = useRef();

  useEffect(() => {
    return (
      () => {
        if (timer.current) {
          clearTimeout(timer.current);
        }
      },
      []
    );
  });

  return (
    <div>
      <button onClick={click} disabled={message === BUTTON_TEXT.CLICKED}>
        button
      </button>
      <p>{message}</p>
    </div>
  );

  function click() {
    setMessage(BUTTON_TEXT.CLICKED);
    timer.current = setTimeout(() => {
      setMessage(BUTTON_TEXT.NORMAL);
    }, 5000);
  }
}

// ./App.js

import logo from "./logo.svg";
import "./App.css";
import Button from "./components/Button";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <Button />
      </header>
    </div>
  );
}

export default App;

 

 

 🔗 enzyme 활용하기 

 

 

---

 

 

Ch 9. React Advanced

 

 

 🔗 Optimizing Performance : 필요할 때만 렌더한다. = 불필요한 렌더는 하지 않는다.

 

• Reconciliation (화해)
  • 렌더 전후의 일치 여부를 판단하는 규칙
  • 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.
  • 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다

 

 

// ./App.js
// Class Component

import "./App.css";
import React from "react";

class Person extends React.PureComponent {
  // shouldComponentUpdate(previousProps) {
  //   for (const key in this.props) {
  //     if (previousProps[key] !== this.props[key]) {
  //       return true;
  //     }
  //   }
  //   return false;
  // }

  render() {
    console.log("Person render");
    const { name, age } = this.props;
    return (
      <div>
        {name} / {age}
      </div>
    );
  }
}
class App extends React.Component {
  state = {
    text: "",
    persons: [
      { id: 1, name: "Mark", age: 39 },
      { id: 2, name: "Hanna", age: 28 },
    ],
  };

  render() {
    const { text, persons } = this.state;
    return (
      <div>
        <input type="text" value={text} onChange={this._change} />
        <ul>
          {persons.map((person) => {
            return (
              <Person
                {...person}
                key={person.id}
                onClick={this.toPersonClick}
              />
            );
          })}
        </ul>
      </div>
    );
  }

  _change = (e) => {
    this.setState({
      ...this.state,
      text: e.target.value,
    });
  };

  toPersonClick = () => {};
}

export default App;

// ./App.js
// Functional Component

import "./App.css";
import React, { useState, useCallback } from "react";

const Person = React.memo(({ name, age }) => {
  console.log("Person render");
  return (
    <div>
      {name} / {age}
    </div>
  );
});

function App() {
  const [state, setState] = React.useState({
    text: "",
    persons: [
      { id: 1, name: "Mark", age: 39 },
      { id: 2, name: "Hanna", age: 28 },
    ],
  });

  const toPersonClick = React.useCallback(() => {}, []);

  const { text, persons } = state;

  return (
    <div>
      <input type="text" value={text} onChange={change} />
      <ul>
        {persons.map((person) => {
          return <Person {...person} key={person.id} onClick={toPersonClick} />;
        })}
      </ul>
    </div>
  );

  function change(e) {
    setState({
      ...state,
      text: e.target.value,
    });
  }
}

export default App;

 

 

 🔗 React.createPortal 

 

https://ko.reactjs.org/docs/portals.html

Portals – React

 

// ./public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
	...
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="modal"></div> // ⭐
    ...
  </body>
</html>

// ./components/modal.jsx

import ReactDOM from "react-dom";

const Modal = ({ children }) =>
  ReactDOM.createPortal(children, document.querySelector("#modal"));

export default Modal;

// ./App.js

import "./App.css";
import React, { useState, useCallback } from "react";
import Modal from "./components/modal";

function App() {
  const [visible, setVisible] = useState(false);

  const open = () => {
    setVisible(true);
  };

  const close = () => {
    setVisible(false);
  };

  return (
    <div>
      <button onClick={open}>open</button>
      {visible && (
        <Modal>
          <div
            style={{
              width: "100vw",
              height: "100vh",
              background: "rgba(0,0,0,0.5",
            }}
            onClick={close}
          >
            Hello
          </div>
        </Modal>
      )}
    </div>
  );
}

export default App;

 

 

 🔗 React.forwardRef 

 

https://ko.reactjs.org/docs/forwarding-refs.html

Forwarding Refs – React

 

// ./App.js

import "./App.css";
import React, { useState, useCallback, useRef } from "react";
import MyInput from "./components/MyInput";

function App() {
  const myInputRef = useRef();

  const click = () => {
    console.log(myInputRef.current.value);
  };

  return (
    <div>
      <MyInput ref={myInputRef} />
      <button onClick={click}>send</button>
    </div>
  );
}

export default App;

// ./components/MyInput.jsx

import React from "react";

export default React.forwardRef(function MyInput(props, ref) {
  return (
    <div>
      <p>MyInput</p>
      <input ref={ref} />
    </div>
  );
});