리액트 실전 활용법

High Order Component

Controlled Component 와 Uncontrolled Component

[Project] Login 요청하기

localStorage

Rest API 로 데이터 가져오기

[Homework] 개발 서적 평가 서비스 책 추가하기

Lead Software Engineer @ProtoPie

Microsoft MVP

TypeScript Korea User Group Organizer

Marktube (Youtube)

Mark Lee

이 웅재

HOC

Higher Order Component

advanced technique in React for reusing component logic.
not part of the React API
a pattern that emerges from React’s compositional nature.

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

HOC 는

<컴포넌트> 를 인자로 받아

<새로운 컴포넌트> 를 리턴하는

함수

컴포넌트

props

UI

HOC

컴포넌트

새로운

컴포넌트

you already know HOC !

import React from "react";
import { withRouter } from "react-router-dom";

const LoginButton = props => {
  console.log(props);
  function login() {
    setTimeout(() => {
      props.history.push("/");
    }, 1000);
  }
  return <button onClick={login}>로그인하기</button>;
};

export default withRouter(LoginButton);

withRouter()

보통 with 가 붙은 함수가 HOC 인 경우가 많다.

export default withRouter(LoginButton);

사용하는 법

Use HOCs For Cross-Cutting Concerns
Don’t Mutate the Original Component. Use Composition.
Pass Unrelated Props Through to the Wrapped Component
Maximizing Composability
Wrap the Display Name for Easy Debugging

withRouter(LoginButton)

주의할 점

Don’t Use HOCs Inside the render Method
Static Methods Must Be Copied Over
Refs Aren’t Passed Through (feat. React.forwardRef)

render() {
  // A new version of EnhancedComponent is created on every render
  // EnhancedComponent1 !== EnhancedComponent2
  const EnhancedComponent = enhance(MyComponent);
  // That causes the entire subtree to unmount/remount each time!
  return <EnhancedComponent />;
}

function enhance(WrappedComponent) {
  class Enhance extends React.Component {/*...*/}
  // Must know exactly which method(s) to copy :(
  Enhance.staticMethod = WrappedComponent.staticMethod;
  return Enhance;
}

// Define a static method
WrappedComponent.staticMethod = function() {/*...*/}
// Now apply a HOC
const EnhancedComponent = enhance(WrappedComponent);

// The enhanced component has no static method
typeof EnhancedComponent.staticMethod === 'undefined' // true

import hoistNonReactStatic from 'hoist-non-react-statics';
function enhance(WrappedComponent) {
  class Enhance extends React.Component {/*...*/}
  hoistNonReactStatic(Enhance, WrappedComponent);
  return Enhance;
}

// Instead of...
MyComponent.someFunction = someFunction;
export default MyComponent;

// ...export the method separately...
export { someFunction };

// ...and in the consuming module, import both
import MyComponent, { someFunction } from './MyComponent.js';

Controlled Component

Uncontrolled Component

npx create-react-app controlled-uncontrolled

상태를 가지고 있는 엘리먼트

input
select
textarea
...

엘리먼트의 '상태' 를 누가 관리하느냐

엘리먼트를 가지고 있는 컴포넌트가 관리
- Controlled
엘리먼트의 상태를 관리하지 않고, 엘리먼트의 참조만 컴포넌트가 소유
- Uncontrolled

import React from 'react';

export default class Controlled extends React.Component {
  state = { value: '' };

  render() {
    return (
      <div>
        <input />
      </div>
    );
  }
}

components/Controlled.jsx (1)

import React from 'react';

export default class Controlled extends React.Component {
  state = { value: '' };

  render() {
    const { value } = this.state;
    return (
      <div>
        <input value={value} onChange={this._change} />
      </div>
    );
  }

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

components/Controlled.jsx (2)

import React from 'react';

export default class Controlled 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);
  };
}

components/Controlled.jsx (3)

import React from 'react';

export default class Uncontrolled extends React.Component {
  _input = React.createRef();

  render() {
    return (
      <div>
        <input ret={this._input} />
      </div>
    );
  }
}

components/Uncontrolled.jsx (1)

import React from 'react';

export default class Uncontrolled extends React.Component {
  _input = React.createRef();

