본문 바로가기

React&React-Native

 (37)
[#. React] react-scroll 이용해서 텍스트 클릭 시 원하는 영역으로 스크롤 이동하기 https://www.npmjs.com/package/react-scroll react-scroll A scroll component for React.js www.npmjs.com ① react-scroll 설치 npm install --save react-scroll ② src/components/Main/Main.js 먼저 페이지를 하나 만들어서 이동할 영역 Middle과 클릭 시 Middle 영역으로 이동하게 할 Side 영역으로 나눠준다 import React from "react" import styled from "styled-components" import Middle from "./Sections/Middle" import Side from "./Sections/Side" const M..
[#. React] React Form에서 Enter 엔터키 눌렀을 때 버튼 클릭 이벤트 실행하기 이메일 주소와 비밀번호를 입력하는 Form이 있는데 Enter 키를 눌러도 가입하기로 넘어가지 않는다 Form에서 onKeyPress 이벤트가 발생할 때 그 키가 Enter일 경우 onSignup() 가입하기 버튼이 동작하도록 하면 된다 // 입력한 키가 Enter일 경우 가입하기 버튼 클릭한 것과 동일한 동작 실행 const onCheckEnter = (e) => { if(e.key === 'Enter') { onSignup() } } import React, { useState } from "react" import { Form, Input, Button } from "antd" const Signup = (props) => { const [email, setEmail] = useState("") c..
[#. React] React에서 file, json data를 같이 formData에 넣어서 REST API에 post 하기 파일(이미지), 제목, 내용을 입력하고 DB에 저장하는 페이지가 있다고 하자 formdata에 "file", "data"에 각각 파일과 제목, 내용 데이터를 담아서 보내려고 한다 FormData 객체는 폼의 각 필드와 값을 나타내는 키/값 쌍들의 집합을 쉽게 구성할 수 있는 방법을 제공한다 이를 이용하면 데이터를 multipart/form-data 형식으로 전송할 수 있다 Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있다 file은 multipart/form-data, data는 application/json 형식으로 보내기 위해 Blob을 사용했다 let blob = new Blob(array, options) ① Cre..
[#. React] parent에서 버튼 클릭할 때마다 children에서 div 영역 생성하기 추가 버튼을 클릭하면 input, textarea 영역이 생겼으면 좋겠다 근데 react에서 return문 안에서 for문은 사용하지 못 하기 때문에 어떤 방법을 사용할지 고민하다가 버튼 onClick 이벤트가 발생할 때마다 counter에서 숫자가 1씩 증가하도록 하고 그걸 state에 배열로 담을 것이다 그리고 배열에 담긴 Item 개수만큼 div를 생성할 것이다 ① 프로젝트명/src/components/CreateListPage/CreateList.js import React, { useState } from "react" import styled from "styled-components" import { Button } from "antd" import { Link } from "react-ro..
[#. React] React에서 token이 필요한 API 요청 시 header Authorization에 Bearer token 담아서 보내기 로그인 시 React에서 REST API로 데이터를 가져와서 Redux에 넣으려고 한다 가입했을 때 넣은 내 정보를 가져와야 하는데 내 token값을 header Authorization에 넣어서 Bearer에 token을 담아서 보내줘야 데이터를 가져올 수 있다 Bearer? 기본적인 의미는 정보의 신호 전달을 네트워크 단에서 손실 없이 있는 그대로 전달하는 서비스를 말한다 베어러 서비스가 종합 정보 통신망에서는 아래의 의미로 사용된다 즉, 종합정보통신망(ISDN, Integrated Service Digital Network)에 의해 제공되는 3가지 서비스 중 하나이며, 사용자망 인터페이스 상호 간에 정보(음성, 음향 데이터, 영상 등)를 실시간(real time)으로 내용의 변경 없이 전달하는 방법..
[#. React] React UI Framework ant design에서 Internationalization을 통해 한글 설정, 사용하기 React 프로젝트에서 UI 프레임워크로 ant design(antd)을 사용하고 있다 https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design 그중 Form을 사용하면서 설정한 rule과 다른 내용이 input에 입력되면 경고 메시지를 띄우려고 한다 이런 식으로 '다시 입력해 주세요'라는 경고 메시지를 뜨게 하려고 하는데 영어로만 뜨고 한글은 뜨지 않는다 antd에서 한국어를 사용하려면 Internationalization 설정을 따로 해줘야 한다 ① 프로젝트 폴더/src/index.js import { ConfigProvider } from 'antd';// 추가 import koKR fr..
[#. React] redux-persist 설치 후 새로고침해도 state 유지하기 React로 개발 중인 쇼핑몰 웹에서 redux를 사용하고 있다 상품 상세 페이지에서 옵션을 선택해서 장바구니에 담기를 했을 때 장바구니에 넣은 데이터를 redux에서 가지고 있고 싶다 근데 redux는 새로고침 하면 state가 사라지기 때문에 redux-persist를 사용하려고 한다 react 기본 폴더 구조는 이렇다 redux-persist Redux Persist 라이브러리를 사용하면 캐시 기능과 같이 상태 값을 지속적으로 저장한다 www.npmjs.com/package/redux-persist redux-persist persist and rehydrate redux stores www.npmjs.com ① redux-persist 설치 npm install --save redux-persis..
[#. React] redux payload가 Promise {<pending>} 반환할 때 문제 해결, PromiseResult 가져오기 DRF(Django Rest Framework) + React 프로젝트에서 React에서 API에 post로 데이터를 넣으려고 한다 구조는 이런 상태이다 ① frontend/src/_actions/user_actions.js rest api로 Test 모델에 임의의 데이터 items를 넣으려고 한다 데이터는 잘 들어간다 "aa": 4가 내가 임의로 넣은 값이다 ② frontend/src/_reducers/user_reducer.js 근데 문제는 reducer에서 actions.payload를 console에 찍어보면 아래와 같이 뜬다는 것이다 PromiseResult에 있는 object를 가져오고 싶어도 불가능하다 온갖 방법을 다 찾아봤지만 일단 문제가 발생하는 이유는 promise 형식을 payload..

티스토리툴바