전체 글 (274) 썸네일형 리스트형 [React.js] 불변성 immer 리액트에서 불변성을 유지하면서 상태를 업데이트 하는 것은 중요하다. 규모가 크고 객체의 구조가 깊은 프로젝트에서 배열이나 객체를 복사하고 새로운값을 덮어 씌우는 등의 방식으로 처리해 나가다 보면 불변성을 유지하면서 상태를 업데이트 하는 것이 힘들다. 그럴 경우를 위한 immer 모듈이 있다. npm i immer 확장프로그램 vscode 초기 설정하기 https://ekgoddldi.tistory.com/206 [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() 이전 1 ··· 21 22 23 24 25 26 27 ··· 35 다음
