본문 바로가기

javascript & Node.js/React.js4

재조정 (Reconciliation) 출처원본: ko.reactjs.org/docs/reconciliation.html 재조정 (Reconciliation) – React A JavaScript library for building user interfaces ko.reactjs.org 배열의 요소들을 렌더링하다가 성능이 저하되고, 원하지 않는 동작들이 발생할 때가 생겨서 공식문서를 다시 훑어보다가 좀 더 정확히 알아야 되겠다 싶은 개념이라 글을 작성하기로 했다. React는 선언적 API 를 제공하기 때문에 갱신이 될 때마다 매번 무엇이 바뀌었는지 걱정할 필요가 없다. 이는 애플리케이션 개발을 쉽게 만들어주지만, React 내부에서 어떤일이 일어나고 있는지 명확히 보이지 않는다. React의 비교(diffing) 알고리즘을 만들 때 어떤 .. 2020. 10. 29.
Reactjs + express + webpack4 github.com/lkm36486938/react-express-webpack4 lkm36486938/react-express-webpack4 Contribute to lkm36486938/react-express-webpack4 development by creating an account on GitHub. github.com 순수 개발환경 1. CRA 로 리액트 앱 만들기 2. npm i 로 모듈들 설치 npm i -D express html-webpack-plugin nodemon webpack webpack-cli webpack-dev-middleware webpack-dev-server webpack-hot-middleware webpack-merge babel-loader @babel/co.. 2020. 9. 23.
리액트의 기본구조, 그에 따른 디자인 패턴 리액트가 가지고 있는 기본특성을 살펴보고 어떤 디자인패턴이 리액트에 맞는지 공부하고자 글을 쓰게 됐다. 리액트의 특성 1. 컴포넌트 컴포넌트는 UI의 일부분을 묘사하는 자생적이고 독립적인 아주 작은 엔터티이다. 하나의 애플리케이션 UI는 더 작은 컴포넌트로 쪼개질 수 있다. 각각의 쪼개진 컴포넌트에는 해당 코드와 구조, API가 있다. 2. Props, State 컴포넌트에는 함께 잘동할 데이터가 있어야 한다. 컴포넌트와 데이터를 묶을 수 있는 두가지 방법이 있는데 바로 Props 와 State 이다. props 만약 컴포넌트가 일반적인 자바스크립트 함수라면, props 는 함수의 입력(input)이라 볼수 있다. 은유적으로 표현해본다면, 컴포넌트는 props라고 부르는 입력을 받아 절차를 거치고 JSX.. 2020. 5. 17.
React.js React 란 ? React는 페이스북에서 제공하는 자바스크립트 UI 라이브러리, 즉 프론트엔드 라이브러리 이다. React 를 사용하는 이유 웹페이지를 만들기 위해 굳이 라이브러리나 프레임워크를 사용해야 할 필요는 없다. HTML 과 CSS, 순수 자바스크립트 만으로도 웹페이지를 얼마든지 제작할 수 있다. 특히 단순한 정적 페이지를 만드는 것이 목적이라면 React와 같은 프론트엔드 라이브러리는 큰 이득이 되지 못한다. 하지만 요즘의 웹은 정적이고 단순한 페이지가 아니다. 웹앱 혹은 웹 어플리케이션이라 불릴 정도로 복잡하고 동적이다. 이런 웹 어플리케이션에서 UI 를 동적으로 나타내기 위해서는 복잡하고 많은 상태를 관리해야 하는 부담이 생긴다. 만약 프로젝트 규모가 크고 다양한 UI와 상효작용이 필요하.. 2020. 5. 13.
반응형