37일차

🐧

37일차

 

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

Ch 6. 리액트 실전 활용

 

---

 

 

Ch 6. 리액트 실전 활용

 

 

 🔗 HOC (Higher Order Component)  : <컴포넌트> 를 인자로 받아 <새로운  컴포넌트> 를 리턴하는 함수

 

https://ko.reactjs.org/docs/higher-order-components.html

고차 컴포넌트 – React

https://github.com/mridgway/hoist-non-react-statics

GitHub - mridgway/hoist-non-react-statics: Copies non-react specific statics from a child component to a parent component

 

HOC = function(컴포넌트) { return 새로운 컴포넌트; }

 

• connect()
• createFragmentContainer()
• withRouter()

 

 

 🔗 Controlled Component 와 Uncontrolled Component 

 

 

• Controlled Component

https://ko.reactjs.org/docs/forms.html#controlled-components

폼 – React

 

• Uncontrolled Component

https://ko.reactjs.org/docs/uncontrolled-components.html

비제어 컴포넌트 – React

 

// ./App.js

import logo from "./logo.svg";
import "./App.css";
import ControlledComponent from "./components/ControlledComponent";
import UncontrolledComponent from "./components/UncontrolledComponent";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <ControlledComponent />
        <UncontrolledComponent />
      </header>
    </div>
  );
}

export default App;

// ./components/ControlledComponent.jsx

import React from "react";

class ControlledComponent extends React.Component {
  state = {
    value: "",
  };

  render() {
    const { value } = this.state;
    return (
      <div>
        <input value={value} onChange={this.change} />
        <button onClick={this.click}>전송</button>
      </div>
    );
  }

  change = (e) => {
    console.log(e.target.value);
    this.setState({ value: e.target.value });
  };

  click = () => {
    console.log(this.state.value);
  };
}

export default ControlledComponent;

// UncotrolledComponents.jsx

import React from "react";

class UncontrolledComponent extends React.Component {
  inputRef = React.createRef();

  render() {
    console.log("initial render", this.inputRef);
    return (
      <div>
        <input ref={this.inputRef} />
        <button onClick={this.click}>전송</button>
      </div>
    );
  }

  componentDidMount() {
    console.log("componentDidMount", this.inputRef);
  }

  click = () => {
    // input 앨리먼트의 현재 상태 값(value) 을 꺼내서 전송한다.
    // const input = document.querySelector("#my-input");
    // console.log(input.value);

    console.log(this.inputRef.current.value);
  };
}

export default UncontrolledComponent;