혼자 적어보는 노트

하고자 하는 기능은 상품 데이터에 옵션이 있고, 옵션선택 시 옵션이 하단에 표시되고 count까지 할 수 있는 기능을 구현하려 한다. const [selectedOption, setSelectedOption] = useState(""); const { id, name, price, image, description, option } = currentProduct; //currentPropdoct에는 상품의 데이터가 담겨있다. const haldleOptionSelect = (e) => { setSelectedOption(e.target.value); console.log(selectedOption); //선택된 옵션을 확인할 수 있다. }; //..생략 옵션을 선택해주세요 {option.color.map..

장바구니 기능 작업을 하면서 체크박스를 이용해 상품을 체크하고 체크한 상품의 데이터를 담는 코드를 짜야 했다. 체크박스를 구현하기 위해 필요한 것은 무엇일까? 1. 체크가 되어있는 input이 무엇인지 알아야 한다. ( 체크가 된 input클릭 시 체크 해제 / 체크 해제가 된 input 클릭 시 체크) 2. 체크가 될 경우 해당 데이터를 checkedItems라는 state에 추가 / 반대 시 해당 데이터 제거 input의 checked속성 위와 같이 checkbox input은 cheched속성을 가지고 있으며 true와 false로 조작이 가능하다. 일단 체크된 item의 데이터를 추가하는 함수를 만들어보자 Cart.js의 일부 const [checkedItems, setCheckedItems] =..

onChange를 이용하여 입력한 value를 state에 저장하여 그 내용을 출력하는 코드를 작성하는 중 숫자만 입력받게 해야했다. const handleKeyDown = (event) => { if (!Number(event.key) || !event.key == "Backspace") { event.preventDefault(); } }; onKeyDown을 사용하여 위의 코드랑 비슷한 식으로 작성했는데 이상하게 한글의 자음, 모음은 입력되는 현상이 발생했다. 함수실행은 분명히 keyDown먼저 되는데 말이다.. input type을 number로 해보는 등등 여러가지를 해보고 keyCode나 key전부 해봤는데 또 어쩌다 한글입력이 안되다가도 또 다음날 같은코드에 실행을 시켜보면 한글입력이 된다던..

link to로 페이지를 이동하니 이전의 스크롤 위치 그대로 유지되어 이동되는 이슈가 생긴다. 클래스 컴포넌트로 만드는 방법도 있었지만 hooks를 이용하여 처리하는 방법이 더 편한 것 같아서 정리해 놓는다. [ScrollToTop.js] import { useEffect } from 'react'; import { withRouter } from 'react-router-dom'; function ScrollToTop({ history }) { useEffect(() => { const unlisten = history.listen(() => { window.scrollTo(0, 0); }); return () => { unlisten(); } }, []); return (null); } export ..

useRef javascript에서는 getElementById, querySelector 와 같이 특정 DOM을 선택할 수 있는데 react 에서는 ref를 사용하여 특정 DOM을 선택 할 때 사용한다. ref를 사용 할 때는 useRef라는 hook을 사용한다. const inputRef = useRef(); 이렇게 input에 ref를 useRef()로 만든 변수명을 넣어주면 사용 가능하다. myInput을 console.log에 출력해보면 console.log(inputRef) /* {current: HTMLInputElement} current: */ 위와 같이 current에서 input이 나타나며 myInput.current를 사용하면 해당 input에 접근이 가능하다. + Class com..

state 업데이트 함수는 비동기식(asynchronous) 함수이다. state를 업데이트를 하고 그 값에 맞춰서 처리하는 함수가 아래에 있을 경우 순서대로 처리가 되지 않아서 오류를 접할 수 있다. 예를들어 아래의 코드를 보자. function Example(){ let [count, setCount] = useState(0); let [data, setData] = useState('2를 만들어 주세요') function handleClick() { setCount(count+1); if(count === 2){ setData('2 입니다'); } } return( { data } count : {count} ) } 버튼을 클릭하면 count가 하나씩 증가하고 count가 2가 되었을 때 date를..

React의 완전 기본을 마치고 tab메뉴를 구현해보기로 했다. 더 나은 방법이 있을까 궁금하지만 일단 구현되는 대로 작업을 했다. 탭메뉴(Tab Menu) 구현 function Example(){ const [tabState, setTabState ] = useState('product'); return( { setTabState('product')}}>상품정보 { setTabState('review')}}>제품리뷰 { setTabState('shipping')}}>배송정보 { { product: 상품정보, review: 제품리뷰, shipping: 배송정보, }[tabState] } ) } 먼저 tabState를 만들고 default로 상품정보가 보여지게끔 상태를 담아주었고 tab의 각 버튼 클릭 시..

React에서 hook이 생기고 난 후 connect방식보다 조금 더 편한 방식인 useSelector와 useDispatch 2가지 hook을 알아보자 useSelector() useSelector 기능을 사용하여 redux store의 state 데이터를 추출해서 가지고 올 수 있다. let state = useSelector((state) => state) 여기서 state는 redux에 있던 모든 state를 의미하며 위 코드는 state를 리턴한다는 뜻. console.log(state)를 확인해보면 만들어놓은 모든 reducer들이 담겨있다. connect처럼 props를 담아서 사용할 필요없이 state.[reducer name]으로 데이터를 불러올 수 있음. 예) state.reducern..