  render() {
    return (
      <div>
        <input ref={this._input} />
        <button onClick={this._click}>전송</button>
      </div>
    );
  }

  _click = () => {
    console.log('최종 결과', this._input.current.value);
  };
}

components/Uncontrolled.jsx (2)

import React from 'react';

const Uncontrolled = () => {
  const inputRef = React.createRef();

  function click() {
    console.log('최종 결과', inputRef.current.value);
  }
  
  return (
    <div>
      <input ref={inputRef} />
      <button onClick={click}>전송</button>
    </div>
  );
};

export default Uncontrolled;

components/Uncontrolled.jsx (2)

[Project] Login 요청하기

git clone -b fc-school https://github.com/2woongjae/reactjs-books-review.git

// src/components/SignForm.jsx

import React from "react";
import { Input, Button, Divider, Col } from "antd";
import styled from "styled-components";
import { Link } from "react-router-dom";

const SigninForm = () => {
  const emailInput = React.createRef();
  const passwordInput = React.createRef();

  function click() {
    console.log(
      emailInput.current.state.value,
      passwordInput.current.state.value
    );
  }

  return (
    <Col
      span={12}
      style={{
        verticalAlign: "top"
      }}
    >
      <form>
        <Title>Log In. Start Searching.</Title>
        <InputTitle>
          Email
          <StyledSpan />
        </InputTitle>
        <InputArea>
          <StyledInput
            placeholder="Email"
            autoComplete="email"
            name="email"
            ref={emailInput}
          />
        </InputArea>
        <InputTitle top={10}>
          Password
          <StyledSpan />
        </InputTitle>
        <InputArea>
          <StyledInput
            type="password"
            autoComplete="current-password"
            ref={passwordInput}
          />
        </InputArea>
        <ButtonArea>
          <StyledButton size="large" loading={loading} onClick={click}>
            Sign In
          </StyledButton>
        </ButtonArea>
        <DividerArea>
          <Divider />
        </DividerArea>
        <LinkArea>
          <LinkTitle>Need to create an account?</LinkTitle>
          <LinkButtonArea>
            <Link to="/signup">
              <LinkButton>Sign up</LinkButton>
            </Link>
          </LinkButtonArea>
        </LinkArea>
        <LinkArea>
          <LinkTitle>Forgot your password?</LinkTitle>
          <LinkButtonArea>
            <Link to="/forgot">
              <LinkButton>Recovery</LinkButton>
            </Link>
          </LinkButtonArea>
        </LinkArea>
      </form>
    </Col>
  );
};

export default SigninForm;

const Title = styled.div`
  padding-top: 10px;
  padding-bottom: 10px;
  text-transform: uppercase;
  font-family: Roboto;
  font-size: 24px;
  font-weight: bold;
  margin-top: 60px;
  text-align: center;
`;

const InputTitle = styled.div`
  font-family: Roboto;
  font-size: 12px;
  font-weight: bold;
  margin-top: ${props => props.top || "40"}px;
  text-align: left;
  padding-left: 40px;
`;

const InputArea = styled.div`
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 40px;
  padding-right: 40px;
`;

const StyledInput = styled(Input)`
  width: 100%;
  border-radius: 1px;
  border-width: 1px;
  font-family: Roboto;
`;

const ButtonArea = styled.div`
  text-align: left;
  padding-left: 40px;
  margin-top: 20px;
`;

const StyledButton = styled(Button)`
  border-color: #28546a;
  background-color: #28546a;
  text-transform: uppercase;
  border-radius: 1px;
  border-width: 2px;
  color: white;
  width: 120px;
  &:hover {
    background-color: #28546a;
    color: white;
  }
`;

const DividerArea = styled.div`
  font-family: Roboto;
  font-size: 12px;
  font-weight: bold;
  margin-top: 30px;
  text-align: left;
  padding-left: 40px;
  padding-right: 40px;
`;

const LinkArea = styled.div`
  padding-left: 40px;
  padding-right: 40px;
  margin-top: 15px;
  overflow: hidden;
`;

const LinkTitle = styled.div`
  float: left;
  padding-top: 5px;
`;

const StyledSpan = styled.span.attrs(() => ({
  children: "*"
}))`
  color: #971931;
`;

