📘 useMemo"메모이제이션" 기법으로 불필요한 연산을 최적화하는 리액트 훅더보기메모이제이션이란? 📝 기억해두기, 메모해도기🧠 메모이제이션 기법이란? 동일한 연산을 반복적으로 수행해야 될 경우 매번 결과 값을 새롭게 만드는 것이 아니라,최초로 한번 계산할때의 결과 값을 어딘가에 보관해둔 다음 이 연산이 필요해지면 저장된 결과값을 바로 돌려주는 기법 최초로 한번 수행해 연산값을 저장하면 다시 수행할 필요x→ 성능 안나빠진다. useMemo를 사용하면 특정 연산값을 기억해 둘 수 있다. ⚠️ Todo 데이터 분석: filter() 메서드의 효율성과 주의점 import React, { useState } from 'react';const List = ({ todos, onUpdate, onDel..

📘 최적화(Optimization)웹 서비스의 성능을 개선하는 모든 행위를 일컫는다.아주 단순한 것부터 아주 어려운 방법까지 다양하다. 일반적인 웹 서비스 최적화 방법서버의 응답 속도 개선이미지, 폰트, 코드 파일 등의 정적 파일 로딩 개선불필요한 네트워크 요청 줄임React App 내부의 최적화 방법컴포넌트 내부의 불필요한 연산방지컴포넌트 내부의 불필요한 함수 재생성 방지컴포넌트의 불필요한 리렌더링 방지

📘 useReducer컴포넌트 내부에 새로운 State를 생성하는 React Hook모든 useState는 useReducer로 대체 가능 useReducer를 이용하면 어떤 차이점이 있냐?상태 관리 코드를 컴포넌트 외부로 분리 가능 React Components의 주된 역할은 무엇일까요?👨🏻‍🏫 UI를 관리하는 것 ✨ 동작 순서더보기1. 사용하고자 하는 상태관리를 import를 통해서 불러온다.2. 컴포넌트 안에서 변수로 Hook을 불러와준다.3. 컴포넌트 내부에서 dispatch함수를 호출한다.4. UseReducer()가 상태 변화를 실제로 처리하게될 함수를 호출하며 작동한다.5. 처리할 함수를 직접 만들기 🔍 dispatchimport React, { useReducer } from ..

리액트의 동작 원리를 파악하기 위해 구현 순서를 우선적으로 정리했다.💡구현 순서1. 필요한 컴포넌트 생성: components 폴더 생성 후 Header.jsx, Editior.jx, List.jsx파일 생성 2. 컴포넌트 호출: App.jsx로 들어가 생성한 컴포넌트를 불러온다.import './App.css';import Header from './components/Header';import Editor from './components/Editor';import List from './components/List'; 3. 화면 렌더링: App 컴포넌트안에 각각 컴포넌트들을 렌더링한다.function App() { return ( );} 4. H..

라이프사이클 (= 생애 주기)Mount ➡️ Update ➡️ UnMount Mount 컴포넌트가 탄생하는 순간               "A 컴포넌트가 Mount되었다."화면에 처음 렌더링 되는 순간          => A 컴포넌트가 화면에 처음으로 렌더링 되었다.  "A 컴포넌트가 Mount되었다." => A 컴포넌트가 화면에 처음으로 렌더링 되었다.  ⬇️  Update  컴포넌트가 다시 렌더링 되는 순간 (변화)리렌더링 될 때를 의미"A 컴포넌트가 Update되었다." => A 컴포넌트가 리렌더링되었다. ⬇️ UnMount컴포넌트가 화면에 사라지는 순간 (죽음)렌더링에서 제외되는 순간을 의미"A 컴포넌트가 UnMount 되었다." => A 컴포넌트가 화면에서 사라졌다. 라이프 스타일 제어 (=>..

1. 컴포넌트 단위로 나누기2. UI 구현컴포넌트에서 Controller.jsx랑 View.jsx를 만들어준다.const Viewer = () => { return ( 현재 카운트 0 );};export default Viewer;const Controller = () => { return ( -1 -10 -100 +100 +10 +1 );};export default Controller; 그뒤 App.jsx의 안에 입력해준다. import './App.css';import Controller from './components/Controller';import Viewer from './compon..

클래스 컴포넌트 기능을 함수 컴포넌트에서도 이용할 수 있는것 2017년도 이전 React.jsClass 컴포넌트Function 컴포넌트모든 기능을 이용할 수 있음UI 렌더링만 할 수 있음문법이 복잡함 Class 컴포넌트의 기능을 낚아채서 가져와서 Function 컴포넌트에 적용낚아채다! 어떻게? Hoooooooooooooooooooooooooooks 🦜🏴‍☠️ useState와 useRef 역시 React Hooks이었음useState - State 기능 낚아챔useRef - Reference 기능 낚아챔 React Hooks는 이름 앞에 use가 붙는다. 리액트 Hooks는 함수 컴포넌트 내부에서만 호출 가능하다. React Hook을 이용해서 나만의 Hook 만들기 가능! Hook 관련 팁1. 함..

회원가입 폼 렌더링해보기더보기import { useState } from 'react';useState는 React의 상태 관리를 위한 Hook인데,App.js 파일 안이나 Register 컴포넌트 안에서 사용되지 않았음.사용하지 않는 import는 보통 경고가 뜨거나 불필요한 코드가 되니까 삭제해도 무방그럼 언제 사용하냐?seState는 "상태를 저장하고 바꾸고 싶을 때" 사용해!예를 들어 버튼을 클릭하면 숫자가 올라가는 기능을 만들때상황useState 써야 할까?버튼 누르면 값이 바뀌어야 해o입력창에 글 쓰면 실시간으로 상태 저장o어떤 요소를 숨기거나 보여주고 싶을 때o단순히 텍스트/컴포넌트 보여주기만 할 때ximport { useState } from 'react';// 간단한 회원가입 폼// 1...

import './App.css';import { useState } from 'react';const Bulb = ({ light }) => { return ( {light === 'ON' ? ( ON ) : ( OFF )} );};function App() { // state 생성 // 기본 구조: const [state, setState] = useState(0); const [count, setCount] = useState(0); // 2. lightState의 값을 on으로 바꾸면 전구가 렌더링된다. const [light, setLight] = useState('OFF'); return ( ..