REACT

돔(DOM)이란 Document Object Model의 약자이며, HTML 및 XML 문서를 위한 API이다.개발자는 DOM을 사용하여 문서를 작성하고 구조를 탐색하며, 돔에 요소 또는 내용을 추가, 수정, 삭제할 수 있다. 모든 브라우저에는 HTML 문서를 DOM으

컴포넌트props를 input으로 하고 UI가 어떻게 보여야 하는지 정의하는 React Element를 output으로 하는 함수이다.컴포넌트 설계가 갖는 장점컴포넌트의 가독성이 매우 높고 간단하여 유지보수하기가 쉬우며, 간편한 UI 수정 및 재사용에 용이하다. 요구

컴포넌트 기반 SPA(Single Page Application) 라이브러리라는 점이다.컴포넌트 단위로 변화사항을 감지하고 렌더링이 필요한 부분만 바꾸어주는 기능은양쪽의 프레임워크가 목적론적으로나 방법론적으로나 동일하다.둘 다 virtual DOM을 기반으로 하며, t

Props는 개발에서 많이들 사용되는 용어인 프로퍼티(properties)의 줄임말입니다.Props는 React에서는 사용자가 컴포넌트에 전달해서 보관하길 원하는 데이터입니다.즉, 컴포넌트 내에서 데이터가 보관되면, 이 데이터는 수정되지 않고 보존되어야 하는 법칙이 성

predictable state container for JS appsstate 상태 관리 library출처: 더 알아보기 예를 들어 댓글을 관리하는 component 중 하위 component에서 변경이 일어나면그 변경된 값이 상위 component를 타고 올라가야

출처: 더 알아보기React Hooks are functions that let us hook into the React state and lifecycle features from function components. React Hooks are currently a

최신 JavaScript 문법을 지원하지 않는 브라우저들을 위해최신 JavaScript 문법을 구형 브라우저에서도 돌 수 있게 (ES5 문법으로) 변환많은 모듈들을 합하여 간단하게 만들어 준다(번들 시킨다)src 폴더 안을 관리 / public 폴더는 관리하지 않는다.

단일 페이지로 구성된 웹 어플리케이션을 말한다. 출처: 더 알아보기화면이동 시에 화면 이동에 필요한 HTML을 서버사이드에서 받아서 처음부터 다시 로딩하기 때문에 시간이 걸린다.화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고 서버사이드에는 필요한 데이터를 요

리액트 디자인패턴 1) Container Component Redux action dispatch를 담당한다. dispatch에는 Ajax call이 될 수 있고, store update가 될 수 있다. Redux에 선언된 Action들을 import받고 dispat

index.js에 브레이크포인트를 설정하려면, 줄번호 왼쪽의 빈 공간을 클릭하면 브레이크포인트가 설정되며 빨간 원 모양이 보이며 디버깅을 시작한다.React 앱과 함께 webpack을 사용중이라면, webpack의 HMR 메커니즘의 장점을 이용해 훨씬 효율적인 워크플로

리액트 컴포넌트를 작성할 때 쓰는 문법이며, HTML 이랑 비슷하지만 지켜야하는 규칙이 있다.컴포넌트에 여러 요소가 있다면 반드시 부모 요소로 감싸주어야 한다.JSX 안에서는 자바스크립트 표현식을 쓸 수 있다.JSX 내부에서 코드를 { } 로 감싸면 된다.JSX 내부의

The rendering process of a web page. 참고 자료Reflow and repaint 성능 비용렌더링 최적화렌더링 단계에서 생성하는 것이 아니라 정적으로 생성해준다.데이터로 분리할 수 있는 값은 따로 상수처럼 사용해준다.부모에게 리렌더링이

React 공식 문서에 나와있는 React 정의. 라이브러리라고 표기 되어있다. “React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를

강의 링크store의 저장소이며 Context.Provider의 value를 return하여 데이터를 전달useContext()를 통해 Provider의 state를 사용할 수 있다.강의 링크상태관리 매니저(ex. ContextAPI, MobX)이며기존 부모 컴포넌트로

REACT Admin

벨로퍼트와 함께하는 모던 리액트 내용을 학습하며 정리한 내용입니다.특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결을 해주어,업데이트 하는 작업을 간소화 해주는 방식메모리상에 가상으로 존재하는 자바스크립트의 객체인 Virtual DOM을 이용하여,상태가 업데이트 될

벨로퍼트님의 리액트의 Hooks 완벽 정복하기 내용을 학습하며 정리한 내용입니다.Hooks는 리액트 v16.8에 새로 도입된 기능으로,기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.상태를 관리해야 할 때 사용배열 비구조화 할당 문법을 사용함

벨로퍼트님의 함께하는 모던 리액트 내용을 학습하며 정리한 내용입니다.웹 애플리케이션을 만들 땐 데이터를 브라우저에서만 들고 있는게 아니라,데이터를 보존하고, 다른 사람들도 조회 할 수 있게 하려면서버를 만들고 서버의 API 를 사용해서 데이터를 읽고, 써야 한다.자바스