React

리액트를 다루는 기술(개정판)을 정독하면서 서술한 내용입니다.서비스의 규모가 커지고, 사용자에게 다양한 인터렉션/동적인 기능을 제공하려면 DOM 요소의 관리가 힘들뿐더러 복잡해지며 성능까지 떨어질 수 있다.이를 해결하기 위해 페이스북에서 구현한 JavaScript 라이

문서 구조를 객체로 표현하는 방법트리 형태의 구조를 가지고 있음동적 UI에 최적화되어 있지 않음.HTML 자체는 정적이나 자바스크립트를 통해 동적으로 만들 수 있음.Virtual DOM은 실제 DOM의 가벼운 사본과 비슷합니다.리액트에서 데이터가 변해서 DOM을 업데이

brew를 통해 node.js와 yarn을 설치vscode의 터미널창에서 yarn create-react-app <프로젝트 이름> 을 입력하여 프로젝트 생성생성 후에 프로젝트 폴더로 이동하여 npm start로 프로젝트 서비스를 실행문법 검사 도구로 vscode의

JSX 자바스크립트의 확장 문법이며, XML과 매우 비슷하게 생겼습니다. 장점 보기 쉽고 익숙하다. 활용도가 높다. > import React from 'react'; > import React from 'react';

자바스크립트의 확장 문법이며, XML과 매우 비슷하게 생겼습니다.함수형과의 차이점은 state 기능 및 라이프 사이클 기능을 사용할 수 있고, 임의 메서드를 정의할 수 있습니다. 클래스형 컴포넌트는 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX

사용자가 브라우저에서 DOM 요소들과 상호작용하는 것을 이벤트라고 합니다.HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 비슷합니다.이벤트 이름은 카멜 표기법으로 작성한다.이벤트에 함수 형태의 값을 전달합니다.DOM 요소에만 이벤트를 설정할 수 있습니다.가독성을

ref(Referene) 개념은 리액트 내부에서 DOM에 이름을 다는 방법입니다.DOM을 직접 건드려야 할 때 사용합니다.특정 input에 포커스 주기스크롤 박스 조작하기Canvas 요소에 그림 그리기 등ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로

자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있습니다.map() 함수 레퍼런스key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용합니다.key 값을 설정할 때는 map 함수의 인자로 전달되는

모든 리액트 컴포넌트에는 라이프 사이클(수명 주기)이 존재합니다.클래스형 컴포넌트에서만 사용이 가능하고, 함수형 컴포넌트에서는 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있습니다.메서드의 종류는 총 9가지 입니다.Will~ 접두사 메서드 : 어떤 작업을 작동하

Hooks 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있습니다. useState 가장 기본적인 hooks이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줍니다. useEffect 컴포넌트가 렌더링될 때마다 특정