코드스테이츠 블록체인 교육 - 7일

📖 React

• 리액트는 UI 자바스크립트 라이브러리로써 싱글 페이지 애플리케이션의 UI를 생성하는데 집중한 라이브러리입니다.
• 리액트는 자바스크립트에 HTML을 포함하는 JSX(JavaScript XML)이라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있습니다.
• 가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리입니다.

❤️ React의 UI에서 데이터를 렌더링하는 방법

화면에 무엇이든 렌더링하려면 ReactDOM.renderReact의 메서드를 사용합니다.

ReactDOM.render(element, container[, callback]);

• element : 모든 HTML 요소, JSX 또는 JSX를 반환하는 구성 요소가 될 수 있습니다.
• container : 데이터를 렌더링하려는 UI의 요소입니다.
• callback : 화면에 무언가가 렌더링되거나 다시 렌더링되면 호출되는 전달할 수 있는 선택적 함수입니다.

import React from "react";
import ReactDOM from "react-dom";
const rootElement = document.getElementById("root");
ReactDOM.render(<h1>Welcome to React!</h1>, rootElement);

1️⃣ 예제 (UI에 변화하는 데이터가 반영 ❌)

import React from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

let counter = 0;

const handleClick = () => {
  counter++;
  console.log("counter", counter);
};

const content = (
  <div>
    <button onClick={handleClick}>Increment counter</button>
    <div>Counter value is {counter}</div>
  </div>
);

ReactDOM.render(content, rootElement);

• 해당 예제를 실행할 경우 버튼을 클릭 counter하면 콘솔에서는 값이 증가합니다. 그러나 UI에서는 업데이트되지 않습니다. 페이지가 로드될 때 메서드 content를 사용하여 JSX를 한 번만 렌더링하기 때문입니다. ReactDOM.render를 다시 호출하지 않습니다. 따라서 값이 업데이트되더라도 counterUI에 표시되지 않습니다.

2️⃣ 예제 (UI에 변화하는 데이터가 반영 - 수정버젼~!)

import React from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

let counter = 0;

const handleClick = () => {
  counter++;
  console.log("counter", counter);
  renderContent();
};

const renderContent = () => {
  const content = (
    <div>
      <button onClick={handleClick}>Increment counter</button>
      <div>Counter value is {counter}</div>
    </div>
  );

  ReactDOM.render(content, rootElement);
};

renderContent();

• 여기에서는 contentJSX 및 ReactDOM.render메서드 호출을 renderContent함수 내부로 옮겼습니다. 그런 다음 정의되면 페이지로드 시 UI의 콘텐츠를 렌더링하도록 함수를 호출합니다. renderContent함수 내부에 함수 호출도 추가했습니다 handleClick. 따라서 버튼을 클릭할 때마다 renderContent함수가 호출되고 UI에 업데이트된 카운터가 표시됩니다.
• 버튼을 클릭할 때마다 전체 DOM을 다시 렌더링하는 것은 비용이 많이 든다고 생각할 수 있지만 그렇지 않습니다. React는 UI에서 변경된 사항을 확인하고 변경된 요소만 다시 렌더링하는 Virtual DOM 알고리즘을 사용하기 때문입니다. 따라서 전체 DOM이 다시 렌더링되지 않습니다.
• 그러나 여전히 UI를 업데이트할 때마다 매번 함수(renderContent) 를 호출하는 것은 좋은 방법이 아닙니다. 그래서 React는 State의 개념을 추가했습니다.

3️⃣ 예제 (UI에 변화하는 데이터가 반영 - State , class기반)

React에서 컴포넌트를 생성하는 방법은 크게 두 가지가 있습니다.

• 클래스 기반 구성 요소
• 함수 기반 구성 요소

Hook을 포함한 함수 기반 구성 요소뿐만 아니라 클래스 기반 구성 요소로 작업하는 방법을 알고 있어야 합니다.

✅ React는 State 값을 업데이트할 수 있는 기능을 제공합니다.

setState(updater, [callback])

• updater: 함수 또는 객체일 수 있음
• callback: 상태가 성공적으로 업데이트되면 실행되는 선택적 함수입니다.

setState 호출하면 전체 구성 요소와 모든 하위 구성 요소가 자동으로 다시 렌더링됩니다. renderContent 함수를 사용하여 이전에 본 것처럼 수동으로 다시 렌더링할 필요가 없습니다 .

import React from "react";
import ReactDOM from "react-dom";

