리액트 withStyles2 [React] 하이오더(HoC) 기능으로 컴포넌트 확장하기 ② 2020/10/09 - [Web프론트엔드/리액트] - [React] 하이오더(HoC) 기능으로 컴포넌트 확장하기 ① 바로 지난 시간에 하이오더 컴포넌트(HoC)의 개념과 그것을 이용해 컴포넌트를 확장할 수 있다고 배웠습니다. 그래서 오늘은 실습으로 컴포넌트에 툴팁 기능을 붙여서 확장해보겠습니다. 스타일이 적용되어 있지 않은 Input 컴포넌트와 이미 withStyles()로 확장되어 있는 Button 컴포넌트 두 가지 예시로 진행하겠습니다. 먼저 HoC 작성 ㄱㄱ! // ..\test_project\src\components\withTooltip.jsx import React from "react"; import withStyles, { css } from "../styles/withStyles"; ex.. 2020. 10. 12. [React] 하이오더(HoC) 기능으로 컴포넌트 확장하기 ① 리액트 기초 시간에 Input 컴포넌트로 아이디, 비번 입력창을 만들어 봤었는데 기억이 나시나요? 그때에는 InputComponent에 모든 기능을 넣었지만, 컴포넌트의 재활용 측면에서는 쓸 수가 없는 소스 코드입니다. 그래서 오늘은 하이오더 컴포넌트의 개념을 배우고, 다음 시간에는 Input 컴포넌트를 확장해보겠습니다. import React from "react"; import Text from "Text"; import Button from "Button"; import Input from "Input"; // HoC 기본 골격 export default function withExtend(BaseComponent) { return class withExtend extends React.Compon.. 2020. 10. 9. 이전 1 다음
