[ 리액트 / React ] Redux Toolkit/ 쓰는 이유 / 사용 방법 /◇ Redux Toolkit 쓰는 이유  - 컴포넌트간 state 공유 편이 ( props 전송 필요 X )     -> store.js에서 state 가져와 사용 ◇ Redux 라이브러리 설치     ㄴ ( React 및 React-dom 버전 18.1 이상 가정 )npm install @reduxjs/toolkit@1.8.1 react-redux ◇ 기본 세팅○ src/store.js 생성import { configureStore } from '@reduxjs/toolkit'export default configureStore({    reducer: {     }}) ○ src/main.jsx 코드 변경import {..

[ 리액트 / React ] props / 쓰는 이유 / 사용법 /props 왜 써요?컴포넌트 간 데이터 전달 (부모 → 자식 컴포넌트)..다음과 같은 코드가 있다고 가정.function Greeting() { return 안녕, {여기에 이름 넣고싶음}!;}function App() { return ( // 철수 자리 // 영희 자리 );}​  - // 철수 자리  - // 영희 자리     각 자리에서 호출했을 때 안녕 철수!와 같이 출력하고 싶다면?     -> App() 컴포넌트에서 Greeting()컴포넌트로 이름을 넘겨주면 됨! 그냥 State를 사용한다면function App() { const [nam..

[ 리액트 / React ] 컴포넌트 Component/ 정의 / 문법 / 단점 / 사용법 / Component 란?쉽게 말해서, "UI를 반환하는 함수"다.( 처음엔 이렇게만 이해해도 무방! )UI 구성요소?1. HTML 태그들 ( , , , , , , ... )2. State 변수 ( 상태 변수 )3. 등등 Component 쓰는 이유함수를 쓰는 이유와 비슷1. 코드를 깔끔하게 유지 -> ( 모듈화 )    - 유지 보수 쉬워짐2. 재사용성 증가   - 같은 UI 구현해야 할 때 컴포넌트 쓱 사용3. 등등Component 미 사용 예제)function App() { return ( Product List ..

[ 리액트 / React ] State 상태 (ps. Destructing)Destructing 문법 간단 정리일반 문법let a = 1;let b = 2;console.log(a)console.log(b)// -> 1, 2출력​Destructing 문법let [a, b] = [1, 2]console.log(a)console.log(b)// -> 1, 2출력 State(상태 변수)란?React에서 사용하는 '동적인 데이터를 위한 변수'= React에서 컴포넌트의 동적인 데이터를 관리하는 객체 State 사용법useState(훅)를 이용한 상태 관리import { useState } from "react";function Counter() { const [count, setCount] = useSta..

[ 리액트 / React ] React를 사용하는 이유 - SPASPA - Single Page ApplicationReact와 SPA의 관계를 알아보자• React Router를 사용하면 클라이언트 사이드 라우팅으로 SPA 구현 가능• React는 페이지를 새로고침하지 않고도 동적인 UI 업데이트 가능• Virtual DOM을 활용해 성능을 최적화하여 SPA의 단점을 보완 그렇다면 SPA는 무엇이고, 장점이 뭔가요?SPA; Single Page Application이란..• 하나의 HTML 파일을 기반으로 동작하는 웹 애플리케이션• 페이지 이동 시 전체 페이지를 새로고침하는 것이 아니라, 필요한 데이터만 업데이트SPA의 장점?• 전체 페이지를 다시 로드하지 않고, 변경된 부분만 업데이트 [ 빠른 페이지..