Hoon_developer Hoon_developer

front-end/React

• classNames으로 module.css 사용하기

  front-end/React 2024. 6. 26. 10:19

  1. npm으로 설치하기npm install classnames --save 타임스크립트 사용시npm install --save @types/classnames 2. 사용 예시(module.css)import React from 'react'import styles from '../styles/pages/Main.module.css';import cs from 'classnames/bind';const Main = () => { const cx = cs.bind(styles); return ( 테스트 테스트 테스트 )}export default Main;

  Read More
• React ajax 라이브러리

  front-end/React 2024. 4. 22. 15:11

  1. ajax 라이브러리 설치 npm install axios 2. ajax 요청 방법 get 방식 axios.get('서버주소') .then(response => { // 서버로부터 데이터를 성공적으로 받았을 때 실행 console.log('GET 요청 성공!'); console.log('데이터:', response.data); }) .catch(error => { // 요청이 실패했을 때 실행 console.error('GET 요청 실패:', error); }); post 방식 axios.post('주소값', { title: '타이틀', body: '바디', userId: 1 }) .then(response => { // POST 요청이 성공했을 때 실행 console.log('POST 요청 성공!'..

  Read More
• React useEffect 정리

  front-end/React 2024. 4. 22. 13:47

  - 컴포넌트는 Lifecycle 생성(mount) 재렌더링 (update) 삭제(unmount) - useEffect 정리 1. 재렌더링마다 코드를 실행 useEffect(()=>{ 실행할코드 }) 2. 컴포넌트 mount시 (로드시) 1회만 실행 useEffect(()=>{ 실행할코드 }, []) 3. useEffect 안의 코드 실행 전에 항상 실행 useEffect(()=>{ return ()=>{ 실행할코드 } }) 4. 컴포넌트 unmount시 1회 실행 useEffect(()=>{ return ()=>{ 실행할코드 } }, []) 5.test이 변경될 때만 실행 useEffect(()=>{ 실행할코드 }, [test])

  Read More
• React styled-components 라이브러리

  front-end/React 2024. 4. 22. 10:01

  1. styled-components 설치하기 npm install styled-components 2. styled-components 사용법 styled.div 로 한개의 스타일을 만들어 줍니다.( ` 백틱 기호를 사용해서 CSS를 넣습니다.) VScode 사용시 vscode-styled-components 확장프로그램 설치하면 자동완성이 가능합니다. import styled from 'styled-components'; let Box = styled.div` padding : 15px; color : grey `; function Home(){ return ( 박스입니다 ) } 3. styled-components props 기능 ${ props => props.bg } styled-componen..

  Read More
• React Outlet 기능을 알아보자

  front-end/React 2024. 4. 18. 15:48

  1. 사용방법 안에 를 넣을 수 있는데 이걸 Nested routes라고 합니다 /test/a로 이동시 test와 a를 보여주면 /test/b로 이동시 test와 b를 보여줍니다. 2. 상위 Route에서 설정하기 test 아래 이동한 주소값에 따라 a와 b가 보이게 됩니다. function Test(){ return ( test ) }

  Read More
• React data import export 방법

  front-end/React 2024. 4. 18. 11:43

  1. data.js 같은 데이터만 관리할 js파일 만들고 내보내기 export default 변수명 let won = 10000; export default won; 2. import 할 파일에 가져오기 import 작명 from './경로' import a from './data.js'; console.log(a) 3. 여러개 변수를 내보내는 방법 export { } 문법 사용 var name1 = 'sim'; var name2 = 'too'; export { name1, name2 } import { } 문법 사용 import { name1, name2 } from './data.js';

  Read More
• React css reset 코드

  front-end/React 2024. 4. 2. 16:37

  1. 해당 사이트에 접속을 해서 css를 복사한다. 2. reset.css 만든 후 최상단 css에 임포트를 하면 됩니다. CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerweb.com /* http://meyerweb.com/eric/tools/css/..

  Read More
• React 테일원드 + Module.css 사용법

  front-end/React 2024. 4. 2. 16:05

  1. module.css .test { @apply bg-blue-500 text-white text-2xl; } 2. .jsx 파일 - import styles로 사용할 모듈을 가져옵니다. - className={`${styles.test}`}> 방식을 통해서 필요한 className를 가져옵니다. import React from 'react' import styles from './Test01.module.css'; const Test01 = () => { return ( Test01 ) } export default Test01 3. 2개 이상 스타일 요소를 가져오고 싶다면? - ${styles.className}로 새로운 className를 적습니다. Test01

  Read More