ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 리액트 개인 공부 정리 (5)
    Computer Science/React 2019.03.31 18:17

     

    32. Higher Order Components

     

    HOC(Higher Order Components)는 

     

    함수가 컴포넌트를 받아들이고 향상된 컴포넌트를

     

    반환하는 일종의 리액트 컴포넌트 구성 패턴이다.

     

    const NewComponent = higherOrderComponent(originalComponent)

     

    const EnhanceComponent = higherOrderComponent(originalComponent)

     

    좀 더 쉽게 예를 들면

     

    const IronMan = withSuit(TonyStark)

     

    HOC 패턴을 사용하는 이유는 코드를 반복하지 않고

     

    컴포넌트 간에 공통된 기능을 공유하기 위해 사용한다.

     

    HOC 패턴에서 props의 rest를 반드시

     

    spread operator(전개 연산자) 사용하여 넘겨줘야 한다.

     

    HOC function에서 파라미터를 전달할 때는

     

    Arrow Functiond의 첫 번째 파라미터는 WrappedComponent

     

    두 번째 전달할 파라미터는 지정하면 된다. 

     


     

    33. Render Props

     

    "render props"라는 용어는

     

    value가 function인 props를 사용하여

     

    React 컴포넌트들 간에 코드를 공유하는

     

    패턴을 의미한다.

     

    즉 React에서는 컴포넌트에 의해

     

    실제로 렌더링 되는 것을 제어하는

     

    value가 function인 props 사용이 가능하다.

     


     

    34. Context (Part 1)

     

    컴포넌트 트리의 여러 단계를 통해

     

    props를 전달하는데 문제가 있다.

     

    이러한 문제를 Context API 이용하여 해결한다.

     

    즉 Context는 단계마다 수동으로 props를

     

    전달하지 않고 컴포넌트 트리를 통해

     

    데이터를 전달할 수 있는 방법을 제공한다.

     

    (1) context를 생성한다.

     

    React.createContext()

     

    (2) context value를 준다.

     

    최상위 단계에서 provider 컴포넌트를 포함하고

     

    value를 value 속성을 이용하여 주고

     

    자손 컴포넌트 중에서

     

    이 value는 consume 할 수 있다.

     

    (3) 필요한 컴포넌트들에서

     

    context value를 consume 할 수 있다.

     

    필요한 경우 Consumer 컴포넌트를 사용하고 

     

    하위 컴포넌트로 함수를 전달한다.

     

    전달받은 함수에서 context value를

     

    parameter로 받아서 원하는 jsx를 반환하는 데

     

    사용할 수 있다.

     


     

    35. Context (Part 2)

     

    (1) default values

     

    context에 기본값을 설정할 수 있으며

     

    context를 만드는 동안 기본값이 지정된다.

     

    이 값은 context 생성 메서드에

     

    argument로 전달된다.

     

    (2) context type

     

    public class view syntax을 지원하는 경우

     

    component.context type을

     

    static으로 대체할 수 있다.

     

    contextType는 UserContext와 같다.

     

    두 가지 한계가 있다.

     

    첫 번째는 오직 클래스 컴포넌트에만 작동한다.

     

    두 번째는 오직 context type을 이용하여

     

    single context에만 subscribe 할 수 있다.

     


     

    36. HTTP and React

     

    HTTP requests는 일반적으로

     

    react application에서 처리된다.

     

    Web application 만들 때 서버와 데이터를

     

    어떻게 주고받을 수 있을까? 

     

    React에서는 특정한 방식이 없다.

     

    HTTP 라이브러리를 활용할 뿐이다.

     

    대표적으로 Axios, fetch API가 있다.

     

    여기서 Axios는 promise 기반 라이브러리이다.

     


     

    37. HTTP GET Request

     

    JSON placeholder를 이용하여 연습한다.

     

    (1) import Axios library

     

    (2) constructor에서 state property를 생성한다.

     

    (3) render 메서드에서 흐름을 제어한다.

     

    (4) componentDidMount 메서드에서 흐름을 제어한다.

     

    componentDidMount는 컴포넌트를 처음 마운트 할 때

     

    실행되며 컴포넌트 생명 기간 동안 한 번만 실행되기 때문에

     

    get request 하기 완벽한 위치다.

     

    (5) API endpoint에 get request 한다.

     

    axios.get() -> API endpoint을 argument로 받는다.

     

    (6) then과 catch blocks을 추가한다.

     

    .then()

     

    .catch()

     

    (7) Data가 검색(retrieve)되면

     

    State hosts property을 업데이트한다.

     

    (8) State가 변경이 되면, 컴포넌트는 re-render 된다.

     


     

    38. HTTP Post Request

     

    axios.post() 첫 번째 argument는 URL

     

    두 번째 argument는 전송해야 하는 data이다.

     

    그다음

     

    value를 state object에 연결한다. 

     

    여기서

     

    data를 post 하는 핸들러에서

     

    post 요청을 하려면

     

    일반적으로 form 유효성 검사가 필요하다.

     

    formik 같은 라이브러리 보는 거 추천한다.

     

    put 혹은 delete requests는 

     

    위에 다룬 get, post request와 유사하다.

    댓글 0