React4 react에서 styled components 사용시 input tag에서 focus를 잃어버리는 문제 react에서 styled components를 적용하기 시작하였습니다. styled components를 input tag에 적용하여 사용하던 도중 input의 onChange()함수에서 state를 변경하였습니다. 하지만 컴포넌트에서 매 입력시마다 input에서의 focus를 잃어버리는 일이 발생하였는데요. 그 원인과 해결에 대하여 기록합니다. 1. 오류 상황 해당 컴포넌트에서 useState()를 사용하여 onChange() 시에 state를 변경하게 되었습니다. 다음과 같은 코드에서 오류가 발생하게 되었습니다. import React, { useState } from "react"; import styled from "styled-components"; export default function .. 2021. 6. 24. 자바스크립트의 얕은 복사(shallow copy) react에서는 각 컴포넌트의 리렌더링을 최적화하기 위해 자바스크립트의 얕은 복사를 활용합니다. 얕은 복사로 렌더링할지 말지를 빠르게 결정하는 것입니다. 자바스크립트의 얕은 복사에 대하여 간단하게 적어봅니다. 1. Primitive type, Objects 자바스크립트의 타입은 크게 2가지가 있습니다. Primitive type과 Object가 그것인데요. 다음과 같이 분류됩니다. Primitive type: Boolean, null, undefined, string, Number Objects: Array, Function, Object (Objects 타입들은 모두 기술적으로 모두 object임) Primitive type들은 데이터 대입(전달)시 모두 실제 value가 복사됩니다. Objects들은.. 2021. 6. 24. create-react-app에서 react가 실행되는 기본 흐름 리액트(react) 공부를 시작하면서 create-react-app이라는 것을 알게되었습니다. 리액트에 필요한 환경설정들을 간편하게 구축해주고 리액트 프로그램을 간단하게 돌려볼 수 있다고만 알고 있었는데... 공부하다가 가만히 생각해보니... 리액트는 js로 구성되어 있고 웹 브라우저는 그것을 요청해서 가져오는 것인데... '그럼 내가 지금 보고있는 리액트 뷰 화면은 어디서 가져오는 것일까?' 라는 궁금증으로 이것저것 찾아보고 로그로 남겨봅니다. 1. create-react-app create-react-app은 리액트 실행에 필요한 기본 개발 환경을 간단한 커맨드로 구성해줄 수 있는 도구입니다. (create-react-app은 boilerplate의 한 종류) 리액트 프로젝트를 생성할 때에는 웹팩(w.. 2021. 6. 24. ant design 의 Upload 컴포넌트로 파일과 string 데이터 업로드하기 react를 배우면서 겪은 내용들을 로깅해봅니다. 프론트는 React(with axios)로 작성하였고 백앤드는 node.js, express를 사용하여 API 서버로 구성하였습니다. 자세한 코드들은 생략합니다. 1. React 컴포넌트 작성 1.1 우선 React에서 ant design의 Dragger 컴포넌트를 작성합니다. Dragger 컴포넌트(Upload 컴포넌트) 참고 : https://gary-shen.github.io/ant-design/components/upload/ const [fileList, setFileList] = useState([]); const meta = { title: 'title 1', contents: 'contents 1', } const handleUpload =.. 2021. 6. 23. 이전 1 다음