웹49 (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. (React) useReducer 사용법 / useReducer와 이벤트 함께 사용하기 (React) useReducer 사용법 * 이 포스팅은 개인적으로 복습을 위해 정리한 포스팅입니다. useReducer이란? > useReducer은 useState와 마찬가지로 상태를 변경하기 위해 쓰입니다. useReducer 사용 이유 > useReducer은 다양한 상태를 업데이트해줄 수 있습니다. > useState보다 코드를 더 깔끔하게 작성할 수 있습니다. useReducer을 이용한 코드 사용된 이벤트 >onClick : 클릭 시 카운트 변수 값 +1을 해줌 >onClick: 클릭 시 카운트 변수 값 -1을 해줌 >onChange: input태그에 글을 쓸 수 있게 해줌 App.js import React from 'react'; import ReducerComponent from './.. 2021. 8. 24. (React) 리액트 useEffect 사용법 (React) 리액트 useEffect 사용법 * 이 포스팅은 "리액트를 다루는 기술"책 & 생활코딩님의 강의를 보고 복습겸 정리한 포스팅 입니다. 클래스형 컴포넌트에서는 라이프사이클을 사용하지만, 함수형 컴포넌트에서는 라이프사이클을 사용할 수 없습니다. 그대신 Hook을 사용합니다. 많은 Hook들이 있지만 그 중 useEffect에 대해 정리해 보았습니다. 1) useEffect가 필요한 이유 컴포넌트가 렌더링 된 후, 혹은 컴포넌트가 업데이트 될 때마다 실행시키고 싶은 작업이 있을 시 useEffect를 사용할 수 있습니다. 2) useEffect란? 클래스형 라이프사이클로 따지면 componentDidMount, componentDidUpdate, compoenntWillUnMount를 합친 것... 2021. 8. 23. 이전 1 2 3 4 5 6 7 8 9 다음
