react

setState() setState()는 리액트의 함수형 컴포넌트에서 상태를 변경하기 위해 사용되는 hook useState()를 통해 반환되는 함수라고 할 수 있다. setState()의 특징 1. 비동기 동작이다. 2.연속적으로 호출 setState() 호출 시 BATCH(일괄) 처리가 된다. 3.단순히 state 객체를 넘겨줄 수도 있지만 함수형으로 새로운 state를 인자로 넘겨 줄 수 있다. setState()의 연속사용? 리액트에서 state가 변경되면 변경되기 이전의 state로 구성된 element tree와 변경 이후의 state로 구성된 element tree를 비교하여 변경된 부분을 감지하여 DOM에 적용하게된다. 그런데 리액트 내부적으로 이 과정에서 setState() 가 연속적으로..

ref와 state의 차이 state를 변경하면 자동으로 컴포넌트가 렌더링 된다. 함수형 컴포넌트는 말 그대로 함수이다. 따라서 리렌더링이 된다는 것은 말 그대로 함수가 다시 불려지게 되고 컴포넌트 내부 변수들이 초기화 된다. 반면 Ref는 값이 변경되어도 렌더링이 발생하지 않는다. 또한 리렌더링시 값이 유지된다. 이에 따라 ref 값이 변해도 컴포넌트 내부의 변수들이 유지가 된다. 언제 사용하면 좋을까? 1. 값을 변경했을 때 렌더링이 되지 않았으면 할 때 2. state변화 등에 의해서 리렌더링시 값을 유지시키고 싶을 때 3. 특정 DOM 요소에 접근하고 싶을때 => ex) 렌더링시 input의 focus를 주고 싶을 때 state의 값을 업데이트 할 떄와 ref의 값을 업데이트 할 때의 렌더링 유무..

웹팩이란? 웹팩은 React, Vue, angular와 같은 최신 프론트엔드 프레임워크나 라이브러리에서 대부분 쓰인다고 해도 무방하다. 이는 모듈 번들러로 개발자가 웹 어플리케이션을 만들때 html, css, javascript, image 등이 모두 모듈에 해당한다. 이런 분산된 모듈들을 하나로 묶어줘서 결과물을 반환해주는 역할을 한다. 모듈: 어떠한 기능을 수행하는 작은 코드 단위 모듈 번들링: 여러 개의 모듈(파일)들을 하나의 파일로 병합하여 결과물을 내주는 동작 웹팩이 필요한 이유 파일 단위의 자바스크립트 모듈 관리의 필요성 개발자를 위한 자동화 기능 더 빠른 속도와 성능 파일 단위의 자바스크립트 모듈 관리 자바스크립트는 입문자의 관점에서 꽤 편리하게 사용할 수 있다. const a = 5; co..

오류내용 ReferenceError: window is not defined at new PaypalButton (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\react-paypal-express-checkout\dist\index.js:90:13) at processChild (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3305:14) at resolve (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\react-dom\c..

React-Hook 리액트는 두 가지 방법으로 컴포넌트를 만들 수가 있다. 1. Class 형태 2. Function 형태 Class형태는 리액트의 모든 기능들을 파워풀하게 사용할 수가 있다. 하지만 class에서 사용되는 문법들을 알아야하고 다소 복잡하다. 그에 반해 function 형태는 리액트의 제한된 기능만을 사용할 수 있고 Function에서 사용되는 문법만 알면 되기에 단순하다. Function 형태에서 사용할 수 없는 작업은 대표적으로 컴포넌트 내부에 state를 만들어 사용하는 것이다. 또 컴포넌트의 생성,변경,소멸의 event인 life cycle API도 사용할 수가 없었다. 이제는 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있게 Hook이 REACT ..