웹 프론트엔드/React 리액트 (기초)30 [React] 라우터(Router), 스위치(Switch), 링크(Link), 리다이렉트(Redirect)를 이용한 페이지 이동 이때까지의 예제 및 실습에서는 페이지(URL) 이동이 없었습니다. 그래서 이번에는 페이지 이동 관련 기능들을 모아서 정리하겠습니다. 일단 리액트의 페이지 이동은 기존 서버 사이드 랜더링 기술과 개념이 조금 다릅니다. 쉽게 말씀드리면 리액트는 서버가 아닌 클라이언트에서 웹 문서를 생성합니다. 이를 SPA(Single Page Application)라고도 합니다. 그럼 이론은 너무 어려우니(무책임) 바로 실습 가겠습니다. URL을 다루기 때문에 스토리북이 아닌 App.js에 직접 넣겠습니다. 먼저 명령 프롬프트에서 리액트 라우터를 추가합니다. > yarn add react-router-dom // ..\test_project\src\App.js import React, { Component } from "r.. 2020. 10. 28. [React] 리덕스(redux) 기능으로 데이터 관리하기 ⑤ 커넥트 지난 리덕스 세 번째 포스팅에서 코드 분리를 했습니다. 크게 액션과 리듀서로 나눴는데, 이번에는 커넥트(connect)를 사용하여 화면(view) 컴포넌트와 데이터(container) 컴포넌트로 분리해보겠습니다. 쉽게 말씀드리면 화면에 뿌려주는 재사용 가능한 컴포넌트에 리덕스 스토어 데이터를 연결하는 것입니다. 지난 시간에 했던 소스코드에서 분리하겠습니다. 2020/10/27 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ④ 해시맵 먼저 views폴더 안에 화면 컴포넌트를 만들겠습니다. 유저 데이터인 id, pass, name 그리고 수정 버튼입니다. // ..\test_project\src\components\views\UserDataView.jsx imp.. 2020. 10. 27. [React] 리덕스(redux) 기능으로 데이터 관리하기 ④ 해시맵 이때까지 네 번에 걸쳐 리덕스 관련 포스팅을 했습니다. 기초, 디버깅, 코드 분리까지 어느 정도 리덕스 기능을 사용할 수 있지만, 문제는 어떤 데이터를 담아서 어떻게 사용하는 야입니다. 그래서 이번에는 key값과 object를 사용한 해시맵 구조를 담아보겠습니다. id, pass, name 정도의 유저 데이터를 관리하는 예시로 진행하겠습니다. 먼저 액션 추가 ㄱㄱ~ 2020/10/16 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ① 기초 2020/10/22 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ② 디버깅 2020/10/23 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데.. 2020. 10. 27. [React] 리덕스(redux) 기능으로 데이터 관리하기 ③ 코드 분리 리덕스 첫 기초 포스팅에서는 개념을 파악하기 위해 모든 기능을 하나의 소스 코드에 넣었습니다. 즉 액션 정의, 리듀서 설정, 스토어 생성 등의 코드가 모두 한 곳에 있었습니다. 또한 하나의 리듀서를 사용하여 스토어 저장소도 나눠져 있지 않았습니다. 그래서 이번에는 코드를 분리하고 복수의 리듀서를 사용해 보겠습니다. 시간을 절약하기 위해 지난 시간에 했던 카운드 업 로직에 로그인 정보를 저장하는 정도의 기능을 추가하겠습니다. 아래 링크를 참고하세요~! [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ① 기초 먼저 액션을 분리해보겠습니다. src/components 폴더 안에 actions 폴더를 만들고 이하 두 개의 소스를 추가합니다. // ..\test_proje.. 2020. 10. 23. [React] 리덕스(redux) 기능으로 데이터 관리하기 ② 디버깅 리덕스 관련 두 번째 포스팅입니다. 지난 시간에는 리덕스의 간략한 개념과 사용 방법을 알아봤었는데, 리덕스를 사용하면 통합적인 데이터 관리가 가능하다고 했습니다. 하지만 단지 데이터 관리 기능만이라면 이렇게 주목받거나 어려운 기능은 아니었을 것입니다. 그래서 오늘은 정말 강력한 기능인 리덕스 디버깅을 배워보도록 하겠습니다. 크롬 브라우저를 기준으로 설명드리겠습니다. 먼저 리덕스 크롬 확장 도구를 설치하기 위해 구글에 검색으로 'chrome redux devtools' 를 찾거나, 아니면 chrome 웹 스토어에서 'Redux DevTools' 를 검색해 설치합니다. 설치가 완료되면 명령 프롬프트에서 리덕스 개발자 확장 라이브러리를 추가합니다. > yarn add redux-devtools-extensio.. 2020. 10. 22. [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. 이전 1 2 3 4 다음
