wazac

보통 파일 업로드를 구현할때 Event 로 파일을 받은 후 formData에 담아서 multipart 로 보낸다. const files = e.target.files; const formData = new FormData(); for (let file of files) formData.append('file', file); // 혹은 formData.append('file', file[0]); 간혹 파일 이외에 추가 정보를 보낼때가 있는데, 그때에도 formData를 담아서 보내면 된다. ... const fileInfo = "user_type"; formData.append('type', fileInfo); 그런데 만약 Object 타입을 보내야할 때는 어떨까? 기나긴 삽질+도움 끝에 찾은 방법은 다음..

다양한 입력폼을 다룰때 input말고도 textarea도 상당히 많이 다루는 편인데, textarea도 input과 별개로 은근히 많은 커스텀을 해줘야 합니다. 기본 textarea 같은 경우 resize 옵션이 기본으로 들어가 있고, input과 달리 textarea 는 여러 줄의 글을 길게 입력하는데 사용되기 때문에, 출력시에도 따로 처리를 해줘야합니다. 1. textarea resize 사용하지 않기 2. textarea placeholder 에서 줄바꿈 처리하기 3. textarea 에서 tab 사용하기 1. 기본 소스 - JSX import { useState } from 'react' import './app.css' function App() { const [textValue, setText..

개발을 하다 보면 props로 전달받은 텍스트의 줄 바꿈을 해야 하는 경우가 종종 있습니다. 매번 까먹으니 정리해 놓으려고 합니다. 😑 먼저 텍스트를 입력받아 뿌려주는 초 간단 컴포넌트를 만들어 보겠습니다. const Item = ({ text }) => { return {text}; }; export default function App() { return ( ); } 여기에서 text에 줄바꿈이 들어간 텍스트를 입력하려고 할 때 아마 br태그를 사용하거나 '\n'를 사용하여 줄바꿈을 시도하실 수 있을 것 같습니다. 하지만 예상과는 달리 그대로 출력해 보면 문자로 출력돼 버리는 것을 알 수 있습니다. 왜 이런 문제가 생기는 걸까요? 😮 이리저리 테스트 해본 결과 value의 값이 String과 섞이게 ..

Toast 팝업은 무언가 액션을 시작했을 때, 종료되었을 때, 상태가 바뀌었을 때 등등의 경우 알려주는 팝업입니다. 따로 닫기 버튼을 두지 않고 일정 시간이 지나면 자동으로 사라집니다. JavasScript환경에서 setTimeout을 통해 간단하게 구현이 가능합니다. // App.js import { useState, useEffect } from "react"; import "./styles.css"; export default function App() { return ( CLICK ); } // Toast.js export default function Toast({ msg = "메세지 없음" }) { return {msg}; } // styles.css .App { font-family: san..

useContext에서 useReducer를 통해 redux처럼 사용해 보도록 하겠습니다. 기능은 간단하게 admin이라는 state를 가지고 true일 때 false일 때 문구만 다르게 출력하도록 하였습니다. 예전에 useContext가 redux를 대체할 수 있을 만큼 편리하다고 하여 작은 프로젝트 하나를 redux를 사용하지 않고 useContex만 사용해서 만들어본 적이 있다. 먼저 context를 작성합니다. import { createContext, useReducer } from "react"; // reducer const initialState = { admin: false } const reducer = (state, action) => { switch(action.type) { cas..

참조: https://ko.reactjs.org/docs/hooks-reference.html#useref useRef는 생각보다 유용합니다. SPA에서는 변화에 따른 렌더링으로 객체에 직접 접근하는 것은 위험합니다. 그렇기 때문에 React에서는 useRef hook을 지원합니다. useRef가 직접 객체에 접근하는 것을 가능하게 해주는 이유는 매번 렌더링을 할 때마다 동일한 객체를 제공한다고 공식문서에 나와있습니다. 반면, state와는 달리 실시간 변화를 감지하여 변화된 값을 리턴하지는 않습니다. 이게 가능하게 하려면 ref를 따로 setState해줘야 합니다. 1. useRef를 통한 timer만들기 참조 : https://dmitripavlutin.com/react-useref-guide/ 타이..

1. emotion keyframes 사용하기 참조사이트 https://www.npmjs.com/package/@emotion/react https://emotion.sh/docs/keyframes emotion/react 에서는 keyframes를 통하여 기존 CSS에서 사용하였던 애니메이션 keyframe을 그대로 사용할 수 있습니다. 먼저 설치를 합니다. yarn add @emotion/react 간단한 사용법 및 런타임에러가 난다면 여기를 참조하세요. 아주 심플한 floating 애니메이션을 만들어 보겠습니다. 먼저 keyframes를 불러옵니다. floating 애니메이션을 만들고, 스타일에 넣어줍니다. 간단한 세팅만으로 기존에 쓰던 CSS대로 사용할 수 있으니 아주 편합니다. 또한 따로 분리해..

react-draggable : https://www.npmjs.com/package/react-draggable react-draggable React draggable component www.npmjs.com 객체를 자유롭게 드래그하는 모션을 찾다가 직접 구현도 해보았지만 렌더하는 과정에서 buffer가 생기는것 같아 라이브러리를 찾아보았습니다. 아주 쉽고 간단한게 사용할 수 있는 라이브러리 입니다. 1. 설치 npm install react-draggable 2. 불러오기 및 적용 import Draggable from "react-draggable"; export default function App() { const [position, setPosition] = useState({ x: 0, ..

리액트에서 타이핑 효과를 주고 싶어 알아 보았더니 react-typing-effect과 같은 여러 라이브러리가 있었는데, 저는 좀 더 인공지능 스피커가 말하는 느낌을 주고 싶기도 했고, 구현하기 어렵지 않을 것 같아서 만들어 보았습니다. 기능 1. 뿌릴 텍스트 준비 2. 뿌릴 텍스트 (state) 3. 텍스트 길이 체크 (state) import React, { useState, useEffect } from 'react' const TypingText = () => { const txt = "오늘은 뭐 먹지?"; const [Text, setText] = useState(''); const [Count, setCount] = useState(0); return ( { Text } ) } export d..

셀렉트를 사용하기 위해 다음과 같이 jsx 구문을 만들었습니다. 0.1톤 0.2톤 0.3톤 0.4톤 {/* 선택하려던 부분! */} 0.5톤 기존 html 에서 디폴트 옵션을 선택하려면 option 태그안에 selected 속성을 주어 동작 하였습니다. 하지만 리액트에서 이와 같이 사용하려고 한다면, 다음과 같은 에러를 뱉어냅니다. React에서는 selected 대신 value를 사용합니다. 또한 selected의 선택된 value 값을 가져오려면, onChange를 사용해야합니다. 위의 소스를 수정해 보면 이렇습니다. 0.1톤 0.2톤 0.3톤 0.4톤 0.5톤 위의 내용으로도 소스를 적용하기 어렵다면 아래의 내용을 봐주세요! export default function App() { const sel..