✨ 모든 리액트 컴포넌트에는 라이프사이클(생명 주기)이 존재 !컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝남라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능함수 컴포넌트에서는 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은 느림,..

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