전체 글250 (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. (React) 아이콘 사용하기 (상세 설명) (React) 아이콘 사용하기 리액트에서 수많은 아이콘들을 제공해 주고 있습니다. 쓰는 방법도 매우 쉬워요~~ :) 포스팅 요약 1.react-icons 사이트에서 아이콘 고르기 2. icon 고르기 3. react-icons --save 설치하기 4. 파일에 icon을 import해온다 1. react-icons 사이트에서 아이콘 고르기 사이트 접속: https://react-icons.github.io/react-icons 사이트 접속 후, 왼쪽박스에서 원하는 카테고리를 클릭하여 들어간다. 2. icon 고르기 원하는 아이콘을 고르고, 아이콘 이름을 복사(혹은 기억)합니다. (* 아이콘 모양을 클릭하면 자동 복사됩니다!!) (* 저는 복사가 안되서 그냥 대충 기억해 놓습니다. < import해야 되기.. 2021. 8. 26. ClassName 2개 적용하기 ClassName 2개 적용하기 포스팅 요약 1. css Module이 아닐때 2. css Module일 때 더보기 1) 첫 번째 방법 2) 두 번째 방법 1. css Module이 아닐때 App.js import React from "react"; import "./App.css"; const App = () => { return ( I have two Classes ); }; export default App; App.css .container1{ border: 1px solid black; color: white } .container2{ background: blue; } 2. css Module일 때 1) 첫 번째 방법 App.js import React from "react"; import s.. 2021. 8. 26. CSS Module: css 클래스 이름 중첩 방지법/ CSS Module사용 이유 CSS Module: css 클래스 이름 중첩 방지법 * 이 포스팅은 복습을 위한 포스팅입니다. 리액트를 배우면서, CSS와 JavaScript에 대해서 더 알아갈 수 있는것 같습니다. 포스팅 요약: 1. CSS Module을 사용하는 이유 2. CSS Module 사용하지 않았을때 3. CSS Module 사용했을때 1. CSS Module을 사용하는 이유 1. 클래스 이름이 중첩되는것을 방지해준다. 2. 유지보수하기 편해진다 3. 사용 범위를 제한하여, 스타일링 하고싶은 컴포넌트가 다른 컴포넌트와 중복되는 클래스 이름에 의하여 방해되는것을 막아준다. 아래 코드를 보시면 사용하는 이유가 더 와닿을 겁니다. element selector은 바꿔주지 않는다. 2. CSS Module 사용하지 않았을때 실험.. 2021. 8. 25. (React) useMemo와 useCallback 사용법 (React) useMemo와 useCallback 사용법 * 이 포스팅은 개인적인 복습을 위해 정리한 포스팅입니다. 참고 서적: "리액트를 다루는 기술" 참고 링크: 1. useReducer/useCallback/useMemo 제대로 알고 사용하기 2. useCallback 과 useMemo의 차이점 useMemo와 useCallback은 매우 유사하다. > 내부에서 발생하는 연산을 최적화한다. > 특정 값이 바뀌었을 때만 연산을 실행하고, 바뀌지 않았으면 이전에 연산했던 결과를 다시 사용하는 방식이다. > 메모제이션용 메모리가 필요하므로 useMemo와 useCallback을 남용하면 안된다. useMemo VS useCallback > useMemo 는 값을 반환 > useCallback은 함수를 .. 2021. 8. 24. 이전 1 ··· 12 13 14 15 16 17 18 ··· 50 다음
