짧은코딩

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에 더해준다. 코드

Axios 만들기 import axios, { AxiosError, AxiosResponse } from "axios"; interface Post {} interface Created {} interface Data { title: string; body: string; userId: number; } // date에 타입을 줄 때 그냥 any로 하면 타입핑을 포기한다는 것이다. //따라서 제네릭을 이용해서 타입이 any가 아니여도 괜찮다. interface Config { // method는 string으로 해도 되지만 이렇게 좁혀주는 것이 더 좋다. method?: "post" | "get" | "put" | "patch" | "delete" | "head" | "options"; url?: str..

Redux 서버에서 데이터 수정을 하면 프론트에서 값이 바뀌고, 프론트에서 데이터 수정을 하면 서버에서 값이 바뀌는 양방향 코딩을 하게되면 문제가 발생할 수 있다. 코드가 좀 복잡해지면 값이 이상하게 꼬일 수 있다. 따라서 Redux를 활용해서 데이터 관리를 쉽게 해줄 수 있다. Redux는 꼭 리액트에서만 사용하는 것은 아니다. 그치만 리액트에서 Redux를 많이 사용한다. -예시 리액트에서 A, B, C 컴포넌트가 있고 A가 제일 위 부모 태그, C가 제일 아래 자식 태그라 하면 state값을 다 따로 관리 해주게된다. 이 state를 다 같이 관리하기 위해서 Redux에 state를 저장하고 쉽게 관리 할 수 있다. 즉 컴포넌트 간의 state를 관리 할 때 사용하면 된다. 만약 컴포넌트 B에서만 ..