STUDY/React (52) 썸네일형 리스트형 React | 다음 우편번호 검색 서비스 (react-daum-postcode) 1. react-daum-postcode install $ npm install react-daum-postcode 2. 주소 검색을 이용할 컴포넌트에 import import DaumPostcode from 'react-daum-postcode'; 3. 필요에 맞게 커스텀하여 사용 onComplete : 사용자가 주소를 검색 후 특정 주소를 클릭하였을 때 발생하는 이벤트 style: css커스텀을 위한 props 이런식으로 사용하면 된다... 엄청 편리함! const FindAddr = () => { const postCodeStyle = { display: "block", position: "absolute", top: "50px", zIndex: "100", padding: "7px" } retur.. React | react-paginate로 빠르게 페이지네이션 구현하기 1. react-paginate install $ npm install react-paginate 2. 페이징 처리 할 컴포넌트에 import import ReactPaginate from "react-paginate"; 3. 필요에 맞게 커스텀 하여 사용 pageCount - 총 게시글의 개수(총 row 수) pageRangeDisplayed - 한 페이지에 표시할 게시글의 수 marginPagesDisplayed - breakLabel - 페이지 수가 많을 경우 건너뛸 수 있는 버튼 previousLabel - 이전페이지로 가는 버튼의 value값 nextLabel - 다음페이지로 가는 버튼의 value값 onPageChange - 페이지 버튼을 눌렀을 때 일어나는 이벤트 이를 이용해 페이지 증감 c.. React | react-router-dom을 이용한 sidebar 0. react, react-router-dom install $ npm install react react-router-dom 1. Sidebar.js 컴포넌트 생성 menus는 각 사이드바의 메뉴들을 담아놓은 배열. 실제로 사용할 땐 따로 파일을 만들어 import하기로.. map을 이용해 SidebarItem이라는 각각 컴포넌트들을 선언. menu라는 props에 각 object를 담아 전달. *map이용시 꼭 key값을 넣어주어야 함! //src/components/Sidebar.js import React from "react"; import { Link } from "react-router-dom"; import SidebarItem from "./SidebarItem"; function Si.. React | React 간단 개념정리 1. React?React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. (출처: https://ko.reactjs.org/tutorial/tutorial.html) React는 Facebook의 소프트웨어 엔지니어 Jordan Walke가 만든 오픈소스 자바스크립트 라이브러리로, MVC(Model View Controller)패턴 중 View를 담당한다. 리액트 애플리케이션의 페이지 전환은 단일 페이지 애플리케이션(single page application, SPA) 방식으로 개발하는 것이 정석이다. 단일 페이지 애플리케이션은 초기 요청 시 서버에서 첫 .. React | Hooks로 Life Cycle API 구현하기 Hooks는 함수 컴포넌트에서도 클래스 컴포넌트처럼 state를 다룰 수 있고 여러 기능을 사용할 수 있게 해줍니다. (this를 바인딩 하지 않아도 돼서 매우 편리하게 사용 중) 리액트에서 기본으로 제공하는 Hooks는 useState, useEffect, useCallback 등이 있으며, 그중에서 Life Cycle API와 관련된 Hooks는 useEffect입니다. 즉 useEffect로 componentDidMount, componentDidUpdate 등의 처리를 할 수 있습니다. 해당 컴포넌트에서 구독이나 비동기 네트워킹 등의 동작은 useEffect를 이용해서 데이터를 받아오면 됩니다. +) 사용 예시 useEffect를 이용해 컴포넌트가 생성될 때 비동기 통신을 통해 값을 받아와 컴포넌.. React | emoji 사용하기 role과 aria-label을 지정해주면 warning표시 없이 이모지를 사용할 수 있습니다. ✍ HTML Special Character Codes Browse special HTML symbols and find their character codes in the categories above. Every character has a code available in the following format html-css-js.com React | 로그인 정보 없을 경우 로그인 페이지로 redirect하기 ( react-router, PrivateRoute, 로그인 권한 ) +) 참고 Private routes with React-router-DOM If you have been developing in React then you have probably come across React-router-dom. One thing I was looking for when I started the… medium.com 1. PrivateRoute 작성 저는 로그인 정보를 localStorage에 저장하는 방법을 사용하고 있습니다. 상황에 맞게 작성하세요. 로그인 정보가 있을 경우 해당 컴포넌트로 이동할 수 있지만, 로그인 정보가 없다면 로그인 페이지로 redirect되도록 해줍니다. import React from 'react'; import { Redirect, Route } f.. React | React-Redux 비동기 통신(fetch / redux-thunk) 1. Action, Reducer 작성 fetch를 사용하기 위해서 우선 npm을 이용해 isomorphic-fetch를 install해줍니다. $ npm install isomorphic-fetch action 생산자는 아래와 같이 작성해주었습니다. import fetch from 'isomorphic-fetch'; import * as type from '../constants/actionTypes'; export const userSignUp = (signUpInfo) => { return dispatch => { fetch("http://localhost:3002/users/signUp", { method:'post', headers: {'Content-Type': 'application/json.. 이전 1 2 3 4 5 6 7 다음
