2020-01-20 4번째 수업 - HoC, local storage, Rest API 가져오기 등

Controlled Comonent  vs UnControlled Component

 

상태를 가지고 있는 엘리먼트들  : input , select, textarea 등등

 

 

엘리먼트의 상태를 누가 관리하느냐에 따라

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

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

 

예시)

 

Controlled Component

import React from 'react';

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

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

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

  render() {
    return (
      <div>
        <input type='text' value={this.state.value} onChange={this.change} />
        <button onClick={this.click}>submit</button>
      </div>
    );
  }
}

export default Controlled;

 

 

Uncontrolled Component

주로 DOM에 접근히기 위해 Ref를 쓴다.

import React from 'react';

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

  render() {
    return (
      <div>
        <input type='text' ref={this.inputRef} onMouseOver={this.mouseOver} />
        <button onClick={this.click}>전송</button>
      </div>
    );
  }

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

  mouseOver = () => {
    this.inputRef.current.focus();
  };
}

export default UnControlled;

 

 

HoC High order Component 고차 컴포넌트

advanced technique in REACT  for using compenet logic

not part of  React API

a pattern that emergers from 'react's compositional nature

 

즉, 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 함수 이다.

 

HoC의 대표적인 예시 : withRouter

 

HoC 사용하는 법

Use HoCs For Cross-Cutting Concerns(횡단 관심사) , (비슷한 기능의 역할을 하는 컴포넌트들을 횡단 관심사로 보라)

Dont Mutate the Original Component. Use Composition. (2개를 조합해서 주면 더 좋은게 된다.)

Pass Unrealated Props Through to the Wrapped Component

Maximizing Composability

Wrap the Display Name for Easy Debugging

 

*주의할 점

Don’t Use HOCs Inside the render Method 

Static Methods Must Be Copied Over

Refs Aren’t Passed Through (feat. React.forwardRef)  ( Ref는 props로 넘기지마라 )

 

 

axios 사용

npm i axios

 

 

 

** http에는 메소드 (get delete post patch --> CRUD)

 

** 예전에는 세션쿠키를 사용하는 방식으로 함 (서버에는 세션을 저장, 클라이언트에는 쿠키를 저장)

현재는 데이터만 요구하니까 세션과 쿠키의 개념보다는 API가 인증이 된건지아닌지 체크하는 방식으로 바뀌었다.

(API인증방식으로 토큰을 사용하는 것)

예시) 책목록을 줘 (클라->서버) 

 클라이언트가 서버에 요청할떄 토큰을 담아서 보냄 -> 서버에서 DB에 있는 것을 주기전에 이 토큰이 인증된 토큰인지 확인하고 다시 클라이언트로 보내줌

 

 

세션 스토리지 vs 로컬 스토리지

세션스토리지는 브라우저 꺼도 상태 유지  vs 로컬스토리지는 브라우저 끄면 세션이 없어진다.

 

 

withAuth를 사용하면 token이 인증되어있는지 확인할 수 가 있다. 

HoC를 사용하는 가장 흔한 예이다.

 

 

https://github.com/sunnykim91/reactjs-books-review/tree/day3

sunnykim91/reactjs-books-review