Nevertheless

Hook 이란? 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 특별한 함수  1️⃣useMemo: 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅: 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술   const totalQuantity = useMemo(() => { return carts.reduce((acc, cart) => { if (checkedItems.includes(cart.id)) { return acc + cart.quantity; } return acc; }, 0); }, [carts, ..

🌏global style1. global = 프로젝트 전체에 적용 = 프로젝트에 일관된 스타일링을 적용2. "user agent stylesheet" 로 표시되는 브라우저의 기본 스타일이 차이를 만든다.3. 브라우저 간의 스타일 차이를 극복하기 위해 사용  ❓css-in-js 는 왜 필요할까: CSS-in-JS는 전통적인 CSS 파일 대신 JavaScript 안에서 직접 스타일을 작성하는 방식을 말한다.  1. 전역 충돌2. 의존성 관리 어려움3. 불필요한 코드, 오버라이딩4. 압축5. 상태 공유 어려움6. 순서와 명시도7. 캡슐화  import styled from 'styled-components';const Button = styled.button` background-color: blue; ..

props 의 사용 : Props(Properties의 줄임말)는 React에서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법: Props는 읽기 전용(Read-only)이며, 자식 컴포넌트에서 직접 수정할 수 없다.  부모 컴포넌트import React from 'react';import logo from './logo.svg';import './App.css';import TodoList from './Todolist';import Clock from './Timer';import MyWeather from './MyWeather';function App() { return ( 일기예보 );}export default App;MyWeather..

컴포넌트(Component)1. 클래스형 컴포넌트import { Component } from "react"; class ClassCom extends Component { // 반드시 상속 필요 render() { return ( 클래스형 컴포넌트 ) }}export default ClassCom; 2. 함수형 컴포넌트 : 클래스형보다 간단함, 더 많이 사용import React from 'react';function FuncCom() { return ( 함수형 컴포넌트 )}export default FuncCom; 구조 분해 할당: 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식 ➡️구조 분해 ..

React (웹 프레임워크)React.js 는 자바스크립트 라이브러리의 하나임사용자 인터페이스를 만들기 위해 페이스북(조던 워크)에서 개발 싱글 페이지 어플리케이션 및 모바일 어플리케이션 개발 가능리액트의 동작 원리초기 렌더링가상 DOM(Document Object Model) 변경재조정실제 DOM 업데이트 🔽 이전에 리액트 프로젝트를 하면서 정리해뒀던 글인데 참고하면 좋을 것 같다.https://hyenee99.tistory.com/102 페이지 템플릿2. src/ index.js => 자바스크립트 시" data-og-host="hyenee99.tistory.com" data-og-source-url="https://hyenee99.tistory.com/102" data-og-url="https://..

리액트는 무엇인가? 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리(기능 모음집)  * 라이브러리 : 자주 사용되는 기능들을 정리해 모아 놓은 것 프레임워크 VS 라이브러리 프레임워크: 흐름에 대한 제어 권한 => 프레임워크 , 자신라이브러리: 흐름에 대한 제어 권한 => 개발자 👍🏻리액트의 장점 : 빠른 업데이트와 렌더링 속도 => Virtual DOM 사용      * DOM (Document Object Model)       : 웹 페이지를 정의하는 하나의 객체, 하나의 웹사이트에 대한 정보를 모두 담고 있는 큰 그릇: DOM 을 직접 수정하는 것이 아니라, 업데이트 할 최소한의 부분을 찾아서 업데이트 한다.        화면이 업데이트 된다 = DOM 이 수정된다. => 성능에..