React

자바스크립트 프론트엔드 라이브러리 주로 모델과 뷰의 구조.MVC, MVW모델은 앱에서 사용하는 데이터 관리뷰는 사용자가 보는 부분사용자의 입력을 받으면 컨트롤러는 데이터를 수정 후 뷰에 반영앱의 규모가 클수록 복잡해짐리액트는 데이터가 변할때 마다 변화를 주는 것이 아닌

import모듈을 불러와 사용하는 것은 원래 브라우저에 없던 기능브라우저가 아닌 환경에서 js를 실행할 수 있게 해주는 Node.js에서 지원하는 기능.이러한 기능 브라우저에서도 사용하기 위해 bundler 사용.대표적 번들러로 웹팩.번들러 도구를 사용하면 import

리액트로 애플리케이션 설계 시 사용자가 볼 수 있는 요소는 여러 컴포넌트로 구성.

이벤트(event): 사용자가 웹 브라우저에서 DOM요소들과 상호작용 하는것마우스의 onmouseover, onclick, Form의 onchange 등등html에서 DOM요소에 이벤트 설정하는것과 비슷html에서는 이벤트 실행하면 " " 사이에 있는 js 코드 실행됨

일반 html에서 DOM 요소에 이름 달 때 id 사용

리액트에서 코드가 반복될 때 효율적으로 관리하는 법 map() 함수 map은 파라미터로 전달된 함수를 사용해 원하는 규착에 따라 변환 후 새로운 배열 생성 map의 파라미터 콜백 함수 currentValue: 현재 처리하고 있는 요소 index: 현재 처리하

HooksHooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴호는트에서 하 수 없었던 작업들 할 수 있게 해줌ㄴ useState, useEffect 등useStateuseState는 가장 기본적인 Hook이며 함수형 컴포넌트에서도 가변적 상태 지닐 수 있게

일반 CSSSass자주 사용되는 CSS 전처리기(pre processor)확장된 CSS 문법CSS Module스타일 작성 시 CSS클래스가 다른 CSS클래스의 이름과 충돌 않도록 파일마다 고유 이름 자동 생성styled-components스타일을 js파일에 내장시키는

많은 데이터를 렌더링 할 때 느려짐. lagging느려지는 원인컴포넌트는 다음과 같은 상황에서 리렌더링 발생자신이 전달받은 props가 변경될 때자신의 state 변경될 때부모의 컴포넌트 리렌더링 될 때forceUpdate 함수 실행될 때

앞서 컴포넌트 업데이트 성능 최적화 방법, 불변성 유지하는것의 중요성 배움전개 연산자와 배열 내장 함수 사용하면 배열/객체를 간단하게 복사/덮어쓰기 할 수 있다하지만 객체 구도 깊어지면 불변성 유지하면서 업데이트 하기 매우 힘듦복잡하고 가독성 떨어짐.이런 상황에서 im

SPASingle Page Action한개의 페이지로 이뤄진 애플리케이션전통적 웹 패이지는 여러 페이지로 구성되어 있다사용자가 다른 페이지로 이동시마다 새로운 html 받아오고 로딩시마다 서버에서 리소스 전달받아 해석한 뒤 화면에 보여줌즉 보이는 화면은 서버에서 준비했

비동기 작업에는 흔히 콜백함수가 쓰인다.하지만 콜백함수가 여러번 중첩되어 가독성이 나빠지기 쉽고이를 콜백 지옥 이라고 부른다.Promise이럴 해결하기 위해 ES6부터 Promise 가 도입되었다.async/awaitasync/await은 Promise를 더 쉽게 사용

Props (properties)props는 부모 컴포넌트가 자식 컴포넌트에세 값 전달시 사용한다. 읽기 전용클래스형 컴포넌트일때부모 컴포넌트자식 컴포넌트2\. 함수형 컴포넌트일때부모 컴포넌트자식 컴포넌트States컴포넌트 자기 자신이 갖고 있는 값.setState,