웹/(React)리액트26 (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. (React) 리액트 설치 및 실행법 상세하게 이미지로 설명 [2022.05.05 기준] * 이미 node.js가 설치되어 있으신분들은 3번부터 참고해주세요 ^^ 1.node.js 다운 (기존과 같음) 2. 설치가 잘되었는지 확인하기 3. react 실행하기 - 방법 1: 원하는 폴더 이름으로 react 개발환경 세팅하기 + 이미지로 상세설명 - 방법 2: 원하는 폴더 안에서 react 개발환경 세팅하기 + 이미지로 상세설명 4. 참고 사이트 1. node.js다운 아래 링크에서 node.js를 다운 받는다 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org (LTS or Current 둘다 상관 없음) 2. 명령창 or 터미널 열은후 np.. 2022. 5. 5. (React) 리액트 라우터 사용하여 고정 메뉴 만들기(react-router v6 2022.4 기준 최신버전) 포스팅 요약 1. 포스팅 이유 2. 결과 영상 3. 소스 다운 4. react-router-dom v6관련 참고하시면 좋은 문서자료 1. 포스팅 이유 아오 리액트 또 업데이트 됐습니다.. 개인 공부하다가 가 안먹길래 찾아보니 , 2021년에 react-router-dom 이 v5에서 v6로 업데이트 되면서 는 없어졌더라구요... 그래서 공부 기록겸 포스팅 하게 되었습니다... 아래 링크는 참고하시면 좋은 블로그입니다. react-router-dom v5에서 v6로 어떤부분이 변경되었는지 알려줍니다. https://velog.io/@soryeongk/ReactRouterDomV6 ** 최대한 좋은 코드를 제공해드리려 노력할게요, 저보다 더 좋은 코드를 짜신다면 공유 환영합니다!! 2. 결과 영상 3.소스 .. 2022. 4. 3. (React-Redux) 리액트 리덕스를 이용한 간단한 프로젝트 및 설명 리액트 리덕스를 이용한 간단한 프로젝트 리덕스를 사용하여 간단한 프로그램을 제작하면서, 리덕스를 더욱 잘 이해하기위해 포스팅을 제작하였습니다. 자료들을 참고하여 공부하며, 윗 쪽에는 버튼을 누르면 1씩 증가하게, 아랫쪽은, 제가 원하는 숫자를 넣으면, 그 숫자만큼 더해지는 프로그램을 제작하려고 합니다. 포스팅 요약 1. 프로그램을 만들기전 간단한 정리 더보기 1) Provider란? 2) combineReducer란? 3) useSelector란? 4) useDispatch란? 2. 프로그램 만들기 더보기 1) 리액트 리덕스 실행 2) Provider로 감싸기 3) 사용될 모듈 만들기 4) combinereducer로 리듀서 함수들 통합하기 5) 컨테이너 만들기 6) 화면에 보여줄 컴포넌트 7) App에.. 2021. 9. 14. (React) Immer에 대해서/Immer 사용법 (React) Immer에 대해서/Immer 사용법 * 본 포스팅은 개인 공부를 위해 '리액트를 다루는 기술'을 읽은 후 정리한 내용입니다. 포스팅 요약 1. 불변성의 중요성 2. immer이란? 3. immer 사용법 4. immer 사용 예제 더보기 1)immer 사용 전 2)immer 사용 후 3)useState와 immer 함께 쓸 때 1. 불변성의 중요성 > 불변성이 지켜지지 않을 경우, 값이 새로워져도 바뀐 것을 감지 못함. > 바뀐것을 감지 못할 경우, React.memo에서 서로 비교하며 최적화하는 것 불가능. 2. immer이란? > 객체구조가 깊어질 경우, 간단하게 불변성을 유지하며 업데이트해 줄 수 있는 라이브러리 3. immer 사용법 1) immer 라이브러리 설치 yarn a.. 2021. 8. 30. (React) 리액트 Todo List + 색깔 바꾸기 기능 추가/ 작은 프로젝트 (React) 리액트 Todo List + 색깔 바꾸기 기능 추가 포스팅 요약 1. 결과 화면 2. 기능 소개 3. 나중에 추가할 항목 4. 개선해야 될 점 5. 깃허브 코드 6. 복습한 내용 1. 결과 화면 2. 기능 소개 1) 리스트 작성 후 추가 2) 리스트 제거 3) 완료한 리스트 체크 4) app 색상 고르기 3. 나중에 추가할 항목 1) modify 기능: 할 일 수정 기능 4. 개선해야 될 점 1) useCallback을 사용하여 렌더링 최적화 5. 깃허브 코드 https://github.com/6810779s/todoList-app-project GitHub - 6810779s/todoList-app-project Contribute to 6810779s/todoList-app-projec.. 2021. 8. 28. 이전 1 2 3 4 5 다음