class Counter extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState((prevState) => {
      return {
        counter: prevState.counter + 1
      };
    });

  	console.log("counter", this.state.counter);
}

  render() {
    const { counter } = this.state;

    return (
      <div>
        <button onClick={this.handleClick}>Increment counter</button>
        <div>Counter value is {counter}</div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Counter />, rootElement);

• 생성자 함수 내에서 먼저 super전달 props하여 호출합니다. 그런 다음 객체 counter의 속성으로 상태를 객체로 정의했습니다.
• this의 컨텍스트를 (handleClick)함수에 바인딩 하므로 함수 내부에서 handleClick에 대한 올바른 컨텍스트를 얻습니다
• 다음 (handleClick)함수 내부에서 counter 업데이트한 후, 콘솔에 기록합니다.
• render메서드 내에서 UI에 렌더링하려는 JSX를 반환합니다.

✅ setState함수는 비동기

console.log에 찍히는 값이 이전 값이 찍히는것을 확인해 볼 수 있다. 그이유는 setState 함수가 본질적으로 비동기이기 때문입니다.
setState는 값을 1씩 증가시키도록 호출했지만 counter값이 즉시 증가하지 않습니다. 함수를 호출할 때 setState전체 구성 요소가 다시 렌더링되기 때문입니다. 따라서 React는 Virtual DOM 알고리즘을 사용하여 변경해야 할 모든 것을 확인한 다음 UI의 효율적인 업데이트를 위해 다양한 검사를 수행해야 합니다.

setState는 React에서 비동기식이라는 점을 염두에 두고 코드를 작성하지 않으면 디버그하기 어려운 문제가 발생하므로 React에서 명심해야 할 매우 중요한 사항입니다.

• 수정된 handleClick함수

handleClick() {
  this.setState(
    (prevState) => {
      return {
        counter: prevState.counter + 1
      };
    },
    () => console.log("counter", this.state.counter)
  );
}

여기에서 setState함수 호출을 위해 두 개의 인수를 전달합니다.
1. 새로운 상태를 반환하는 함수이고
2. 상태가 업데이트되면 호출될 콜백 함수입니다. 콜백 함수에서 콘솔에 업데이트된 카운터 값을 기록할 뿐입니다.

• React는 업데이트된 상태 값을 즉시 얻을 수 있는 콜백 함수를 제공하지만 테스트를 위해서만 사용하는 것이 좋습니다.

📚 상태 및 메서드 선언을 단순화하는 방법

constructor(props) {
  super(props);

  this.state = {
    counter: 0
  };

  this.handleClick = this.handleClick.bind(this);
}

• 함수를 this 이용해 바인딩을 해주어야 한다.
• state를 선언하려면 생성자를 만들고 super내부에 호출을 추가한 다음 state를 선언할 수 있습니다.

✅ arrow functions활용한 단순화 정의

state = {
   counter: 0
};

handleClick = () => {
  this.setState((prevState) => {
    return {
      counter: prevState.counter + 1
    };
  });
};

• 화살표 함수에는 자체 this - context가 없으므로 context 클래스로 사용하므로 메서드 .bind를 사용할 필요가 없습니다.

• 이렇게 하면 모든 이벤트 핸들러를 계속 바인딩할 필요가 없으므로 코드가 훨씬 간단하고 이해하기 쉽습니다.

✅ 한줄로 변환가능

this.setState((prevState) => ({ counter: prevState.counter + 1 }));

📚 React에서 객체를 State 업데이터로 사용하는 방법

위의 코드에서 첫 번째 인수로 함수를 사용 setState했지만 객체를 인수로 전달할 수도 있습니다.

아래의 예제는 input값에 입력받은 값을 화면UI에 표기해줍니다.

class User extends React.Component {
  state = {
    name: "Mike"
  };

  handleChange = (event) => {
    const value = event.target.value;
    this.setState({ name: value });
  };

  render() {
    const { name } = this.state;

    return (
      <div>
        <input
          type="text"
          onChange={this.handleChange}
          placeholder="Enter your name"
          value={name}
        />
        <div>Hello, {name}</div>
      </div>
    );
  }
}

📚 React의 함수기반 구성요소에서 state를 사용하는 방법

• 함수기반 구성 요소는 코드를 더 짧고 이해하고 테스트하기 쉽게 만듭니다.
• 라이프사이클 메서드가 없기 때문에 실행 속도가 조금 더 빠릅니다.
• React.Component클래스 기반 구성 요소에서 확장한 클래스에서 가져온 추가 데이터가 없습니다.

const User = (props) => {
  const { name, email } = props;
  const { first, last } = name;

  return (
    <div>
      <p>
        Name: {first} {last}
      </p>
      <p>Email: {email} </p>
      <hr />
    </div>
  );
};

📚 React Hooks에서 State를 사용하는 방법

버전 16.8.0부터 React는 Hooks를 도입했습니다. 그리고 그들은 React에서 코드를 작성하는 방식을 완전히 바꿨습니다. React Hooks를 사용하면 기능 구성 요소 내에서 상태 및 라이프사이클 메서드를 사용할 수 있습니다.

const [counter, setCounter] = useState(0);

• Hooks는 useState의 첫 번째 값이 state의 현재 값인 배열을 반환합니다.
• 두 번째 값은 setState메서드와 유사한 state를 업데이트하는데 사용할 함수입니다.

import React, { useState } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <div>
        <p>Counter value is: {counter} </p>
        <button onClick={() => setCounter(counter + 1)}>Increment</button>
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

• Hooks를 사용하려면 useState첫 번째 줄에서 했던 것처럼 가져와야 합니다.
• App 구성 요소 내에서 초기 값 useState으로 0을 전달하고 구조화 구문을 사용하여 호출합니다. 변수에 의해 반환된 배열 값을 저장했습니다.
• setCounter에서와 같이 state를 업데이트하는데 사용되는 함수이름 앞에 set키워드를 사용하는 것이 일반적인 규칙입니다. - setCounter.
• 증가 버튼을 클릭하면 인라인 함수를 정의하고 setCounter업데이트된 카운터 값을 전달하여 함수를 호출합니다.
• 이미 카운터 값이 있으므로 이를 사용하여 다음을 사용하여 카운터를 증가시켰습니다. - setCounter(counter + 1)
• 인라인 onClick 핸들러에는 단일 문이 있으므로 코드를 별도의 함수로 이동할 필요가 없습니다. 핸들러 내부의 코드가 복잡해지면 그렇게 할 수 있습니다.

📚 concat 함수란?

두 개의 문자열을 하나의 문자열로 만들어주는 역활을 한다.
입력값을 문자열 대신 배열을 사용하면 두 개의 배열을 하나의 배열로 만들어준다.

	var str1 = "con";
	var str2 = "cat";
	console.log(str1.concat(str2));  // concat