꾸준히 공부하는 개발자

구직을 할 때 가끔 React 질문을 받을 때가 있다. 그 때마다 가상 DOM이 주는 이점에 대해 질문이 자주나왔던 것 같다. 그 부분에 대해 오늘 정리해보고자 한다. React의 장점은 컴포넌트로 사용할 수 있다. JSX 문법을 사용할 수 있다. 또 마지막으로 가상DOM 을 이용하여 직접 DOM을 건드리지 않아 가볍고 효율적으로 렌더링 할 수 있다. 라는 점인데 이 어떻게 가볍고 효율적인지는 대부분 잘 모를거라 생각한다. 그 부분에 대해 같이 알아보자. 일단은 dom이 어떻게 화면에 나타나게 되는지 과정을 알아야 한다. 1. html 을 파싱해서 DOM tree 를 그린다. 2. style sheets를 파싱해서 css 를 일단 그려내고 3. 둘을 합쳐 이제 렌더트리로 만든다. 4. 렌더트리를 화면에 ..

SignUp.js import React, {useState} from 'react' import {useDispatch} from "react-redux" import {useForm} from "react-hook-form" import {signUp} from "../../actions/users" const SignUp = () => { const {register, handleSubmit, errors} = useForm() const handleLogin = async values => { console.log(values) try{ await dispatch(signUp(values)) alert('회원가입이 완료되었습니다..') history.push('/') }catch(err){ ale..

react-admin 에는 string 을 배열로 나열하게 만드는 field가 만들어져있지 않다. 이러한 기능을 왜 안 만들었는지 의문이지만, 다음에 사용하기위해 내가 직접 만들어 보았다. TextArrayField.js import React from "react" export const TextArrayField = ({data}) => { const arrayValues = Object.values(data) return ( {arrayValues.map((value, index) => {value})} ) } Show.js

react state에서 삭제를 할 일이 생겼다. 하지만 처음에만 리스트가 삭제되어 렌더링되고 그 다음부터는 값이 삭제만되고 렌더링이 되지 않았다. 간단하게 예를 들면, const [a,setA] = useState([1,2,3,4]) a.splice(0,1) setA(a) 이런식으로 구현하는 어리석은 짓을 해버렸다.. array 에 추가 삭제할 때는 왠만해서는 mutate 를 하지말라고 한다. 그래서 이런식으로 수정을 하였다. const [a,setA] = useState([1,2,3,4]) const num = 배열의 제거할 원소 index setA(a.filter((value,index) => index === num )) rendering 의 문제인줄만 알았던 나는 빙빙돌아 결국 기초적인 부분에서..

react-admin Document에 보면 DateInput 이나 DateTimeInput은 존재하는데 TimeInput은 없다. 문서에는 timepicker 를 이용하라고 나와있는데 Timepicker 를 이용하여 구현하였다. Timeinput.js import React from 'react'; import PropTypes from 'prop-types'; import {withStyles} from '@material-ui/core/styles'; import {TextInput} from "ra-ui-materialui" const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap', }, textField: { width:..

react-admin 의 fileInput을 커스텀하여 react-sortable-hoc 를 적용하였다. react-admin ver 2.8 if (data.length > 0) { formData.images = data } react-admin ver 3.1 react-final-form 을 이용하여 구현하였다. if (data.length > 0) { form.batch(() => { form.change('mainImages', data) }) } used react-dropzone ver 4.0.1 grid-example 도 만들어놓았다. 코드를 보고싶다면 아래 링크에 들어가서 확인하면 된다. https://github.com/pjw9195/react-admin-OrderImageInput pj..