웹/(React)리액트25 상태관리 라이브러리, Redux 에 대해서/Redux Toolkit에 대해서 목차 1. Redux란? 2. Redux 주요 개념 3. Redux는 언제 필요할까? 4. Redux-Toolkit에 대해서 4-1. Redux-Toolkit 파일 구조 4-2. Redux-Toolkit 사용법 1. Redux란? Flux개념을 바탕으로한 React에서 현재 가장 많이 사용되는 State 관리 라이브러리 입니다. 더보기 Flux는 Facebook에서 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐이다. Flux Architecture는 MVC 패턴의 문제점을 보완할 목적으로 고안되었다. 페이스북과 같은 대규모 어플리케이션에서는 MVC가 너무 복잡했다. 이 같은 문제의 대표적인 사례가 바로 페이스북의 안 읽은 글 갯수(unread count) 표시이다. 사용자.. 2023. 9. 15. (React)리액트 클래스에 조건문/리액트에서 클래스 다양한 방법으로 사용해보기/클래스명 여러개/className 여러개 일때/클래스에 변수 사용하기 포스팅 목차 1. css module사용 X : className 여러개 1-1. 적용된 화면 이미지 2. css module사용 X : className 여러개 + && 조건문 스타일 2-1. 적용된 화면 이미지 3. css module사용 X : className 여러개 + 삼항연산자 조건문 스타일 3-1. 적용된 화면 이미지 4. css module사용 O : className 여러개 4-1. 적용된 화면 이미지 5. css module사용 O : className 여러개, className안에 변수 사용 5-1. 적용된 화면 이미지 5-2. 적용된 화면 비디오 6. css module사용 O : className 여러개 + && 조건문 6-1. 적용된 화면 이미지 7. css module사용 O .. 2023. 7. 11. (React) 리액트 드롭다운 메뉴 만들기/마우스 오버시 드롭다운 - 1탄 1. 결과화면 2. 동작 설명/기능 설명 3. 코드 4. 코드 설명 1. 결과화면 2. 동작 설명/기능 설명 1) 마우스오버시, 세부메뉴 드롭 다운 2) 해당하는 카테고리에 마우스가 오버됐을시, 다크블루로 표시. (예: 메뉴1에 오버했을 시, 메뉴 1 배경색깔이 바뀜) 3) 세부 카테고리에 마우스 오버됐을시, 해당하는 카테고리 및 세부카테고리 표시. (예: 메뉴2-1에 오버했을 시, 메뉴 2와 메뉴2-1의 배경색깔이 바뀜) 3. 코드 src / App.js import React from "react"; import Category from "./Category"; import Contents from "./Contents"; const App = () => { return ( ); }; export d.. 2022. 12. 17. (React with Typescript) module not found 'sass' 에러 해결, scss 사용법 간단 포스팅 상황 : scss 사용하려 했는데, module not found 에러 뜸 해결: > src 폴더 아래 global.d.ts 파일 생성 > 아래 코드 파일안에 복붙 src/global.d.ts declare module "*.module.scss" { const classes: { [key: string]: string }; export default classes; } > 서버 종료 후, npm run start로 다시 시작. 2022. 10. 27. (React) 리액트 커스텀 훅 custom hook 사용법+input 초기화 까지 - input 1. 커스텀 훅 사용전 코드 2. 커스텀 훅 사용한 코드 3. 커스텀 훅 사용 이유 3-1 커스텀 훅 사용전 - 회원가입 폼 3-2 커스텀 훅 사용후 - 회원가입 폼 1. 커스텀 훅 사용전 코드 import React, { useCallback, useState } from "react"; const Home2 = () => { const [text, setText] = useState(""); //text값 초기화 const onChange = useCallback( (e) => { setText(e.target.value); }, [text] ); const okBtn = useCallback( (e) => { console.log("nickname:", text); setText(""); //버튼 .. 2022. 9. 24. (React) 리액트 달력만들기 (초간단/쉬움) * 본 포스팅은 직접 구현한 코드입니다. * 불펌 금지합니다. * 더 좋은 코드가 있으면 가르쳐주세요 감사합니다 :) 포스팅 요약 1. 결과화면(사진 및 동영상) 2. 파일 구조 3. 코드 4. 깃허브 코드 주소 1. 결과화면 (사진 및 동영상) 1) 사진 2) 동영상 2. 파일 구조 3. 코드 경로: public/index.html 경로: src/App.js import Calendar from "./component/Calendar"; function App() { return ( ); } export default App; 경로: src/component/Calendar.js import React, { useCallback, useState } from "react"; import classNam.. 2022. 5. 25. 이전 1 2 3 4 5 다음
