Web/Frontend17 [리액트] 이미지 업로더 - 서버에 이미지 Post로 보내기 https://r4bb1t.tistory.com/29를 이용해 클라이언트에서 서버에 이미지를 업로드하면 그 이미지를 표시해주는 업로더를 만들어보자. 클라이언트 | import React, { useState} from "react"; import * as S from "./styles"; import axios from "axios"; import AddAPhotoIcon from "@material-ui/icons/AddPhotoAlternate"; function ImageUploader() { const [imageUrl, setImageUrl] = useState("디폴트 이미지 주소"); const setFile = (e) => {}; return ( setFile(e)} /> ); } expo.. 2020. 7. 20. [리액트] 드래그 앤 드롭, 리사이징 리스트 만들기 개요 | 드래그 앤 드롭으로 순서 변경 및 리사이징까지 가능한 리스트를 만들어보았다. 코드 예시는 맨 밑에 있다. 모듈 설치 | 우선 React DnD 모듈을 사용하기로 했다. 더보기 $yarn add react-dnd react-dnd-html5-backend immutable 드래그 앤 드롭을 원활하게 사용하기 위해 react-dnd 모듈을, Card들을 배열로 관리하기 용이하게 immutable 모듈을 설치해준다. 컴포넌트 만들기 | - Table Table이라는 전체 총괄 컴포넌트 안에 Card 컴포넌트 여러 개가 있고, 카드의 위치 변경이나 리사이즈 등 변화는 전부 Table에서 관리한다. Card에 props로 주는 정보는 카드의 id, 카드의 내용 (children), 카드의 크기(heigh.. 2020. 6. 2. [리액트] 수정 가능한 텍스트 박스 만들기 기본적으로는 그냥 텍스트로 보이지만, 클릭하면 수정할 수 있는 텍스트 박스를 만들어 보자! 우선 필요한 기능은 다음과 같이 간단하다. 1. editable 상태에 따라 plain text / input box로 표시되어야 한다. 2. 엔터 버튼을 누르거나, 컴포넌트 외부를 클릭하면 editable이 false가 되어야 한다. import React, { useState } from "react"; interface TextInputProps { init: string; } function TextInput({ init }: TextInputProps) { const [text, setText] = useState(init); const [editable, setEditable] = useState(fal.. 2020. 5. 25. [리액트] immutable-js 사용해보기 리액트에서 state는 항상 불변이어야 한다. state의 기존 객체를 직접 수정할 수 없고, setState 함수를 통해서만 수정해주어야 한다. 그렇지 않으면 컴포넌트가 재 렌더링되지 않는다. setState 호출 -> shouldComponentUpdate가 true -> 가상 DOM과 실제 DOM을 비교해서 다르면 -> 화면을 다시 그린다. immutable한 변수를 사용하면, 변수의 내용을 하나하나 비교할 것 없이 레퍼런스만 비교하면 되기 때문에 부담이 줄게 된다. 이런 immutable한 변수를 만드는 방법에는 immutability-helper나 immutable-js가 있다. Immutable-js | $ npm install immutable $ yarn add immutable npm이나.. 2020. 5. 21. [리액트] TypeScript, Styled-Components 프로젝트 초기 셋팅 $ npx create-react-app my-app --typescript TypeScript와 Styled-Components를 같이 이용할 것이다. npx create-react-app에 --typescript 옵션을 줘 my-app이라는 프로젝트를 만들어준다. $ cd my-app $ npm install --save @types/styled-components 프로젝트 폴더로 이동한 후 Styled-Components를 설치한다. 와! 2020. 5. 14. 이전 1 2 다음
tokki
