분류 전체보기68 [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. [ES6] 커링 함수를 조합해서 사용하기 compose 2020/09/16 - [Web프론트엔드/자바스크립트] - [ES6] 화살표 함수와 커링 디자인 패턴 [ES6] 화살표 함수와 커링 디자인 패턴 화살표 함수 ES6에 새로 추가된 화살표 함수(arrow function)는 함수 표현을 간단하게 할 수 있습니다. 기존 함수 사용과 화살표 함수 표현식을 비교해보고, 그것을 응용한 커링 디자인 패턴을 보겠� jiguin-hankun.tistory.com 처음부터 링크를 대문짝만 하게 달아놓은 이유는, 오늘 포스팅이 저 글의 연장선에 있기 때문입니다. 따라서 꼭 상기한 링크를 확인해 주시고 이번 글을 읽으시면 많은 도움이 됩니다. 그럼 일단 간략하게 지난 포스팅을 설명하겠습니다. const plus = (a, b) => a + b; const multiply =.. 2020. 10. 9. [React] 컴포넌트에 스타일을 적용해보자 ④ media 속성 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트 2020/10/06 - [Web프론트엔드/리액트] - [React] 테스트 도구인 스토리북(storybook)을 사용해보자 2020/10/06 - [Web프론트엔드/리액트] - [React] 스토리북에 다양한 확장 도구(Addon) 추가 2020/10/07 - [Web프론트엔드/리액트] - [React] 컴포넌트에 스타일을 적용해보자 ① Text 2020/10/08 - [Web프론트엔드/리액트] - [React] 컴포넌트에 스타일을 적용해보자 ② Button 2020.. 2020. 10. 8. [React] 컴포넌트에 스타일을 적용해보자 ③ Checkbox 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트 2020/10/06 - [Web프론트엔드/리액트] - [React] 테스트 도구인 스토리북(storybook)을 사용해보자 2020/10/06 - [Web프론트엔드/리액트] - [React] 스토리북에 다양한 확장 도구(Addon) 추가 2020/10/07 - [Web프론트엔드/리액트] - [React] 컴포넌트에 스타일을 적용해보자 ① Text 2020/10/08 - [Web프론트엔드/리액트] - [React] 컴포넌트에 스타일을 적용해보자 ② Button 스타일 .. 2020. 10. 8. [React] 컴포넌트에 스타일을 적용해보자 ② Button 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트 2020/10/06 - [Web프론트엔드/리액트] - [React] 테스트 도구인 스토리북(storybook)을 사용해보자 2020/10/06 - [Web프론트엔드/리액트] - [React] 스토리북에 다양한 확장 도구(Addon) 추가 2020/10/07 - [Web프론트엔드/리액트] - [React] 컴포넌트에 스타일을 적용해보자 ① Text 지난 시간에 이어서 이번에는 버튼 컴포넌트에 스타일을 적용해보겠습니다. Button이라고 전에 만들었던 Text와 크게 다.. 2020. 10. 8. [React] 컴포넌트에 스타일을 적용해보자 ① Text 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트 2020/10/06 - [Web프론트엔드/리액트] - [React] 테스트 도구인 스토리북(storybook)을 사용해보자 2020/10/06 - [Web프론트엔드/리액트] - [React] 스토리북에 다양한 확장 도구(Addon) 추가 지금까지의 포스팅은 컴포넌트의 스타일보다는 기능에 중점을 둔 글이었습니다. 그래서 스타일 관련 글을 다루기 위해, 테스트 도구인 스토리북을 추가하기도 했었습니다. 앞으로 다룰 스타일은 기존 css나 scss가 아닌 직접 컴포넌트에 붙.. 2020. 10. 7. [React] 스토리북에 다양한 확장 도구(Addon) 추가 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트 2020/10/06 - [Web프론트엔드/리액트] - [React] 테스트 도구인 스토리북(storybook)을 사용해보자 지난 시간에는 스토리북 설치와 실행을 해보았습니다. 이번에는 스토리북에 자주 사용하는 확장 도구 JSX, actions 두 가지를 추가해보겠습니다. 이 두 가지 말고도 다양한 Addon이 있으니 공식 사이트를 확인 바랍니다. 1. addon-jsx 첫 번째로 스토리북 화면에서 바로 JSX코드를 확인할 수 있는 확장 도구입니다. 먼저 프롬프트 창에.. 2020. 10. 6. [React] 테스트 도구인 스토리북(storybook)을 사용해보자 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트 이때까지의 포스팅은 스타일이 적용되지 않은 기본적인 컴포넌트 형태였습니다. 그래서 바로 지난 포스팅인 Input 컴포넌트를 기반으로 스타일을 적용해볼 예정입니다. 하지만 그전에 컴포넌트의 디자인과 기능 등을 시각적으로 편리하게 확인할 수 있는 스토리북을 설치하고 사용해 보겠습니다. 먼저 명령 프롬프트에서 아래와 같이 입력합니다. 마지막은 버전인데 미지정시 최신 버전입니다. > yarn add --dev @storybook/react@5.3.0 그럼 자동으로 인스톨이 .. 2020. 10. 6. 이전 1 2 3 4 5 6 7 8 다음
