Velog Velog

회원가입/패스워드 찾기를 진행할 때 반드시 필요한 것이 인증번호다. (이메일이든 전화번호든) API를 호출하여 인증번호를 생성할 때는 인증번호의 유효기간이 존재한다. 처음에 타이머를 구현할 때는 유효기간인 3분을 초기값으로 정해놨지만 그렇게 짜면 새로고침을 할 때마다 유효기간이 3분으로 늘어난다는 버그가 있었다. 그래서 Redux와 React Hooks를 이용하여 유효기간을 display하는 컴포넌트를 작성했다. import React, { useEffect, useState } from 'react' import { useSelector } from 'react-redux' import { RootState } from '../../modules' const AuthTimer = () => { // c..

const [modal, setModal] = useState(false) hook을 이용해서 modal open 상태를 관리했다. 초기값은 false여서 모달이 보이지 않는다. {modal && } PlaceModal이라는 함수형 컴포넌트를 생성해서 props로 open 값과 closeModal 메소드를 넘겨주었다. import {Button, Fade, Select, Input, makeStyles, Modal, InputLabel, MenuItem, FormControl} from '@material-ui/core' import React, {useState, useEffect} from 'react' 모듈은 이렇게 사용했다. const useStyles = makeStyles((theme) => ..

Geocoding 주소를 이용해서 주소의 위도와 경도값을 얻는 것 ex. 주소로 서울특별시 어쩌구 저쩌구를 입력하면 (****,%%^$$) 이런 식으로 리턴을 받는 것 Reverse Geocoding 위도와 경도값으로 주소나 거리같은 고유명칭을 얻는 것 geocoding은 유일값을 리턴받지만 reverse geocoding은 복수 개의 결과값을 얻을 수도 있다. 하나의 포인트가 길거리, 도시, 국가 등 여러 가지로 라벨링될 수도 있기 때문이다. https://developers.google.com/maps/documentation?hl=ko Google Map Api의 Maps JavaScript API를 이용해서 Geocoding을 하려고 한다. React로 개발하는 경우에는 'react-geocode..

Hook이란? ✨ ✔️함수 컴포넌트에서 React state와 Lifecycle 기능을 연동할 수 있게 해주는 함수 (버전 16.8부터 도입) ✔️만들어진 목적 자체가 함수 컴포넌트에서 사용하기 위함이었으니 당연히 클래스 컴포넌트 안에서는 동작하지 않음 ✔️기존에 함수 컴포넌트를 사용하다가 state를 추가하고 싶어서 클래스 컴포넌트로 바꾸곤 했는데 이제 그럴 필요가 없다! Hook의 사용 규칙 1️⃣최상위에서만 Hook 호출이 가능 (루프, 조건문, 중첩된 함수 안에서는 사용할 수 없음) : 조건문을 Hook 내부에 넣는 것은 괜찮음 -> 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장되어 state를 올바르게 유지할 수 있음 2️⃣리액트 함수 컴포넌트 내에서만 호출이 가..

React document 정리 리액트는 JSX 문법을 사용한다. ➡️ 자바스크립트 내 HTML 태그들을 끼워넣는 표현 방법 HTML 친화적이라 쉬움 마크업과 로직을 분리하지 않고 UI 작성 가능 리액트 컴파일 과정에서 에러 디텍트가 가능함 무조건 사용해야 하는 것은 아니지만 권장 Props - 부모 컴포넌트가 자식 컴포넌트에게 넘겨주는 파라미터 같은 것들, Read-only하므로 변경하고자 할 때 필요한 개념이 State Components - element들이 모여 하나의 컴포넌트를 이룸, 반복되는 UI나 기능들을 효율적으로 나타내고자 컴포넌트를 단위로 분리해주는 것이 좋음 function을 class로 변환하는 방법 React.Component를 상속받는 동일한 이름의 ES6 클래스 생성함 rend..

The Show View read-only 상태로 API에서 fetch한 레코드를 나타내는 데 사용하는 뷰 component 페이지 타이틀과 액션을 렌더링하고 REST API로부터 레코드를 fetch함 실제 레코드를 렌더링하는 것은 자식 컴포넌트의 역할 -> prop으로 record를 전달 컴포넌트의 props title actions aside : additional information component // in src/App.js import React from 'react'; import { Admin, Resource } from 'react-admin'; import jsonServerProvider from 'ra-data-json-server'; import { PostCreate, Po..

https://marmelab.com/react-admin/List.html React-admin - The List View The List View The List view displays a list of records fetched from the API. The entry point for this view is the component, which takes care of fetching the data. Then, it passes the data to an iterator view - usually , which then delegates the rendering marmelab.com component API에서 fetch한 레코드들의 배열을 디스플레이함. 보통 를 사용하여 데이터들을 열..

resource 컴포넌트는 API 엔드포인트를 CRUD인터페이스에 매핑시킴 (CREATE, DELETE) 아래와 같은 prop을 이용하여 각 오퍼레이션에 컴포넌트를 정의할 수 있게 함 4가지 props는 react-router를 사용하여 오른쪽과 같은 루트를 생성함. list (define되면 해당 리소스는 Menu에 디스플레이됨) -> / create -> /create edit -> /:id show -> /:id/show Reference**Field와 같이 reference를 선언할 때는 반드시 를 추가해주어야 함. : react-admin은 데이터 저장구조를 정의하기 위해 resource를 사용하기 때문 또한 추가적인 prop도 허용함 -> name, icon, options name dataP..