짧은코딩

객체의 특징 객체는 복사할 때 원시 타입(문자열, 숫자, 불린값)가 다른 방식을 사용한다. 객체를 아래 코드처럼 복사하게 되면 let user = { name: "John" }; let admin = user; // 참조값을 복사함 참조 값을 복사하게 된다. 이는 user에서 객체를 저장하고 있는 위치를 admin에게 알려줘서 참조값을 복사하는 것이다. 이렇게 된다면 admin을 수정했을 때, user의 값도 바뀌게 된다. 그리고 user와 admin을 '==', '===' 연산자로 비교하면 true가 나오게 된다. (객체는 '=='도 '==='와 동일하게 동작) 얕은 복사 얕은 복사는 객체를 복사할 때 기존 값과 복사된 값이 같은 참조를 가리키는 것을 말한다. 객체 안의 한 객체라도 기존 변수의 객체를..

문제점 const onClickLenUp: any = useCallback((e: any, idx: number) => { console.log("누름", idx); }, []); 이렇게해서 html에 바로 주게되면 버튼을 클릭하지도 않았는데 실행이되어있다. 해결법 해결방법은 익명 함수를 사용하는 것이다. onClickLenUp(item[index]?.id)}> 이렇게 익명 함수를 사용하게 되면 onClick 이벤트에 인자를 줄 수 있다!

input 동적으로 만들기 사진처럼 select로 옵션 개수를 입력받고 input을 동적으로 늘려주려고 한다. 옵션이 최대 5개라서 처음엔 5개를 다 만들고 + 버튼을 누르면 hidden이 사라지고 보이게 하려고 했다. 하지만 이 방법은 너무 비효율적인 거 같다. 해결법 옵션값을 컴포넌트로 만들어서 select로 선택한 숫자만큼 map으로 옵션값 컴포넌트를 늘려주면 된다. 그리고 나중에 각각의 값들을 한 곳에 모아주면 된다. 코드 -OpttionInput import React, { ChangeEvent, DetailedHTMLProps, Dispatch, ElementType, FC, HTMLAttributes, SetStateAction, useCallback, useEffect, } from "re..

map 사용 일정 숫자만큼 화면에 쓰고 싶어서 나는 for문을 생각하고 있었다. 하지만 for문은 사용할 수 없었다. 따라서 map을 이용해서 사용해야 한다. 적용 코드 옵션의 개수에 따라서 "으액"이 출력되도록 하고싶었다. const handleCountSelect = useCallback((e: ChangeEvent) => { const cnt = parseInt(e.target.value); setCount(cnt); }, []); 여기서 e.target.value를 정수형으로 바꾸지 않으면 코드 실행이 되지 않았다. {[...Array(count)].map((n, index) => { return 으액; })} 이렇게 렌더하면 위 사진과 같은 결과를 보여줄 수 있다.

리덕스 미들웨어 action은 기본적으로 동기이다. action이 객체고 dispatch는 그냥 객체를 받아서 dispatch하는 역할이기 때문에 그 사이에 비동기가 들어갈 틈이 없다. 비동기를 하기 위해서는 미들웨어를 사용해야 한다. dispatch와 reducer 사이에 동작하는게 미들웨어이다. 리덕스 미들웨어로는 redux-thunk, redux-saga를 가장 많이 사용한다. 무조건 비동기를 위해서만 미들웨어를 사용하지는 않는다. 예를 들어 미들웨어에서 로깅도 할 수 있다. const store = createStore(reducer, initialState, enhancer); 위 매개변수의 순서가 정해져있다. enhancer가 store를 "덧붙이거나 증강시킨다"라는 의미이다. 따라서 enha..

React FunctionComponent interface P { name: string, title: string, } // ReactElement는 굳이 안해도 된다. const WordRelay: FunctionComponent = (): ReactElement => { } FC가 FunctionComponet의 줄임말이다. 리액트 17버전에서는 VFC도 있었는데 18버전에서는 사라졌다. VFC와 FC의 차이는 VFC는 children이 없고 FC는 childrend이 있다. 따라서 FC children를 사용하고 싶다면 interface P { name: string, title: string, children?: ReactNode | undefined; } const WordRelay: FC ..

useHistory react-router 6버전부터는 useNavigate로 구현할 수 있다. 하지만 5버전에서는 useHistory로 구현해야 한다. 구현 방법 -import import { useHistory } from "react-router"; -코드 const history = useHistory(); const handleHistory = () => { history.goBack(); }; 이렇게 goBack() 메서드를 사용하면 된다. 적용하기 onClick에 handleHistory 메서드를 주면 된다.

원본 파일 const { createStore } = require("redux"); const reducer = (prevState, action) => { switch (action.type) { case "LOG_IN": return { ...prevState, user: action.data, }; case "LOG_OUT": return { ...prevState, user: null, }; case "ADD_POST": return { ...prevState, posts: [...prevState.posts, action.data], }; default: return prevState; } }; const initialState = { user: { isLoggingIn: true, data:..

해결법 이 문제는 일단 왕자의 수 만큼 배열에 넣어둔다. 그리고 우선 k-1만큼 앞 왕자를 빼서 뒤로 보낸다. 그리고 k번째 왕자가 있는 숫자를 제거한다. 이것을 1명의 왕자가 남을 때 까지 반복하면 된다. 코드

해결법 이 문제는 스택으로 해결할 수 있다. 만약 괄호가 "("이면 스택에 넣는다. 그러다가 ")"를 만나면 2가지 케이스로 나뉜다. 우선 무조건 스택에 있는 "(" 1개를 삭제한다. 그리고 앞이 "("이면 레이저라서 스택에 있는 "(" 개수만큼 answer에 더해준다. 앞이 ")"이면 막대가 끝난거라서 잘리고 남아있는 막대 1개를 answer에 더해준다. 코드