basic (173) 썸네일형 리스트형 [React.js] Redux 개념 단순히 전역상태 관리를 한다면 Context Api를 사용하는 것만으로도 충분하다. 하지만 더 세부적이고 체계적으로 관리해야 되는 큰 프로젝트라면 리덕스를 사용하는 편이 유지 보수적인 측면이나 작업 효율도 더 좋다고 한다. 1. ACTION 상태의 변화가 발생하면 액션이 발생한다. 액션은 하나의 객체로 표현되는데 다음과 같이 표현되며, type을 반드시 가지고 있어야 한다. { type: 'NEW_ACTION', text: 'Hello World' } type 이 외의 값들은 상태가 변화될 때 참고하는 값으로 작성자가 임의로 넣을 수 있다. 액션 = 상태 정보 객체 // 어떤 일이 일었나는지 저장하는 것 developer.mozilla.org/ko/docs/Web/JavaScript/Reference/G.. onContextMenu 마우스 우클릭 이벤트 onContextMenu={e => { e.preventDefault(); //버튼을 마우스 우클릭시 메뉴가 뜨는 것을 방지해 준다. }} onClick이벤트는 좌클에 대한거 onContextMenu는 우클 이벤트 [React.js] Context import React, { createContext } from 'react' => 새 context를 만드는 함수 createContext 자식 컴포넌트 또는 손자 컴포넌트에서 필요한게 있고 필요하지 않은게 있을 수 있다. 이 때 context를 이용하여 필요한 요소만 공급해서 성능을 향상시킬 수 있다. => provider와 consumer 단순히 전역 상태 관리만 하면 Context API를 사용하는 것만으로 충분하다. 하지만 더 세부적이고 체계적으로 관리하려면 리덕스를 사용하는게 좋다. [React.js] 이벤트핸들러 인자 전달 인자가 없을 경우에 항상 onClick={deleteHandler} 이런식으로 썼기 때문에 평소와 같이 onClick={deleteHandler(image)} 썼더니 안되고 onClick={() => deleteHandler(image)} 화살표 함수로 작성하니 정상 작동됨 예제를 보면 아래와 같이 되있는데 this.deleteRow(id, e)}>Delete Row Delete Row ko.reactjs.org/docs/handling-events.html 이벤트 처리하기 – React A JavaScript library for building user interfaces ko.reactjs.org overflow-x, overflow-y 스크롤 리액트에서는 overflowX, overflowY scroll, auto, hidden, visible(default) scroll은 스크롤바 항상표시 auto는 분량이 넘쳐서 스크롤 생길 경우에만 표시됨 www.w3schools.com/cssref/css3_pr_overflow-y.asp CSS overflow-y property CSS overflow-y Property Example Show different overflow-y property values: div.ex1 { overflow-y: scroll; } div.ex2 { overflow-y: hidden; } div.ex3 { overflow-y: auto; } div.ex4 { overflow-y: visible; } Try it Yo.. [Node.js] multer 파일 저장 npm i multer -s dropzone으로 업로드를 했다면 multer로 파일을 저장해보자 ekgoddldi.tistory.com/81?category=955664 [React.js] dropzone 파일 업로드 npm i react-dropzone -s npmjs.com/package/react-dropzone react-dropzone Simple HTML5 drag-drop zone with React.js www.npmjs.com import React from 'react' import Dropzone from 'react-dropzone'.. ekgoddldi.tistory.com www.npmjs.com/package/multer multer Middleware for handling .. [React.js] dropzone 파일 업로드 npm i react-dropzone -s npmjs.com/package/react-dropzone react-dropzone Simple HTML5 drag-drop zone with React.js www.npmjs.com import React from 'react'import Dropzone from 'react-dropzone' console.log(acceptedFiles)}> {({getRootProps, getInputProps}) => ( Drag 'n' drop some files here, or click to select files )} [React.js] react-router-dom npm i react-router-dom -s 패키지 설치 import { Route, Switch, BrowserRouter } from "react-router-dom"; // pages import import Home from './Comp/Home' import About from './Comp/About' import DashBoard from './Comp/DashBoard' function App() { return ( ); } export default App; 최상단에 BrowserRouter로 감싸줘야 한다. exact를 안넣어주면 '/', '/about'도 똑같이 Home 컴포넌트가 나올 것이다. switch는 링크와 매칭되는 첫번째 라우트만 보여주고 나머지는 보여주지 않는다 따라서.. 이전 1 ··· 12 13 14 15 16 17 18 ··· 22 다음
