반응형

개발공부/웹 29

[React] memo와 react hook

PureComponent 클래스와 같은 역할을 한다. props 데이터가 변경되었을 때만 컴포넌트를 업데이트한다. memo 사용법 import React, { memo } from 'react'; //memo를 import 한다. const Card = memo(props => { // props를 전달해준다. ... // 코드 작성 } ); react hook 함수에서도 라이프 사이클을 사용할 수 있게 해주는 것. state를 선언할 때 useState를 사용하면 된다. const [count, setCount] = useState(0); useState는 아무리 호출돼도 동일한 값을 메모리에 저장해놓기 때문에 걱정하지 않아도 된다. 클래스와 함수의 차이점 클래스는 한 번 만들어지면 멤버 변수는 처음에..

개발공부/웹 2022.04.23

React의 pureCompoent 특징

1. 리액트는 Component의 집합이다. 2. 데이터가 하나라도 변경되면 전체적으로 애플리케이션이 re-render 된다. 모든 elements들이 rerender 되지만, 리액트는 Virtual DOM에 이 트리를 보관하고 있고, 실제 DOM과 V-DOM을 비교해서 필요한 부분만 업데이트한다. 문제점 데이터가 변경되지 않아도 컴포넌트만 변경되면, 라이프 사이클에 등록한 로직이 수행된다. 만약 그 로직이 무거운 일이라면, 예상하지 못하게 불필요한 일을 해야할 수 있다. 이걸 방지하는 방법이 pureComponent(class인 경우)와 memo(function인 경우)이다. pureComponent와 memo 특징 컴포넌트의 state, props에 변화가 없다면 render 함수를 부르지 않는다. ..

개발공부/웹 2022.04.23

[React] html과 jsx의 차이

html은 마크업 언어이고 jsx는 자바스크립트 코드이다. jsx로 작성한 코드를 Babel이 html과 javascript로 변환하게 된다. jsx는 장점은 UI를 만드는 코드에 비즈니스 로직을 작성할 수 있다는 장점이 있다. {}(중괄호)로 감싸서 코드를 넣으면 된다. return 부분에 ui가 들어가는데 꼭 하나의 노드로 만들어서 리턴해줘야 한다. 스타일링을 해줘야 할 때는 div 태그를, 그게 아니라면 비어있는 를 사용하면 된다.

개발공부/웹 2022.04.19

[React] 클래스 컴포넌트 함수 컴포넌트

Class Component state에 가지고 있는 상테와 데이터를 담을 수 있다. 라이프사이클 메소드를 사용할 수 있다. function Component state가 없다. 라이프사이클 메소드가 없다. 리액트 16.8 버전부터는 리액트 훅을 사용해서 state, life cycle을 사용할 수 있다. 함수에 리엑트 훅이 생긴 이유 클래스에서 멤버변수에 접근할 때는 앞에 this를 붙여야 한다. 이런 this의 중복이 불편하고, 바인딩 이슈가 있어서 불편하다. memo Higher Order Component

개발공부/웹 2022.04.19

React 개발에 유용한 툴

Chrome React Developer Tools 리액트 애플리케이션의 컴포넌트 구조를 확인할 수 있는 툴이다. 디버깅 시에도 유용하게 사용된다. React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 46a98cff2 on 3/30/2022. chrome.google.com reactjs snippet 컴포넌트를 rcc 명령어로 자동 생성할 수 있다. auto import 다른 리액트 컴포넌트를 자동으로 import 해준다.

개발공부/웹 2022.04.16

웹개발에 많이 사용되는 툴 정리

Babel ECMA 2015년 이후 버전의 코드를 예전 버전으로 변환해주는 툴. 타입 스크립트, jsx 등의 코드를 브라우저가 이해할 수 있도록 순수 자바스크립트로 변환해준다. 예전 버전을 사용하는 브라우저는 최신 코드를 이해하지 못할 수 있어서 이런 변환이 필요하다. webpack 작성한 소스코드와 리소스 이미지를 묶어서 번들 단위로 사용자에게 제공한다. (번들링) 코드 길이를 줄여주고 minify, uglify를 담당하고 있다. ESLint 코드에 잘못된 점이 있으면 경고 사인을 보내주는 툴 Jest 유닛 테스트를 할 수 있게 도와주는 테스팅 프레임워크 PostCSS CSS 전처리기 중 하나. less, sass와 비슷하다. sass는 정해진 것들만 할 수 있는 반면에, PostCSS는 다양한 플러그..

개발공부/웹 2022.04.16

[React] eject로 숨겨진 툴 확인하기

yarn create react-app [project-name] 을 사용해서 리액트 프로젝트를 만들었다. 프로젝트 내부로 들어가면 이미 git init이 되어있는 걸 볼 수 있다. 즉, git이 숨겨져 있다! 어디에 있을까? yarn eject 명령어로 숨겨져있는 툴을 밖으로 꺼내서 확인할 수 있다. 주의해야 할 점은, eject를 하면 다시 되돌릴 수 없기 때문에 신중해야 한다. eject를 사용한 뒤, package.json 파일을 확인하면 많은 툴이 추가된 걸 확인할 수 있다. 결론 create react-app을 사용하면 많이 사용되는 툴들이 자동으로 설치된다. 회사에서는 create react-app을 사용하지 않고 수동적으로 프로젝트를 관리한다.

개발공부/웹 2022.04.16