리액트 5

리액트 1. 리액트 이해, 초기렌더링, render함수 ,DOM,리렌더링, Virtual DOM 뭔지 용어 (반복학습)

자바스크립트는 현재 웹 어플리케이션에서 가장 혁신적인 역할을 하고 있다 . 영역을 확장하여 서버 사이드는 물론 모바일 , 데스크톱 어플리케이션에도 적용이 가능하다. 이렇게 자바스크립트만으로 규모가 큰 애플리케이션을 만들기위해 여러 프레임워크 들이 등장하게 되웠다. 주로 MVC, MVVM 아키텍처를 사용한다. 페이스북 개발 팀은 이를 해결하기 위해 어떤 데이터가 변화 할 때마다 어떤 변화를 줄지 고민하는것이 아니라 기본 뷰를 버리고 처음부터 새로 렌더링하고자 하였다 그런데 변화에 따라 렌더링을 계속하면 cpu 점유율도 크게 증가하고 메모리도 많이 사용하게 된다. 그래서 성능을 최대한 아끼면서 사용할 수 있도록 개발한 것이 리액트 이다. 리액트 이해 리액트는 MVC MVW 등인 프레임워크와 달리 오직 Vie..

React 에서 불변성을 지켜야 하는 이유?

자바스크립트에서 불변성은 : 메모리 값을 변경할수 없는 것 의미다. 얕은 복사 와 깊은 복사가 있다 얕은 복사는 객체 a.b 가 있으면 데이터의 주소를 똑같이 참조 하고 있음 a객체에 접근헸음에도 b객체의 값이 달라지는 것 (참조타입 객체 예시를 생각하면 쉽다) 생략... 깊은 복사는 아예 새로운 객체 안 속성 (property) 만 복사해서 사용하는 것 이다. spread 연산자를 사용하여 { ... x} 불변성을 유지시킨다. React에서 state 의 변화값을 비교하는 데에서는, 불변성을 지켜주어야 변경됨을 인지한다 React의 함수형 프로그래밍에서 사용되는 순수함수는, 동일한 값을 인풋하였을 때 동일한 값을 아웃풋하는 함수를 뜻하며, 외부의 값을 변경하는 것과 같은 사이드 이펙트를 막는 함수이다 ..

Redux 왜 사용하는가? 리덕스 사용

리덕스 = 자바스크립트 중 라이브러리 이다 npm i redux react-redux 먼저 사용하기 위해서 터미널 창에 install 해주세요! 왜 리덕스쓰는 이유 2가지 1. 모든 컴포넌트가 props 없이 state에 직접 꺼내 쓸 수 있다. 2. 상태 관리가 용이하다(유지보수 좋다) 설명: 상태 / 한 곳에 관리 가능하다 관리 / 추적이 쉽다 설명 🫵🏻🫵🏻 리액트 에서 부모 컴포넌트 자식컴포넌트가 있다 자식에게 부모 컴포넌트를 주기 위해 우리는 props 를 사용한다. state 변수에 props 전송 하는 방법이 useState ! 좀 더 편리 한 방법으로 전송하기위해 직접주는게 아니라 필요 할 때 내가 꺼내 쓸 수 있도록 하는 것 이다. Life Cycle 라이프 싸이클 개념 알고가기 컴포넌트 ..

리액트란? React.js

Single Page Application = SPA 리액트는 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는 데 사용되는 오픈 소스 JavaScript 라이브러리입니다. 웹 및 모바일 앱의 view layer를 처리하는 데 사용됩니다. 또한 React를 사용하면 재사용 가능한 UI 구성 요소를 만들 수 있습니다. React는 Facebook에서 일하는 소프트웨어 엔지니어 jordan walke가 처음 만들었습니다. React를 사용하면 개발자가 페이지를 다시 로드하지 않고도 데이터를 변경할 수 있는 대규모 웹 애플리케이션을 만들 수 있습니다. React의 주요 목적은 빠르고 확장 가능하며 단순합니다. 리액트 실행방법 터미널에서 npx create-react-app..

카테고리 없음 2022.10.07