본문 바로가기

React JS/Lecture

 (14)
React 리액트 - 이모티콘 사용법 알아보기 react-icons-kit 이모티콘 사용법 알아보기 리액트 - 이모티콘 사용법 알아보기 react-icons-kit https://react-icons-kit.now.sh/ React Icons Kit react-icons-kit.now.sh 1. 설치: npm install --save react-icons-kit 2. 사용: import { Icon } from 'react-icons-kit' import { home } from 'react-icons-kit/icomoon/home' export const IconHome () => ' DOS IMPACT - WEB Developer KIM DO YOUNG WEB : REACT JS | REACT NATIVE | GraphQL PRISMA
React - CSS FrameWork ㅡ MUI 사용하기 시작! React - CSS FrameWork ㅡ MUI 사용하기 #0. MUi 는 처음 써보는데 문서정리가 잘되있어서 빠르게 배울수 있다는 느낌을 받았다. 그래서 조금씩 알아가기로 함. #1. 예제 1 import React, { useState } from "react"; import styled, { ThemeProvider } from "styled-components"; import NoSsr from "@material-ui/core/NoSsr"; import { Button, Container, Typography } from "@material-ui/core/"; import { makeStyles, createMuiTheme } from "@material-ui/core/styles"; impo..
React - React - Hook 리액트 훅 사용법 정리 (3) useInput, useFetch #1 useInput #1.1 useInput 커스텀 훅 만들기 function useInput(defaultValue) { const [value, setValue] = useState(defaultValue); const onChange = e => { const { target: { value } } = e; setValue(value); }; return { value, onChange }; } #1.2 useInput 커스텀 훅 생성 #1.3 useInput 커스텀 훅 연결 const name = useInput(""); #1.4 예제 * useState를 통해 변수를 하나 만듬 * input를 위해 이름을 깔맞춤 했는데, value와 onChange로 * value는 단지 변수를 넣어주면 되고..
React - Tab컴포넌트 사용해 보기 React - Tab컴포넌트 사용해 보기 #1.0 설치 및 임포트 import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; # 1.1 Tab 인덱스에 훅 걸어두기 ( 안걸어도 작동을 하지만 현재 어느 탭인지 모른다. Tab컴포넌트에서 onSelect로 알려주는걸 받아오자. const [index, setIndex] = useState(0); setIndex(index)}> TAB1 TAB2 TAB3 now is {index} IM ONE IM TWO IM THREE # 1.2 예시) 매우 쉽다. Tabs--- TabList--- Tab Tabs--- TabPanel Tabs--- TabPanel Tabs--- TabPanel import React, { u..
React - 아이콘 icon 사용하기 - react-icons-kit React - 아이콘 icon 사용하기 - react-icons-kit https://react-icons-kit.now.sh/ React Icons Kit react-icons-kit.now.sh #1. 설치!! npm install --save react-icons-kit #2. 사용법 아이콘을 하나하나 가져와서 사용해야 된다니, 귀찮을수도 있겠다. 하지만 필요한거만 가져오니 최적화는 성공한셈 아닌가?! import { Icon } from 'react-icons-kit' import { home } from 'react-icons-kit/icomoon/home' export const IconHome () => // DOS IMPACT - WEB Developer KIM DO YOUNG WEB : ..
React - styled-media-query 미디어 쿼리 사용법 React - styled-media-query 미디어 쿼리 사용법 스타일 컴포넌트에 미디어 쿼리를 적용시킬 방법 #1. styled-media-query 설치 및 generateMedia 임포트 import { generateMedia } from 'styled-media-query'; #2. breakpoint 설정 const customMedia = generateMedia({ lgDesktop: '1350px', mdDesktop: '1150px', tablet: '960px', smTablet: '740px' }); #3. 다음처럼 스타일 컴포넌트에 적용하기. const Logo = styled.img` width: 10rem; height: 3.5rem; position: absolute; t..
React - Theming , styled-component ThemeProvider 사용법 React - Theming , styled-component ThemeProvider 리액트 테밍 하기. 스타일 컴포넌트의 테마프로바이더를 이용한 방법 #1. theme 만들기 결과적으로 문자열이 담긴 obj를 반환하면 된다. 그러기에 색깔이 담긴 obj를 theme obj에 spread 해서 넣어줬고 css from styled-components 을 통해, 간단한 css 적용후에 바로 사용할수있도록 theme에도 넣어줬다. import { css } from "styled-components"; const colors = { whiteColor: "#ffffff", pupleColor: "#2f2051", darkColor: "#000000", grayColor: "#e2e2e2", logoImag..
React - CSS - reset,createGlobalStyles React - CSS - reset,createGlobalStyles #1.리셋css 넣고,글로벌 스타일 넣으면 된다. import reset from "styled-reset"; import { createGlobalStyle } from "styled-components"; const globalStyles = createGlobalStyle` ${reset} a{ text-decoration:none; color:inherit; } *{ box-sizing:border-box; } body{ font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica..

티스토리툴바