basic (173) 썸네일형 리스트형 [React.js] react-virtualized로 컴포넌트 최적화하기 npm i react-virtualized github.com/bvaughn/react-virtualized/tree/master/docs#documentation bvaughn/react-virtualized React components for efficiently rendering large lists and tabular data - bvaughn/react-virtualized github.com List의 틀이 되는 부분 import { List, AutoSizer } from 'react-virtualized' //AutoSizer 부모의 크기를 받아옴 function TodoList(props) { const rowRenderer = useCallback( ({ index, key, sty.. classnames 모듈 npm i classnames import classnames from 'classnames' {}안의 값을 클래스를 가지고 있다면 ' '안의 값을 클래스로 가지는 조건부 기능이다 cn으로 줄여서 많이 쓰는듯 import cn from 'classnames' Sass Scss npm node-sass .scss 확장자는 기존 css를 작성하는 방식과 유사하다. 반면에 .sass 확장자는 { } ;를 사용하지 않는다. 변수 선언은 $변수 이름; 재사용되는 스타일블록은 @mixin 스타일블록명(변수){ 함수내용 } @include 스타일블록명(값); &.클래스명은 현재 감싸고 있는 스타일 클래스와 같이 쓰였을 때를 가리킴 ex) .box 안에 &.red라면 .box .red 클래스가 같이 쓰인 경우를 말함 @import './경로'; 를 통해 다른 .scss파일을 불러올 수 있다. 비구조화 할당 리액트 hook 중 하나인 useState도 ( ex/ const [Id, setId] = useState('') ) 배열의 비구조화 할당이다 const Human { name : PhoneGilDong } const { name } = Human 와 const name = Human.name 은 같은 의미 Human.name을 비구조화 할당으로 name이라는 변수에 PhoneGilDong을 담아주는 것이다. 구조를 분해해서 할당하는 것, 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담아주는 것 developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 구조 분해 할당 - JavaScript |.. [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'){ //엔터누르면 발생할 내용 } } filter() Array.prototype.filter() filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter Array.prototype.filter() - JavaScript | MDN Array.prototype.filter() filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. The source for this interactive example is stored in a GitHub repository. If you'd like to contribute devel.. 이전 1 ··· 11 12 13 14 15 16 17 ··· 22 다음