React

react는 인터랙션이 많은 웹앱을 개발하기 위해 사용되는 라이브러리이다.📂 라이브러리 : 어떠한 특정 기능을 모듈화 해놓은 것🔧 프레임워크 : 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있음 (ex: Angular, Vue)프레임워크는 라이브러리를 포함

렌더 엔진이 HTML 문서를 읽어들여서 파싱하고 어떤 내용을 페이지에 렌더링할지 결정한다.브라우저가 DOM과 CSSOM을 결합하는 단계이다. 이 프로세스는 화면에 보이는 모든 콘테츠와 스타일 정보를 포함하는 최종 렌더링 트리를 출력한다. 즉, 화면에 표시되는 모든 노드

원래 두 개 이상의 페이지를 만들 때, a 페이지를 만들면 a.html을, b 페이지를 만들면 b.html을 만들어줘야 했다. 이 방식이 전통적인 웹 사이트를 만들 때 사용하는 Multi Page Application 이다.요즘에는 웹 사이트의 전체 페이지를 하나의

JSX는 자바스크립트에 XML을 추가한 확장 문법이다. 리액트에서는 JSX를 이용해 화면에서 UI가 보이는 모습을 나타내준다.JSX를 이용하면 자바스크립트(logic)와 HTML구조(markup)를 같이 사용할 수 있으므로, 기본 UI에 데이터가 변하는 것들이나 이벤트

컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체이다. State가 변경되면 컴포넌트는 리렌더링(Re-rendering)된다. 또한 State는 컴포넌트 안에서 관리된다.state를 변경하기 위해서는 setState 함수를 사용해야 한다.그러나 setSt

핸들링 함수 선언익명 함수로 처리onClick : 엘리먼트 클릭 시onChange : 엘리먼트 내용 변경 시 (input 텍스트 변경, 파일 선택 등)onKeyDown, onKeyUp, onKeyPress : 키보드 입력 발생 시onDoubleClick : 엘리먼트 더

리액트 v16.8 에 새로 도입된 새로운 기능으로, class없이 state를 사용할 수 있다.원래 함수형 컴포넌트에서는 클래스 컴포넌트의 장점인 state 사용이나 life cycle을 직접 다루는 등의 기능을 사용할 수 없었다. 이를 해결하기 위해 등장한 것이 Ho

React.memo 적용은 간단하게 원하는 컴포넌트를 React.memo로 감싸주면 된다.원래 컴포넌트가 렌더링 될 때 그 안에 있는 함수도 다시 만들게 된다. 그러나 컴포넌트가 리렌더링 될 때마다 똑같은 함수를 계속 다시 만드는 것은 좋은 현상이 아니다. 만약 이 함

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다. 리액트는 SPA이므로 하나의 index.html 템플릿 파일을 가지고 있다. 자바스크립트를 이용해서 다른 컴포넌트를 이 하나의 템플릿 파일에 넣어서 페이지를 변경해주게 되는데, 이때 React

행위 주도 테스트 방법론이 대두되면서 함께 주목 받기 시작한 테스팅 라이브러리다.사용자가 애플리케이션을 이용하는 관점에서 사용자의 실제 경험 위주로 테스트를 작성하고, 사용자가 어떤 이벤트를 발생시켰을 때 그에 따라 화면에 변화가 일어나는지를 테스트한다.구현보다 기능에

상태 관리란, 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것이다.서버의 데이터를 이용해 페이지를 렌더링클라이언트 데이터와 서버의 데이터의 차이가 크지 않음자체적으로 데이터를 가짐서버와 동기화가 필요한 데이터만 처리, 그 외에는

Redux란?앱 전체 상태를 쉽게 관리하기 위한 라이브러리Redux의 많은 개념들이 Flux 패턴에서 차용됨주로 React 앱과 같이 사용됨Single source of truth : Store는 단 하나이며, 모든 앱의 상태는 이곳에 보관됨Immutability :

태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 props이다.컴포넌트 내에 자식 컴포넌트나 html 엘리먼트를 담을 수 있다.or