basic/React.js (42) 썸네일형 리스트형 [React.js] Hooks ko.reactjs.org/docs/hooks-reference.html Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org useMemo Hook는 렌더링하는 과정에서 특정 값이 바뀌었을 때(ex/입력값이 변경되었을때)만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 것이다. useMemo(() => '변경되면 실행할 작업', [변경되는 요소]) useCallback Hook은 리렌더링 될 때 새로운 함수 인스턴스가 생성되는 것을 방지한다( 리렌더링시 함수를 다시 만드는 걸 방지함) const memoizedCallback = useCallback( (.. [React.js] ref DOM을 사용해야하는 경우 state만으로 해결이 안되는 경우 - 특정 input에 포커스를 줘야하는 경우 - 스크롤 박스를 조작해야하는 경우 - Canvas 요소에 그림을 그려야하는 경우 등 이러한 경우에는 DOM에 직접 접근해야 하므로, state만으로는 해결되지 않는다. 따라서 ref를 사용해야 한다 React.createRef() [React.js] 몇가지 이벤트 제어 방법 //useState input이벤트 const [text, setText] = useState('') const onChangeHandler = e => setText(e.target.value) // //클래스 컴포넌트에서 input 한번에 제어하기 const onChangeHandler = e => { this.setState({ [e.target.name]: e.target.value }) } // //Enter 이벤트 const onEnterHandler = e =>{ if(e.key === 'Enter'){ //엔터누르면 발생할 내용 } } [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 [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 )} 이전 1 2 3 4 5 6 다음
