본문 바로가기

분류 전체보기

 (49)
React - Hook 리액트 훅 사용법 정리 (4) useTab React - Hook 리액트 훅 사용법 정리 (4) useTab https://codesandbox.io/s/black-flower-tslnv 불러오는 중입니다... # 노마드 코더의 강좌 정리 입니다. # useState를 기반으로 만들어진 Tab 훅입니다. #1. Tab 데이터 만들기 const Tab = [ { title: "section1", content: "im content 1" }, { title: "section2", content: "im content 2" }, { title: "section3", content: "im content 3" } ]; #2. useTab 훅 만들기 입력으로 : 처음 인덱스를 넣고 / tabs 데이터를 넣어줍니다. 반환으로 : tabs 리스트에서 내부 ..
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..
네이버 아폴로 클라이언트 개발자 채용 떡상 각!@ https://recruit.navercorp.com/naver/job/detail/developer?annoId=20002854&classId=&jobId=&entTypeCd=&searchTxt=&searchSysComCd= NAVER Career 모집소식 더 가치있고 새로운 미래를 열어갈 NAVER의 발걸음에, 지금 당신을 초대합니다. [Apollo FrontEnd 개발자 모집] recruit.navercorp.com [필요역량] - JavaScript Native 기본 개발 역량을 갖추신 분 - React, Vue, Angular 등 프레임워크의 기본적인 지식을 갖추신 분 - JavaScript 혹은 HTML/CSS를 사용한 B2C 프로젝트 경험이 있으신 분 - Agile Methodo..

티스토리툴바