38일차

🙀

38일차

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

Ch 7. Hooks & Context

Ch 6. Hooks & Context

🔗 Basic Hooks : 컴포넌트의 state와 관련된 로직을 재사용할 수 있다.

Functional Component != Stateless Componet because state hooks

https://ko.reactjs.org/docs/hooks-intro.html

useState: state 를 대체할 수 있다.

// ./App.js

...
import Example1 from "./components/Example1";
import Example2 from "./components/Example2";
import Example3 from "./components/Example3";

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

export default App;

// ./components/Example1.jsx
// Class Component

import React from "react";

export default class Example1 extends React.Component {
  state = { count: 0 };

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

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={this.click}>Click me</button>
      </div>
    );
  }

  click = () => {
    this.setState({ count: this.state.count + 1 });
  };
}

// ./component/Example2.jsx
// Functional Component

import React from "react";

export default function Example2() {
  const [count, setCount] = React.useState(0); // Hooks

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={click}>Click me</button>
    </div>
  );

  function click() {
    setCount(count + 1);
  }
}

// ./components/Example3.jsx
// Functional Compnent - Object

import React from "react";

// useState => count
// useState => {count: 0}
export default function Example3() {
  const [state, setState] = React.useState({ count: 0 }); // Hooks

  return (
    <div>
      <p>You clicked {state.count} times</p>
      <button onClick={click}>Click me</button>
    </div>
  );

  function click() {
    setState((state) => ({
      count: state.count + 1,
    }));
  }
}

useEffect: 라이프 사이클 훅을 대체할 수 있다. (componentDidMount, componentDidUpdate, componentWillUnmont)

https://rinae.dev/posts/a-complete-guide-to-useeffect-ko

[번역] useEffect 완벽 가이드

Dan Abramov의 'A Complete Guide to useEffect 번역'

rinae.dev

// ./App.jsx

...
import Example4 from "./components/Example4";
import Example5 from "./components/Example5";

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

export default App;

// ./components/Example4.jsx
// Class Component

import React from "react";

export default class Example4 extends React.Component {
  state = { count: 0 };

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

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={this.click}>Click me</button>
      </div>
    );
  }

  componentDidMount() {
    console.log("componenDidMount", this.state.count);
  }

  componentDidUpdate() {
    console.log("componentDidUpdate", this.state.count);
  }

  click = () => {
    this.setState({ count: this.state.count + 1 });
  };
}

// ./component/Example5.jsx
// Functional Component

import React from "react";

