리액트 컴포넌트17 [React] 리덕스(redux) 기능으로 데이터 관리하기 ① 기초 지난 시간에는 컨텍스트(context) 기능으로 데이터 관리하는 법을 배웠습니다. 컨텍스트가 작은 편의점 같은 존재라면 리덕스는 대형마트 같은 느낌입니다. 즉 리덕스는 강력한 기능만큼 복잡하고 까다로운 절차를 거쳐야 사용 가능합니다. 하지만 리덕스를 사용하면 통합적인 데이터 관리가 가능하기 때문에 꼭 알고 가야 하는 기능입니다. 그럼 설치부터 ㄱㄱ 명령 프롬프트에서 리덕스 관련 라이브러리 설치 > yarn add redux react-redux 첫 시간인 만큼 가볍게 접근해 보겠습니다. 컨텍스트가 공급자(provider)와 소비자(consumer) 개념으로 나뉘었다면 리덕스는 스토어(store), 리듀서(reducer), 액션(action)이 있습니다. 쉽게 설명하자면 스토어는 데이터 저장소이고 리듀서는.. 2020. 10. 16. [React] 컨텍스트(context) 기능으로 데이터 관리하기 리액트 기초 관련 포스팅에서 프로퍼티(props)와 스테이트(state)로 컴포넌트의 데이터를 관리하는 법을 배웠습니다. 다시 한번 정리하자면 주로 외부 데이터는 프로퍼티로, 내부 데이터는 스테이트로 관리했었습니다. 그래서 이번에는 프로퍼티의 단점을 보완한 컨텍스트 기능으로 데이터를 관리해보는 시간을 갖겠습니다. 아래 링크도 참고해 보세요. 2020/09/15 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ① - props 프로퍼티 2020/09/19 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ② - state 스테이트 2020/09/21 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ③ - 콜백 함수 2020/09/29 - .. 2020. 10. 14. [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. [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] 스토리북에 다양한 확장 도구(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] 재활용 가능한 기본적인 Input 컴포넌트 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 이때까지의 포스팅은 리액트의 가장 기초적인 내용이었다면, 지금부터는 그 내용을 토대로 좀 더 활용 가능한 것들을 다루도록 하겠습니다. 그래서 오늘은 가볍게 지난 시간에 다루었던 아이디, 비번 입력 Input 컴포넌트를 재활용 가능하도록 뼈대만 남기는 작업을 해보도록 하겠습니다. 그럼 Input.jsx 만들어보시죠! // ..\test_project\src\components\Input.jsx import React, { PureComponent } from "react"; import PropTypes from "prop-types"; class Input extends Pu.. 2020. 10. 6. [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 지금까지 총 13번의 포스팅으로 개발환경 구축부터 기본적인 Input 컴포넌트 개발까지 해보았습니다. 이번에는 앞으로 더 어려운 과정을 나아가기 위해, 기초 관련 글들을 정리하는 시간이 되겠습니다. ① 리액트 개발환경 구축 첫 번째 노드 버전 매니저(NVM)를 설치하고, 그것을 이용해 Node.js , NPM , yarn 등을 설정했습니다. ② Visual Studio Code 및 관련 플러그인 설치 개발환경 구축의 연장으로 VSCode 설치와 Reactjs code snippets , Prettier 플러그인을 설치했습니다. ③ 리액트 테스트 앱 생성 및 수정 yarn을 이용해 테스트 앱을 생성하고 기동 했으며, 아주 간단하게 Hello, world! 수준의 수정을 해보았습니다. ④ 리액트에서 사용하는.. 2020. 9. 29. 이전 1 2 다음
