본문 바로가기

React

(6)
리액트훅 useState에서 setState함수의 인자값에 대하여 요즘엔 컴포넌트방식이 아닌 Hook방식의 리액트가 표준으로 권장되고 있다. 그래서 기존에 MaterialUI같은 유명한 리액트 UI Framework들도 함수형으로 샘플코드를 바꾸었다. 이때 useState와 useEffect를 동시에 사용하는 방식으로 운용이 된다. 로딩 애니메이션을 넣어주는 코드이다. import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import CircularProgress from '@material-ui/core/CircularProgress'; const useStyles = makeStyles((theme) => ({ root: { display: 'flex', '& > * + *..
리액트에서 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을 사용하는 이유도 없고, 리액트의 큰 장점중 하나인 원본과 비교해 변화된 부분만 계산해서 빠르게 ..
React에서 ref를 사용하는 경우 컴포넌트 내부에서 DOM에 직접 접근해야 할 때 ref라는 것을 사용한다. ref란 본래 html과 css, js를 쓸때 id값을 주고 그 DOM에 직접 접근해서 스타일을 바꿔주거나, 이벤트를 처리시키던 것을 리액트 스타일대로 해주는 것이라고 생각하면 편하다. 리액트는 재사용성이 중요하기 때문에, 리액트 컴포넌트에 id 값을 주면 동일한 아이디가 존재할 가능성이 생기므로 id값은 사용하지 않는게 좋고, 만약 사용해야 한다면 반드시 겹치지 않게 신경써서 짜야한다. ref를 써야하는 경우는 당연히 특정 input이나 box를 기준으로 효과를 주고자 할때, this를 활용해서 ref를 입혀주고 나중에 부모 컴포넌트에서 그 ref를 활용해서 해당하는 ref를 가진 자식 컴포넌트를 조작할수 있다. 컴포넌트끼리 데..
리액트(React) JSX의 개념과 문법 정리 JSX란? JSX는 리액트에서 사용하는 문법인데, 특징은 가독성이 좋게 HTML과 자바스크립트를 표현할 수 있다는 점이다. 원래 자바스크립트는 HTML상에 직접 넣으면 너무 하드코딩이 되기 때문에, 태그 최하단에 를 배치하여 표현하거나 따로 파일로 분리를 했었다. 그래서 자신이 짠 코드가 아니라 타인의 코드를 보면 어떤 이벤트에 연결되는 조건식이 무엇인지 위아래로 또는 다른 파일을 왔다갔다하면서 확인해야만 했다. 그에 반헤 JSX는 비교적 한눈에 그 구조가 파악이 되는 것 같다. import의 원리 import React from 'react' Create React App같은 것을 이용하여 리액트 프로젝트를 만들 때 node_modules라는 디렉토리가 생성이 되는데 거기에 react 모듈이 같이 들어..