아리의 개발 일상

리액트 리덕스툴킷 사용법 리덕스 툴킷 설치npm install @reduxjs/toolkit react-redux  리덕스 툴킷 흐름1.적용할 컴포넌트 만들기2.슬라이스 3.스토어4.컴포넌트에 리덕스 적용하기 1.컴포넌트 import React from 'react';const Counter = () => { return ( Redux Toolkit Counter Increment Decrement Increment by 5 Count: );}export default Counter; 2.슬라이스 만들기슬라이스에서 액션함수와 리듀서 함수를 만들어 사용합니다.import {createSlice} from '@r..

리액트 기존 리덕스(redux) 사용방법전체 흐름Actions: 상태 변화를 위한 액션 정의 (INCREMENT, DECREMENT).Reducers: 액션을 처리하는 함수로, 상태(state)를 업데이트.Store: 상태 관리 중심. Provider로 앱과 연결.Components: store를 연결하여 랜더링 구현방법1. 액션 함수 정의-액션은 객체 형태로 애플리케이션에서 어떤 동작이 발생했는지를 설명하는 함수-type이라는 액션의 고유 식별자가 필수로 이었야 하면 상태 업데이트할 때 필요한 값을 포함할 수 있다.//액션타입정의const INCREASE = 'counter/+'const DECREASE = 'counter/-'// 액션 생성 함수 예시export const increase=()=>({..

리액트 라우터 사용법 라우터란?사용자가 페이지를 이동할때마다 새로운 html을 받아와 화면을 보여주는 방식이 아닌html을 한번에 받아와 실행시켜 필요한 데이터만 받아와 브라우저 주소의 경로에 따라 페이지를 보여준다. 라우터 설치 npm add react-router-dom 라우터 사용법 로 감싸여 그 안에 이동할 주소들을 담아서 사용한다.  pathimport React from 'react';import {Route,Routes} from 'react-router-dom'import TodoPage from '../page/TodoPage';import Home from '../page/Home';import AboutMe from '../page/AboutMe';const Path = ..

Ref 사용하는 이유Ref는 리액트 에서 DOM 요소에 직접 접근 할수 있도록 제공되는 기능으로 useState와 비슷하지만 차이점이 존재한다. Ref는 값을 변경시키지만 렌더링이 되지 않는다  즉 렌더링을 하고싶지 않은데 내부값을 수정하고 싶을때 사용한다 예시코드 import React, { useRef } from 'react';const FocusInput = () => { const inputRef = useRef(null); // ref 생성 const handleFocus = () => { inputRef.current.focus(); // input 요소에 포커스 }; const handleAlert = () => { alert(`입력된 값: $..

리액트 props 사용법props는 리액트 컴포넌트 간에 데이터 전달하는 데 사용된다.import React from 'react';import Greeting from './Greeting';function App() { const userName = "John Doe"; const userAge = 25; return ( Welcome to the Props Example! {/* 자식 컴포넌트에 props 전달 */} );}export default App;import React from 'react';function Greeting(props) { return ( ..

리액트 Global State 여러 컴포넌트 간에 상속 없이도 자기가 원하는 컴포넌트에만 공유할수 있는 것을 말한다. 데이터를 공유할 컴포넌트 context 를 만든다. import { createContext,useState } from "react"; export const AdminFlagContext = createContext({}); //사용법 export const AdminFlagProviders =(props) => { const {children}=props //플래그 만들기 const [isAdmin,setIsAdmin] =useState(false); //AdminFlagContext 안에 provider 이 있으으로 감싸면 된다 return ( {children} ) } index..

React 메모이제이션 App이라는 컴포넌트가 있으면 아래 child1,2,3,4, 의 하위 컴포넌트가 존재 한다 App컴포넌트가 랜더링 되면 아래의 하위 컴포넌트도 모두다 랜더링 되게에 메모리를 많이 소비하게 된다 이러한 문제점을 해결하기 위해 memo,useCallback,useMemo를 사용하여 상위 컴포넌트가 랜더링 되어도 랜더링 하게 하는걸 막을수 있다 폴더 구조 App코드 import { Child1 } from './components/Child1.jsx'; import { Child4 } from './components/Child4.jsx'; export const App = memo(() => { console.log("APP 랜더링") const [num, setNum] = useSt..

1. 외부css 파일 사용하기 2. css 모듈 사용하기 // Button.module.css .button { background-color: blue; color: white; } // Button.js import React from 'react'; import styles from './Button.module.css'; const Button = () => { return Click me; } export default Button; 파일 이름을 ~~~.modul.css로 지정하여 css 모듈을 만들수 있다 node-sass 를 이용하면 scss파일로 만들어서 위와 같은 방식으로 외부모듈로 사용할수 있다 설치할때 터미널에 npm install node-sass 를 입력하면 설치가능하다 scss ..

리액트 2일(속성 이용법,외부 컴포넌트 사용,useState,상속 ) 노드 js 환경에서 리액트 사용 index js 파일에 아래하고는 조금 다르지만 App이라는 파일을 import해서 불러오는 형식의 파일이 있을거다 import React from "react"; import ReactDOM from "react-dom"; import {App} from "./App.jsx" //이파일을 사용 ReactDOM.render(, document.getElementById("root")); import {ColorMassage} from "./components/ColorMassage.jsx"; import { useEffect, useState } from "react"; export const App =..

리액트 공부1일차 리앤트 기본적인 사용법 컴포넌트를 만들어 컨테이너에 집어넣어서 사용할수 있다 클래스 이용방법 componentDidMount는 컴포넌트가 화면에 나타낼때에 실행되는 메소드로 현재 위 코드는 1초마다 componentDidMount 안의 내용이 실행되어서 현재 시간을 나타내는 코드이다 이벤트 연결하는방법 class App extends React.Component { constructor(props) { super(props) this.state = { count : 0 } this.countup = this.countup.bind(this) //bind는 이벤트 연결해주는 메소드 } render() { return {this.state.count} 클릭 } countup (event) ..