컴포넌트객체 지향 언어 용어로 화면 UI를 담당하는 클래스클래스 컴포넌트와 함수 컴포넌트 두 가지 존재리액트가 제공하는 기본 컴포넌트와 리액트 개발자가 필요에 의해 만드는 사용자 컴포넌트 두 가지 존재기본 컴포넌트ex) 사용자 컴포넌트코드를 간결하게 만들기 위해 제작ex) MCV의 뷰(화면 담당)를 독립적으로 구성하여 재사용할 수 있고 컴포넌트를 통해 새로운 컴포넌트를 쉽게 생성할 수 있음, 블록 조립 형태 클래스 컴포넌트React.Component에서 상속하는 사용자 컴포넌트 제작 방식으로 전통적인 방식의 컴포넌트render 메서드를 반드시 구현render를 통해 가상 DOM 객체를 생성하여 전달 함수 컴포넌트클래스 컴포넌트를 함수 형태로 만든 뒤, render 메서드만 함수 몸통으로 구현한 컴포넌트반..

Hook함수 컴포넌트에서 React state와 생명주기 기능을 "연동"할 수 있게 해주는 함수Hooks가 등장하기 이전에는 Class를 기반으로 하는 클래스형 컴포넌트를 사용-> 클래스형 컴포넌트는 코드의 재사용이 어렵고 연관성이 없는 로직을 하나의 생명주기 메서드에서 구현해야 하는 등의 한계가 존재state를 제공함으로써 상태 관련 로직의 재사용을 이전보다 훨씬 쉽게 만들어줌 Hook 종류useState함수형 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅인자로 state의 초기 값을 넘겨줌import React, { useState } from 'react'; // useState Hook을 React에서 가져옴function Example() { // "count", "..

리액트- 웹 프론트엔드 프레임워크로 Javascript 기반 라이브러리- 사용자 인터페이스의 개발을 위해 사용현재 많이 활용되고 있는, 웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리가상 DOM과 JSX 방식으로 동작SPA 개발을 위한 프레임워크사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 사용리액트는 가볍고 유연한 라이브러리로, 필요한 부분에만 적용 가능다른 프레임워크나 라이브러리와의 혼용도 가능하므로 기존 코드를 변경하지 않고도 리액트 도입 가능앵귤러와 뷰는 자신들만의 문법을 갖고 있지만, 리액트는 자바스크립트 기반의 문법을 사용하기 때문에 자바스크립트에 익숙하다면 보다 쉽게 사용 가능  SPA(싱글 페이지 어플리케이션)서버로부터 완전히 새로운 페이지를 불러..