React

· React
7장 컴포넌트의 라이프사이클 메서드 1) 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 2) 렌더링 되기 전 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. 3) 라이프사이클 메서드는 클래스 컴포넌트에서만 사용 가능하다. (함수형 컴포넌트에서는 Hooks를 사용해 비슷하게 처리할 수 있다) 컴포넌트를 처음 렌더링 할 때 어떤 작업을 처리해야 하거나 업데이트 전후 작업을 처리, 불필요한 업데이트를 방지해야 할 수도 있다. 7️⃣.1️⃣ 라이프사이클 메서드의 이해 총 9가지 메서드가 있다. Will 접두사가 붙으면 작업 전 실행되는 메서드 Did 접두사가 붙으면 작업 후 실행되는 메서드 라이프사이클은 총 3가지, 마운트 - 업데이트 - 언마운트 카테고리로 나뉜다. 마운트 : DOM이 생성..
· React
컴포넌트에 대해 알아볼 것이다. 컴포넌트는 클래형 컴포넌트와 함수형 컴포넌트가 있다. 💙함수형 컴포넌트를 사용하는 것이 더욱 편리하고 깔끔해 보여서 리액트 개발자들도 사용을 추천한다.💙 하지만, 함수형만 알면 안될거 같아 클래스형 컴포넌트도 정리하겠다. 3.1 클래스형 커포넌트 컴포넌트 선언 방식 중 클래스형 컴포넌트이다. import { Component } from 'react'; class MyComponent extends Component{ render() { const name = react; return ( {name} ); } } export default MyComponent; 클래스형 컴포넌트에서는 render함수가 꼭 있어야 하며, 유저에게 보여주고자 하는 JSX를 return을 통해..
· React
JSX : 자바스크립트의 확장 문법이며 브라우저에서 실행전 번들링에서 바벨을 통해 일반 JS형태로 바꿈 JSX를 사용하면 React.creatElement함수를 사용할 필요가 없기에 편하게 UI렌더링 가능 JSX는 JS문법이 아니다 (바벨로 사용할 수 있게 설정한 것이다) 더보기 ReactDOM.render 컴포넌트 페이지에 렌더링 하는 역활 첫번째 파라미터에서 페이지에 렌더링할 내용을 JSX로 작성 두번째 파라미터에서 해당 JSX를 렌더링할 도큐먼트 내부요소 작성 React.StrictMode 리액트 프로젝트에서 리액트의 래거시 기능들을 사용하지 못하게 하는 기능 나중에 사라질 문자열 ref, componentWillMount 등을 사용했을 때 경고를 출력 JSX의 장점 1️⃣보기쉽고 익숙하다 2️⃣더..
· React
리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것이다. 먼저 DOM에 대해 알아보자 DOM(Document Object Model) : 객체로 문서 구조를 표현하는 방법이며 XML이나 HTML로 작성된다. 트리형태로 구성되며 특정 노드를 찾거나 수정, 제거가 가능하고 원하는 곳에 추가 가능하다. 웹브라우저는 DOM을 활용하여 객체에 JavaScript와 CSS를 적용한다. 💢규모가 큰 웹 어플리케이션에서 DOM이 느린이유 - DOM 자체는 JavaScript와 비교했을 때 느리지 않다. 하지만 웹브라우저 단에서 DOM에 변화를 감지하여 브라우저가 CSS를 재연산, 레이아웃 재구성, 페이지 리페인팅 하는 과정으로 느려지는 것이다. 🔰해결법🔰 - DOM조작시 웹을 업데이트하면 성능저하가 발생..
· React
먼저 기본적으로 알고 들어가야할 정보들을 정리해 보자 프래임워크들은 주로 MVC(Model-View-Controller), MVVM(Model-View-View-Model) 아키택처를 사용한다. 예외적으로, Angular는 MVW(Model-View-Whatever) 아키택처로 어플리케이션 구조화 한다. ※Whatever는 View와 Model을 중개하는 역활을 수행하며 Controller, View, Model 등 다양한 방식의 페턴으로적용됨 MVC 아키텍처 - 개발할때, 3가지 형태로 역활을 나누어 개발하는 방법. - 반영 과정에서 보통 뷰를 변경함 장점 - 비즈니스 처리로직과 사용자 인터페이스 요소들을 분리시켜 서로 영향없이 개발하기 수월한 장점. - 단순하고 직관적임 단점 - View와 Model..
58청춘
'React' 카테고리의 글 목록 (8 Page)