✨ 모든 리액트 컴포넌트에는 라이프사이클(생명 주기)이 존재 !컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝남라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능함수 컴포넌트에서는 Hooks 기능을 사용하여 비슷한 작업 처리 가능 라이프사이클라이프 사이클은 총 세 가지, 즉 마운트, 업데이트, 언마운트 카테고리로 나눔 마운트DOM이 생성되고 웹 브라우저상에 나타나는 것constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드render: 준비한 UI를 렌더링하는 메서드componentDidMount: 컴포넌트가 웹 브라우저상에 나타..

📍 map 함수파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하면 반복되는 컴포넌트 렌더링 가능함🧩 문법arr.map(callback, [thisArg])callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지currentValue: 현재 처리하고 있는 요소index: 현재 처리하고 있는 요소의 index 값array: 현재 처리하고 있는 원본 배열this.Arg(선택 항목): callback 함수 내부에서 사용할 this 레퍼런스 데이터 배열을 컴포넌트 배열로 변환하기const IterationSample = () => { const names = ["눈..

ref리액트 프로젝트 내부에서 DOM에 이름을 다는 방법DOM을 직접 건드려야 할 때 ref 사용특정 input에 포커스 주기스크롤 박스 조작하기Canvas 요소에 그림 그리기 등 콜백 함수를 통한 ref 설정ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달콜백 함수는 ref 값을 파라미터로 전달받음함수 내부에서 파라미터로 받은 ref를 컾포넌트의 멤버 변수로 설정 {this.input=ref}} />this.input은 input 요소의 DOM을 가리킴 createRef를 통한 ref 설정리액트에 내장되어 있는 createRef라는 함수 사용리액트 v16.3부터 도입됨컴포넌트 내부에서 멤버 변수로 React.createRef()를 담아 주어야 함해당 멤버 변수를 ref를 달고자 하는..

이벤트사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것버튼에 마우스 커서를 올렸을 때 onmouseover 이벤트 실행버튼을 클릭했을 때 onclick 이벤트 실행Form 요소는 값이 바뀔 때 onchange 이벤트 실행 ⚠️ 리액트에서 이벤트를 사용할 때 주의 사항1. 이벤트 이름을 카멜 표기법으로 작성2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달3. DOM 요소에만 이벤트를 설정 onChange 이벤트 핸들링하기1️⃣ onChange 이벤트 설정콘솔에 기록되는 e 객체는 이벤트가 발생했을 때, 해당 이벤트에 대한 정보를 담고 있는 객체e.target.value로 입력한 값을 가져올 수 있음import React, { Component } from "r..

✨ 컴포넌트의 기능은 단순한 템플릿 이상 !1. 데이터가 주어졌을 때 이에 맞춰 UI를 만들어 줌2. 라이프 사이클 API를 이용하여 컴포넌트가 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리3. 임의 메서드를 만들어 특별한 기능을 붙여줌 컴포넌트 선언 방식📍 클래스형 컴포넌트React.Component에서 상속하는 사용자 컴포넌트 제작 방식으로 전통적인 방식의 컴포넌트state 기능 및 라이프 사이클 기능 사용 가능임의 메서드 정의 가능render 함수가 꼭 필요, 그 안에서 보여 주어야 할 JSX를 반환해야 함 📍 함수형 컴포넌트클래스 컴포넌트를 함수 형태로 만든 뒤, render 메서드만 함수 몸통으로 구현한 컴포넌트☀️ 장점클래스형 컴포넌트보다 선언하기가 훨씬 편함메모리 자원도..

✨ 들어가기에 앞서...// src/App.jsimport logo from './logo.svg';import './App.css';function App() { return ( Edit src/App.js and save to reload. Learn React );}export default App;리액트로 만든 프로젝트의 자바스크립트 파일에서는 import를 사용하여 다른 파일들을 불러와 사용할 수 있음모듈을 불러와서 사용하는 것은 사실 원래 브라우저에는 없던 기능브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js에서 지원하..

✨ 다양한 프레임워크순수 자바스크립트의 문제를 해결하기 위해 프레임워크들이 등장프레임워크는 항상 발전하고 새롭게 등장React 점유율 압도적다른 프레임워크의 경우 주로 MVC, MVVM 아키텍쳐 사용여러 구조가 지닌 공통점은 모델과 뷰가 있다는 것모델: 애플리케이션이 사용하는 데이터를 관리뷰: 사용자에게 보여지는 부분컨트롤러: 모델 데이터를 조회하거나 수정하고, 변경된 사항을 뷰에 반영애플리케이션 규모가 크면 복잡해지고 관리를 제대로 하지 않으면 성능 저하 React자바스크립트 라이브러리사용자 인터페이스를 만드는 데 사용오직 뷰(View)만 신경씀어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하지 않고 기존의 뷰를 날려버리고 새롭게 렌더함다만, 이러한 방식은 CPU 점유율이 크게 증가, DOM은 느림,..

Datcha(다챠)개인 간 데이터를 사고팔 수 있는 데이터 거래 플랫폼 https://github.com/nue-os/front-module GitHub - nue-os/front-module: ✨LG U+ 유레카 부트캠프 2기 프론트엔드 비대면 최종 융합 프로젝트 [무선✨LG U+ 유레카 부트캠프 2기 프론트엔드 비대면 최종 융합 프로젝트 [무선 인터넷 거래 플랫폼]✨ - nue-os/front-modulegithub.com