const LinkButtonArea = styled.div`
  float: right;
`;

const LinkButton = styled(Button)`
  background-color: #f3f7f8;
  border-color: #28546a;
  color: #28546a;
  text-transform: uppercase;
  border-radius: 1px;
  border-width: 2px;
  &:hover {
    background-color: #28546a;
    color: white;
  }
`;

npm i axios

// ...
import axios from 'axios';

const SigninForm = () => {
  // ...

  function click() {
    const email = emailInput.current.state.value;
    const password = passwordInput.current.state.value;

    axios
      .post('https://api.marktube.tv/v1/me', {
        email,
        password,
      })
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  // ...
};

SignForm.jsx - Promise

// ...
import axios from 'axios';

const SigninForm = () => {
  // ...

  async function click() {
    const email = emailInput.current.state.value;
    const password = passwordInput.current.state.value;

    try {
      const response = await axios.post('https://api.marktube.tv/v1/me', {
        email,
        password,
      });
      console.log(response);
    } catch (error) {
      console.log(error);
    }
  }
  
  // ...
};

SignForm.jsx - async/await

import { withRouter } from 'react-router-dom';

const SigninForm = ({ history }) => {
  // ...

  async function click() {
    const email = emailInput.current.state.value;
    const password = passwordInput.current.state.value;

    try {
      const response = await axios.post('https://api.marktube.tv/v1/me', {
        email,
        password,
      });
      console.log(response);
      history.push('/');
    } catch (error) {
      console.log(error);
    }
  }
  
  // ...
};

export default withRouter(SigninForm);

SignForm.jsx - withRouter

const SigninForm = ({ history }) => {
  // ...

  const [loading, setLoading] = useState(false);

  async function click() {
    const email = emailInput.current.state.value;
    const password = passwordInput.current.state.value;

    try {
      setLoading(true);
      const response = await axios.post('https://api.marktube.tv/v1/me', {
        email,
        password,
      });
      console.log(response);
      setLoading(false);
      history.push('/');
    } catch (error) {
      console.log(error);
      setLoading(false);
    }
  }
  
  // ...
};

SignForm.jsx - loading (1)

const SigninForm = ({ history }) => {
  // ...

  return (
    <Col
      span={12}
      style={{
        verticalAlign: "top"
      }}
    >
      <form>
        ...
        <ButtonArea>
          <StyledButton size="large" loading={loading} onClick={click}>
            Sign In
          </StyledButton>
        </ButtonArea>
        ...
      </form>
    </Col>
  );  
};

SignForm.jsx - loading (2)

import { Input, Button, Divider, Col, message } from 'antd';

const SigninForm = ({ history }) => {
  // ...

  async function click() {
    const email = emailInput.current.state.value;
    const password = passwordInput.current.state.value;

    try {
      setLoading(true);
      const response = await axios.post("https://api.marktube.tv/v1/me", {
        email,
        password
      });
      console.log(response);
      setLoading(false);
      history.push("/");
    } catch (error) {
      console.log(error);
      setLoading(false);
      message.error('This is an error message');
    }
  }
  
  // ...
};

SignForm.jsx - error feedback

const SigninForm = ({ history }) => {
  // ...

  async function click() {
    const email = emailInput.current.state.value;
    const password = passwordInput.current.state.value;

    try {
      setLoading(true);
      const response = await axios.post("https://api.marktube.tv/v1/me", {
        email,
        password
      });
      console.log(response);
      setLoading(false);
      history.push("/");
    } catch (error) {
      console.log(error);
      setLoading(false);
      message.error(error.response.data.error);
    }
  }
  
  // ...
};

SignForm.jsx - error feedback

localStorage

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

const SigninForm = ({ history }) => {
  // ...

  async function click() {
    const email = emailInput.current.state.value;
    const password = passwordInput.current.state.value;

    try {
      setLoading(true);
      const response = await axios.post("https://api.marktube.tv/v1/me", {
        email,
        password
      });
      console.log(response);
      setLoading(false);
      localStorage.setItem('token', response.data.token);
      history.push("/");
    } catch (error) {
      console.log(error);
      setLoading(false);
      message.error(error.response.data.error);
    }
  }
  
  // ...
};

SignForm.jsx - localStorage.setItem

import React from 'react';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import Signin from './pages/Signin';
import Home from './pages/Home';
import Error from './pages/Error';

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/signin" exact component={Signin} />
        <Route
          path="/"
          exact
          render={props => {
            const token = localStorage.getItem('token');
            console.log(token);
            if (token === null) {
              return <Redirect to="/signin" />;
            }
            return <Home {...props} token={token} />;
          }}
        />
        <Route component={Error} />
      </Switch>
    </BrowserRouter>
  );
}

