odada

Redux로 전역 상태 관리하기Redux 소개Redux는 상태 관리 라이브러리로, React와 함께 사용하기 좋습니다. Redux를 사용하면 컴포넌트 간에 상태를 쉽게 공유할 수 있습니다.- Redux 특징Single Source of Truth: 애플리케이션의 상태는 하나의 스토어에 저장됩니다.State is Read-Only: 상태를 직접 변경할 수 없습니다. 상태를 변경하는 유일한 방법은 액션을 디스패치하는 것입니다.Changes are Made with Pure Functions: 상태를 변경하는 함수인 리듀서는 순수 함수여야 합니다.- Redux 구조Actions: 상태 변경을 위한 객체Reducers: 상태를 변경하는 함수Store: 애플리케이션의 상태를 저장하는 객체store/|-- acti..

Chakra-ui로 스타일링하기 0. Tailwind CSS vs Chakra UI - Tailwind CSS Tailwind는 유틸리티 클래스를 제공하여, HTML 내에서 직접 스타일을 적용할 수 있게 해줍니다. 이는 빠르게 프로토타이핑을 할 수 있게 해주며, CSS 파일을 별도로 관리할 필요가 없습니다. - Chakra UI Chakra UI는 컴포넌트를 제공하여, 컴포넌트를 사용해 스타일을 적용할 수 있게 해줍니다. 이는 컴포넌트를 사용해 스타일을 적용할 수 있어, 컴포넌트를 재사용하기 용이하며, 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다. - Tailwind CSS와 Chakra UI를 함께 사용 Tailwind CSS와 Chakra UI를 함께 사용하여, Tailwind CSS의 유틸리..

1. styled-reset styled-reset은 CSS 초기화 라이브러리로, 브라우저별 기본 스타일을 초기화할 수 있습니다. styled-reset 사이트 - 설치 npm install styled-reset yarn add styled-reset - 사용법 // src/App.js import React from 'react' import Routers from './components/Routers' import { Reset } from 'styled-reset' const App = () => { return ( {/* 초기화 */} ) } export default App 2. styled-components styled-components는 CS..

리액트 ES6 문법 정리 리액트는 ES6 문법을 사용하여 개발합니다. ES6는 자바스크립트의 표준 버전으로, 보다 간결하고 효율적인 코드 작성을 가능하게 합니다. 이번 장에서는 ES6 문법을 정리하고, 리액트에서 사용하는 주요 문법을 알아보겠습니다. 1. 변수 변수는 let, const 키워드를 사용하여 선언한다. 변수란 데이터를 담는 공간을 의미합니다. 변수를 선언할 때는 var, let, const 키워드를 사용합니다. let : 재할당할 수 있는 변수를 선언할 때 사용한다. 값을 변경할 수 있다. const : 상수를 선언할 때 사용한다. 값을 변경할 수 없는 값을 명확하게 표시할 때 사용한다. 의도치 않은 값 변경을 방지한다. var : 변수를 선언할 때 사용한다. ES6 이전에 사용하던 키워드로..

github url수업내용 url : https://github.com/oddoddo/react-edu-0323.git웹사이트 만들기 : https://github.com/oddoddo/-react-router-tailwind목차[js] React ES6 기본 문법https://odada.me/322[js] 함수https://odada.me/236  리액트란 무엇인가?https://odada.me/250리액트 패키지 설치, 필수 라이브러리https://odada.me/251JSX란 무엇인가?https://odada.me/252리액트 컴포넌트(Component)https://odada.me/254리액트 속성(Props, Properties)https://odada.me/271리액트 이벤트(Event)htt..

React Context리액트의 하나의 컴포넌트에서 데이터를 생성하거나 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 여러 방법이 있습니다.state 와 props를 사용해서 컴포넌트 간에 데이터를 전달React Context API를 사용해서 컴포넌트 간에 데이터를 전달Redux, MobX, Recoil 등의 상태 관리 라이브러리를 사용Context API란React Context는 Component 트리 전체에 props를 전달하지 않고도 Component 데이터를 제공하는 방법입니다.Context는 전역 상태를 관리하기 위한 간단한 방법입니다.Context 문법React.createContext 함수를 사용하여 Context를 생성합니다.Context.Provider 컴포넌트를 만나면, ..

useReduceruseReducer 란?useReducer 는 useState 보다 더 다양한 컴포넌트 상태를 관리하는 Hook 입니다. useState 는 컴포넌트 상태를 관리하는 가장 기본적인 Hook 이지만, useReducer 는 복잡한 상태 로직을 다루기에 더 적합합니다.컴포넌트에서 상태 변화 코드를 쉽게 분리할 수 있고, 상태 로직을 컴포넌트 바깥으로 빼내어 재사용할 수 있습니다.useReducer 사용법useReducer 는 다음과 같이 사용합니다.const [state, dispatch] = useReducer(reducer, initialState)state : 현재 상태dispatch : 액션을 발생시키는 함수, 액션을 발생시키면 리듀서 함수가 호출되어 상태가 변경됩니다.reducer..

최적화리액트에서의 최적화 기법은 불필요한 연산을 줄여 성능을 향상시키는 것입니다.리액트 공식 문서에서는 성능 최적화를 위한 방법을 다음과 같이 소개합니다.최적화 방법코드, 폰트, 이미지 등의 리소스를 압축합니다.메모이제이션을 이용하여 불필요한 연산을 줄입니다.메모이제이션메모이제이션이란 연산의 결과를 기억했다가 필요할 때 사용함으로써 불필요한 연산을 방지하는 것입니다.useMemo : 함수의 불필요한 재실행을 방지합니다.React.memo : 컴포넌트의 불필요한 리렌더링을 방지합니다.useCallback : 함수의 불필요한 재생성을 방지합니다.useMemo 사용하기문법 : useMemo(() => 연산 결과, [의존성 배열])목적: 값을 기억하고, 성능을 최적화합니다.사용 시점: 계산 비용이 높은 연산을 ..

할 일 관리 앱 만들기1. 컴포넌트 구조 설계하기- App 컴포넌트 만들기// src/App.jsimport React from 'react'import TodoHd from './TodoHd'import TodoEditor from './component/TodoEditor'import TodoList from './component/TodoList'export default function App() { return ( )}- Header 컴포넌트 만들기// src/components/TodoHd.jsimport React from 'react'export default function TodoHd..