Timeline

요즘은 대부분 함수형 컴포넌트를 사용하지만 클래스형 컴포넌트가 무엇인지는 알고 있어야 합니다! 두 컴포넌트를 구분짓는 차이점은 클래스형 컴포넌트의 경우 state, lifeCycle 관련 기능 사용이 가능하지만, 함수형 컴포넌트의 경우 state, lifeCycle 관련 기능 사용이 불가하고 Hook을 통해 해결합니다. 1. 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { const name = 'react'; return {name} } } export default App; // state 사용 시 예시1 constructor(props){ super(props); this.state =..

Blocker : 날짜를 입력하는 대신 달력에서 기간을 선택할 수 있도록 datepicker 라이브러리를 사용하게 됐습니다 다만 처음 사용해보는 거라 특히 style 커스텀할 때 어려움이 많았습니다,,, 우선 공식문서를 참고하여 저는 date range 형태로 달력을 만들었습니다 https://reactdatepicker.com/#example-date-range React Datepicker crafted by HackerOne reactdatepicker.com 달력을 입력받는 창과 달력 모양의 스타일을 커스텀해야 했습니다 아래는 datepicker의 기본 스타일입니다 아래는 커스텀 후 제가 적용해야 할 디자인 시안입니다 해결방법 : 똑같은 디자인으로 커스텀하는 예시를 찾기는 어렵기 때문에 다른 분들..

생활코딩의 react-redux (2022년 개정판) 강의를 보면서 작성한 내용입니다 https://www.youtube.com/watch?v=yjuwpf7VH74&t=716s react-redux를 사용하기 위해서는 먼저 두 가지를 다운받아야 합니다 npm i redux npm i react-redux 그리고 강의에 따라 react-redux 중 Provider, useSelector, UseDispatch만 사용하도록 하겠습니다 아래의 코드를 작성해서 확인해보면 굳이 props로 전달하지 않고도 하위 컴포넌트에서 상위컴포넌트에 있는 state를 변경할 수 있습니다 import React, { useState } from "react"; import "./styles.css"; import { crea..

import { useRef, useState } from "react"; import "./styles.css"; export default function App() { const [image, setImage] = useState(null); const inputRef = useRef(null); const 이미지넣기 = () => { if (!inputRef.current) return; inputRef.current.click(); }; const 이미지변경됐을때_실제스테이트에_넣는함수 = ({ target: { files } }) => { setImage(files[0]); }; const 전송해보자 = () => { const formData = new FormData(); formData...

npm install react-slick --save 을 톻해 react slick library를 설치하여 캐러셀을 구현했습니다 아래 코드를 통해 캐러셀을 구현할 수 있습니다 import React, { Component } from "react"; import Slider from "react-slick"; export default class SimpleSlider extends Component { render() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return ( Single Item 1 2 3 4 5 6 ); } } Resources https://re..

컴포넌트에 styled-components로 style 주는 법 blocker: Link 컴포넌트에 styled-components로 style 주려고 하니 문제가 있었습니다 다른 html 태그와 달리 Link는 컴포넌트였기 때문에 같은 방법으로 적용해줄 수 없었습니다 그래서 우선 해당 페이지의 Devtools(command+option+i)를 열어 elements tab을 확인해보니, Link가 a 태그로 표시되어 있었습니다 그래서 styled-components를 사용할때는 a태그로만 사용가능한건가 생각하고 a 태그로 바꿔주니, 당연하게도 의 to로 페이지 이동하는 부분을 사용할 수 없었습니다 해결방법: 제가 만들고 있는 페이지 외부로 이동하는 것이 아니라 꼭 Link 태그를 써야했고 여기서 멘토님의..

내가 짠 코드 const [isSame, setIsSame] = useState(false); const onChangePasswd = () => { if (passwd === passwdCheck) { setIsSame(true); } else { setIsSame(false); } }; 문제점 passwd와 passwdCheck를 동일하게 입력해도 isSame은 false가 나왔고, passwdCheck에 값을 하나 더 입력해줘야 true가 나왔다 실제로, passwd:aaa, passwdCheck:aaaa를 입력해야 true가 나왔다 위의 과정은 console.log로 passwd, passwdCheck, passwd === passwdCheck, isSame을 모두 확인해본 뒤 알게되었다(cons..

회원가입과 비슷한 기능으로 여러 input 값을 useState()를 통해 전달했습니다 아래 링크에서 구현된 모습을 확인할 수 있습니다 https://user-images.githubusercontent.com/84219519/219610213-39078ab4-bb1c-4031-82e1-8b6da556143b.gif import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import './ShippingOptionInput.scss'; const ShippingOptionInput = () => { const [toShippingOption, setToShippingOption] = useState(f..

나이키 웹 페이지를 모티브로 프로젝트를 진행하며 제품 전체 리스트 페이지에서 필터링과 페이지네이션 기능을 구현했습니다 아래 링크에서 어떻게 동작하는지 확인할 수 있습니다 https://user-images.githubusercontent.com/84219519/219604155-77b27b5b-8df3-42df-b837-babef7e08f93.gif js 파일 import React, { useEffect, useState } from 'react'; import { useLocation, useSearchParams } from 'react-router-dom'; import Aside from './Aside/Aside'; import Banner from './Banner/Banner'; impor..

구현할 메뉴의 예시입니다 위에 7가지 메뉴가 적혀있는 부분을 menu로, menubox에 mouseenter 시 드롭다운되는 메뉴를 newmenubox로 칭하겠습니다 JSX 부분 menu.js import React, { useState } from 'react'; import { Link } from 'react-router-dom'; import { MENU_DATA } from '../data/menuData'; import NewMenuBox from '../NewMenuBox/NewMenuBox'; import OtherMenuBox from '../OtherMenuBox/OtherMenuBox'; import './Menu.scss'; const Menu = () => { const [isSh..