export default function Example5() {
  const [count, setCount] = React.useState(0); // Hooks

  // 최초
  React.useEffect(() => {
    console.log("componentDidMount");

    return () => {
      // cleanup
      // componentWillUnmount
    };
  }, []);

  // 최초 & count가 업데이트 될 때마다
  React.useEffect(() => {
    console.log("componentDidMount & componentDidUpdate by count", count);

    return () => {
      //cleanup
      console.log("cleanup by count", count);
    };
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={click}>Click me</button>
    </div>
  );

  function click() {
    setCount(count + 1);
  }
}

useContext

🔗 Custom Hooks (useSomething)

// ./App.js

...
import useWindowWith from "./hooks/useWindowWidth";

function App() {
  const width = useWindowWith();

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

export default App;

// ./hooks/useWindowWidth.js

import React, { useEffect } from "react";

export default function useWindowWith() {
  const [width, setWidth] = React.useState(window.innerWidth);

  useEffect(() => {
    const resize = () => {
      setWidth(window.innerWidth);
    };
    window.addEventListener("resize", resize);

    return () => {
      window.removeEventListener("resize", resize);
    };
  }, []);

  return width;
}

useHasMouted vs withHasMounted

...
import withHasMounted from "./hocs/withHasMounted";
import useHasMounted from "./hooks/useHasMounted";

function App({ hasMounted }) {
  const width = useWindowWith();
  const hasMountedFromHooks = useHasMounted();

  console.log(hasMounted, hasMountedFromHooks);

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

export default withHasMounted(App);

// ./hooks/useHasMounted.js

import { useEffect, useState } from "react";

export default function useHasMounted() {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  return hasMounted;
}

// ./hocs/withHasMounted.jsx

import React from "react";

export default function withHasMounted(Component) {
  class NewComponent extends React.Component {
    state = {
      hasMounted: false,
    };
    render() {
      const { hasMounted } = this.state;
      return <Component {...this.props} hasMounted={hasMounted} />;
    }
    componentDidMount() {
      this.setState({ hasMounted: true });
    }
  }

  NewComponent.displayName = `withHasMountder(${Component.name})`;

  return NewComponent;
}

🔗 Additional Hooks

render 사이에 어떤 상태를 유지해준다.

useReducer

// ./App.js

import Example6 from "./components/Example6";
import useWindowWith from "./hooks/useWindowWidth";
import withHasMounted from "./hocs/withHasMounted";
import useHasMounted from "./hooks/useHasMounted";

function App({ hasMounted }) {
  const width = useWindowWith();
  const hasMountedFromHooks = useHasMounted();

  console.log(hasMounted, hasMountedFromHooks);

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

export default withHasMounted(App);

import { useReducer } from "react";

// reducer: state 를 변경하는 로직이 담겨 있는 함수
const reducer = (state, action) => {
  if (action.type === "PLUS") {
    return {
      count: state.count + 1,
    };
  }
  return state;
};

// dispatch: action 객체를 넣어서 실행

// action: 객체이고 필수 프로퍼티로 type 을 가진다.

export default function Example6() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>You clicked {state.count} times</p>
      <button onClick={click}>Click me</button>
    </div>
  );

  function click() {
    dispatch({ type: "PLUS" });
  }
}

useCallback, useMemo

// ./App.js

import Example7 from "./components/Example6";
import useWindowWith from "./hooks/useWindowWidth";
import withHasMounted from "./hocs/withHasMounted";
import useHasMounted from "./hooks/useHasMounted";

function App({ hasMounted }) {
  const width = useWindowWith();
  const hasMountedFromHooks = useHasMounted();

  console.log(hasMounted, hasMountedFromHooks);

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

export default withHasMounted(App);

// ./components/Example7.jsx

import { useCallback, useMemo, useState } from "react";

function sum(persons) {
  console.log("sum...");
  return persons.map((person) => person.age).reduce((l, r) => l + r, 0);
}

export default function Example7() {
  const [value, setValue] = useState("");
  const [persons] = useState([
    { name: "Mark", age: 39 },
    { name: "Hanna", age: 28 },
  ]);

  const count = useMemo(() => {
    return sum(persons);
  }, [persons]);

  const click = useCallback(() => {
    console.log(value);
  }, []);

  return (
    <div>
      <input value={value} onChange={change} />
      <p>{count}</p>
      <button onClick={click}>click</button>
    </div>
  );

  function change(e) {
    setValue(e.target.value);
  }
}

useRef, useImperativeHandle

// ./App.js

import Example8 from "./components/Example6";
import useWindowWith from "./hooks/useWindowWidth";
import withHasMounted from "./hocs/withHasMounted";
import useHasMounted from "./hooks/useHasMounted";

function App({ hasMounted }) {
  const width = useWindowWith();
  const hasMountedFromHooks = useHasMounted();

  console.log(hasMounted, hasMountedFromHooks);

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

export default withHasMounted(App);

// ./components/Example8.jsx

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

export default function Example8() {
  const [value, setValue] = useState("");
  const input1Ref = createRef();
  const input2Ref = useRef();

  console.log(input1Ref.current, input2Ref.current);
  return (
    <div>
      <input value={value} onChange={change} />
      <input ref={input1Ref} />
      <input ref={input2Ref} />
    </div>
  );

  function change(e) {
    setValue(e.target.value);
  }
}

useLayoutEffect
useDebugValue

🔗 React Router Hooks

https://v5.reactrouter.com/web/api/Hooks

Declarative routing for React apps at any scale | React Router

Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our smallest and most powerful package yet.

reactrouter.com

🔗 컴포넌트 간 통신

하위 컴포넌트를 변경하기

// ./App.js

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

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

export default App;

// ./components/A.jsx

import { useState } from "react";

export default function A() {
  const [value, setValue] = useState("아직 안바뀜");

  return (
    <div>
      <B value={value} />
      <button onClick={click}>E 의 값을 바꾸기</button>
    </div>
  );

  function click() {
    setValue("E 의 값을 변경");
  }
}

function B({ value }) {
  return (
    <div>
      <p>여긴 B</p>
      <C value={value} />
    </div>
  );
}

function C({ value }) {
  return (
    <div>
      <p>여긴 C</p>
      <D value={value} />
    </div>
  );
}

function D({ value }) {
  return (
    <div>
      <p>여긴 D</p>
      <E value={value} />
    </div>
  );
}

function E({ value }) {
  return (
    <div>
      <p>여긴 E</p>
      <h3>{value}</h3>
    </div>
  );
}

상위 컴포넌트를 변경하기

// ./components/A.jsx

import { useState } from "react";

export default function A() {
  const [value, setValue] = useState("아직 안바뀜");

  return (
    <div>
      <p>{value}</p>
      <B setValue={setValue} />
    </div>
  );
}

function B({ setValue }) {
  return (
    <div>
      <p>여긴 B</p>
      <C setValue={setValue} />
    </div>
  );
}

function C({ setValue }) {
  return (
    <div>
      <p>여긴 C</p>
      <D setValue={setValue} />
    </div>
  );
}

function D({ setValue }) {
  return (
    <div>
      <p>여긴 D</p>
      <E setValue={setValue} />
    </div>
  );
}

function E({ setValue }) {
  return (
    <div>
      <p>여긴 E</p>
      <button onClick={click}>클릭</button>
    </div>
  );

  function click() {
    setValue("A 의 값을 변경");
  }
}

🔗 ContextAPI : 하위 컴포넌트 전체에 데이터를 공유하는 법

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

Context – React

A JavaScript library for building user interfaces

ko.reactjs.org

// ./App.jsx

import logo from "./logo.svg";
import "./App.css";
import Example1 from "./components/Example1";
import Example2 from "./components/Example2";
import Example3 from "./components/Example3";

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

export default App;

데이터를 Set 하기 (가장 상위 컴포넌트 => 프로바이더)
1. 일단 컨텍스트를 생성한다.
2. 컨텍스트.프로바이더를 사용한다.
3. value 를 사용

// ./contexts/PersonContext.js

import React from "react";

const PersonContext = React.createContext();

export default PersonContext;

// ./index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import PersonContext from "./contexts/PersonContext";

const persons = [
  { id: 0, name: "Mark", age: 39 },
  { id: 1, name: "Hanna", age: 28 },
];

ReactDOM.render(
  <React.StrictMode>
    <PersonContext.Provider value={persons}>
      <App />
    </PersonContext.Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

...

데이터를 Get 하기 (1) - Cousumer
1. 컨텍스를 가져온다.
2. 컨텍스트.컨슈머를 사용한다.
3. value 를 사용

// ./components/Example1.jsx

import PersonContext from "../contexts/PersonContext";

export default function Example1() {
  return (
    <PersonContext.Consumer>
      {(persons) => (
        <ul>
          {persons.map((person) => (
            <li>{person.name}</li>
          ))}
        </ul>
      )}
    </PersonContext.Consumer>
  );
}

데이터를 Get 하기 (2) - class
1. static contextType 에 컨텍스트를 설정한다.
2. this.context => value 이다.

// ./components/Example2.jsx

import React from "react";
import PersonContext from "../contexts/PersonContext";

export default class Example2 extends React.Component {
  // static contextType = PersonContext;

  render() {
    const persons = this.context;
    return (
      <ul>
        {persons.map((person) => (
          <li>{person.name}</li>
        ))}
      </ul>
    );
  }
}

Example2.contextType = PersonContext;

데이터를 Get 하기 (3) - functional ⭐
- useContext 로 컨텍스트를 인자로 호출한다.
- useContext 의 리턴이 value 이다.

// ./components/Example3.jsx

import { useContext } from "react";
import PersonContext from "../contexts/PersonContext";

export default function Example3() {
  const persons = useContext(PersonContext);
  return (
    <ul>
      {persons.map((person) => (
        <li>{person.name}</li>
      ))}
    </ul>
  );
}

'💬 > ㅍㅅㅌㅋㅍㅅ 챌린지' 카테고리의 다른 글

40일차 (0)	2022.03.24
39일차 (0)	2022.03.24
37일차 (0)	2022.03.23
36일차 (0)	2022.03.21
35일차 (0)	2022.03.21

👩‍💻 Hong Yujin

38일차

🙀

38일차

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

Ch 7. Hooks & Context

Ch 6. Hooks & Context

'💬 > ㅍㅅㅌㅋㅍㅅ 챌린지' 카테고리의 다른 글

티스토리툴바

38일차

🙀

38일차

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

Ch 7. Hooks & Context

Ch 6. Hooks & Context

'💬 > ㅍㅅㅌㅋㅍㅅ 챌린지' 카테고리의 다른 글

'💬/ㅍㅅㅌㅋㅍㅅ 챌린지' Related Articles

티스토리툴바