App.js - localStorage.getItem

// src/hocs/withAuth.js

export default function withAuth(Component) {
  return props => {
    const token = localStorage.getItem('token');
    console.log(token);
    if (token === null) {
      return <Redirect to="/signin" />;
    }
    return <Component {...props} token={token} />;
  };
}

withAuth

Rest API 로 데이터 가져오기

import React from 'react';
import axios from 'axios';

function Book(props) {
  return <div>title : {props.title}</div>;
}

export default class Home extends React.Component {
  state = { books: [] };

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

    return (
      <div>
        <h1>Home</h1>
        {books.map(book => (
          <Book title={book.title} key={book.bookId} />
        ))}
      </div>
    );
  }
}

page/Home.jsx

export default class Home extends React.Component {
  // ...

  async componentDidMount() {
    try {
      const response = await axios.get('https://api.marktube.tv/v1/book', {
        headers: {
          Authorization: `Bearer ${this.props.token}`,
        },
      });
      const books = response.data;
      console.log(books);
      this.setState({ books });
    } catch (error) {
      console.log(error.response.data.error);
    }
  }

  // ...
}

page/Home.jsx

// 책 목록보기

axios.get(
  'https://api.marktube.tv/v1/book',
  { headers: `Bearer ${token}` },
);

// 책 추가하기

axios.post(
  'https://api.marktube.tv/v1/book',
  {
    title,
    message,
    author,
    url,
  },
  { headers: `Bearer ${token}` },
);

// 책 상세보기

axios.get(
  `https://api.marktube.tv/v1/book/${book.id}`,
  { headers: `Bearer ${token}` },
);

// 책 수정하기

axios.patch(
  `https://api.marktube.tv/v1/book/${book.id}`,
  {
    title,
    message,
    author,
    url,
  },
  { headers: `Bearer ${token}` },
);

// 책 삭제하기

axios.delete(
  `https://api.marktube.tv/v1/book/${book.id}`,
  { headers: `Bearer ${token}` },
);

[Homework]
개발 서적 평가 서비스
책 추가하기

리액트 실전 활용법

Mark Lee

HOC

HOC 는

<컴포넌트> 를 인자로 받아

<새로운 컴포넌트> 를 리턴하는

함수

컴포넌트

props

UI

HOC

컴포넌트

새로운

컴포넌트

you already know HOC !

withRouter()

사용하는 법

withRouter(LoginButton)

주의할 점

Controlled Component

Uncontrolled Component

상태를 가지고 있는 엘리먼트

input

select

textarea

엘리먼트의 '상태' 를 누가 관리하느냐

엘리먼트를 가지고 있는 컴포넌트가 관리

Controlled

엘리먼트의 상태를 관리하지 않고, 엘리먼트의 참조만 컴포넌트가 소유

Uncontrolled

components/Controlled.jsx (1)

components/Controlled.jsx (2)

components/Controlled.jsx (3)

components/Uncontrolled.jsx (1)

components/Uncontrolled.jsx (2)

components/Uncontrolled.jsx (2)

[Project] Login 요청하기

SignForm.jsx - Promise

SignForm.jsx - async/await

SignForm.jsx - withRouter

SignForm.jsx - loading (1)

SignForm.jsx - loading (2)

SignForm.jsx - error feedback

SignForm.jsx - error feedback

localStorage

SignForm.jsx - localStorage.setItem

App.js - localStorage.getItem

withAuth

Rest API 로 데이터 가져오기

page/Home.jsx

page/Home.jsx

[Homework] 개발 서적 평가 서비스 책 추가하기

[Homework]
개발 서적 평가 서비스
책 추가하기