본문 바로가기
리액트에서 classnames 사용방법 classnames는 CSS 클래스를 조건부로 설정할 때 유용한 라이브러리이다. yarn 혹은 apt-get으로 yarn add classnames 해준다. 간략하게 설명하자면 가독성이 좋게 여러가지 클래스를 넣어줄수도 있고, 문자열, 키밸류쌍으로된 객체, 배열등을 classNames()의 소괄호 안에 넣어서 사용할 수 있다. 객체안에 밸류값으로 true나 false값을 갖는 boolean을 줄 수 있기 때문에 리액트에서는 부모로부터 전달받은 props의 상태값에 따라 스타일의 변화를 줄때 사용하면 좋다. const MyComponent = ({ highlighted, theme }) => { Hello }; 예시 코드는 classnames를 사용하지 않고 순수 자바스크립트와 리액트만 가지고 조건부 클래..
[리액트 훅(ReactHooks)] useMemo와 useCallback [주의 : 이해를 해가는 과정을 적은거라 정확하지 않은 추상적인 설명이 있을수 있습니다.] -지나가시던 고수분들 틀린 부분 지적해주시면 반영하겠습니다. useCallback은 useMemo와 비슷하다. 불필요한 호출이나 랜더링을 최적화해주는넘 . useMemo가 인풋에 무언가가 써지고 있을때 평균값 계산을 계속하고 있던것을 인풋이 수정되다가 최종적으로 컨켓한후 list배열에 list로 안착이 되었을때 호출토록 했다면 useCallback에서는 컴포넌트가 랜더링 되는걸 지금은 꽤 숫자를 줄이긴했지만 그래도 리랜더링이 될때마다 함수 onChange와 onInsert가 계속 생성 되는 낭비를 줄여보도록 할 수 있다. useCallback의 첫 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열..
리액트(React)의 불변성과 map, filter, concat, slice 자바스크립트의 배열 내장함수에는 push, splice, pop, concat, slice, map, filter 이런것들이 있다. 이중에는 push, splice, pop은 원본 배열의 변경하는 녀석들이고, concat, slice, map, filter는 원본 배열을 복사해서 새로운 배열을 만들어내는 녀석들이다. 리액트에서는 상태(State)를 업데이트할 때 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 한다. 이를 불변성 유지라고 하는데, 불변성을 유지해주어야 나중에 리액트 컴포넌트의 성능을 최적화 할 수 있기 때문이다. 만약 상태를 계속해서 바꿔버리고, 유지시키지 못한다면 VirtualDom을 사용하는 이유도 없고, 리액트의 큰 장점중 하나인 원본과 비교해 변화된 부분만 계산해서 빠르게 ..

티스토리툴바