전체 글

간단한 React 커스텀 훅(Custom Hook) 사용법

간단하게 리액트 커스텀 훅을 사용해보기로 하였다. 커스텀 훅은 내가 사용해보고 느끼기에, 커스텀 훅이란 기존의 훅이 사용된 함수를 의미하고, use로 시작하는 이름으로 네이밍한 것이 커스텀 훅인 것 같았다. 🍓 커스텀 훅을 만들어 사용함으로써, 반복되는 코드의 함수가 여러 번 재사용될 수 있다. 그리고 커스텀 훅을 사용하면서 알게된 훅의 사용법으로는, 훅은 조건부로 사용될 수 없고, 렌더링 될 때 조건에 상관없이 실행이 되어야 한다는 점이 있다. 다음으로 내가 만들어 사용해봤던 커스텀 훅의 몇가지 예시를 남긴다. useState를 이용한 input의 데이터를 관리하는 커스텀 훅 import { useState } from "react"; export const useCustomHook = () => { ..

간단하게 react-hook-form과 yup 사용하기

React에서 손쉽게 Form을 작성하고 유효성 검사를 하기 위해서 두 라이브러리를 사용해보았다. npm i react-hook-form npm i yup npm i @hookform/resolvers import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; import * as yup from "yup"; function Form() { // yup으로 유효성 검사 const schema = yup.object({ firstName: yup.string().required("이름을 입력해 주세요."), lastName: yup.string().required("성을 입력해 주세요."),..

javascript 정렬 알고리즘

정렬 알고리즘으로 버블, 선택, 삽입, 퀵, 합병 정렬을 배웠었다. 하지만, C언어로만 이 코드들을 작성했었기에 자바스크립트로도 정렬 알고리즘을 기록하기로 하였다. 물론, 자바스크립트에서는 arr.sort((a, b) => a - b) 알고리즘으로 손쉽게 배열을 정렬할 수 있다. 🍇 버블 정렬 가장 쉽게 생각할 수 있는 정렬 방법으로 앞뒤의 숫자를 비교하여 정렬이 필요하다면, 앞뒤의 숫자를 바꾼다. 이미 정렬된 상태라면, 중간에 반복문을 중단할 수 있다. 평균적으로 O(N^2) 시간복잡도를 가진다. (큰 배열을 정렬할 때 부적합하다) const bubbleSort = function (arr) { let sorted; for(let i = 0; i < arr.length; i++){ sorted = fa..

prettier 사용하기 (vscode)

VScode에서 prettier를 적용하고자 한다면, 확장도구 Prettier - Code formatter를 설치한다. https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode Prettier - Code formatter - Visual Studio Marketplace Extension for Visual Studio Code - Code formatter using prettier marketplace.visualstudio.com 또한, 파일을 저장할 떄 자동으로 prettier를 적용하기 위해서 VScode에서 F1을 누르고 settings.json 파일을 찾아 연다. 다음과 같이 수정하면 저장시 자동으로 코드가 정렬..

React Native의 Animated 사용하기

React Native에서 애니메이션 효과를 구현하기 위해서는 Animated를 사용한다. 사각형의 View가 이동하는 애니메이션을 만들었다. import React from 'react'; import { Animated, SafeAreaView, View, Text, StyleSheet, Button, } from 'react-native'; function AnimatedTest() { const viewSize = new Animated.ValueXY(0, 0); const handleAnimated = () => { Animated.spring(viewSize, { toValue: {x: 150, y: 350}, useNativeDriver: false, }).start(); }; return ..

javascript 순열과 조합 알고리즘

조합은 배열에서 n개를 선택하는 것으로 순서가 바뀌어도 같은 것으로 취급한다. 순열은 배열에서 n개를 선택해 나열하는 것으로, 순서가 바뀌면 다른 것으로 취급한다. 자바스크립트 조합 알고리즘 const combination = (arr, select) => { const answer = []; const dfs = (idx, num, tmp, visited) => { if(idx === arr.length){ return; } if(num === 0){ answer.push(tmp); } for(let i = idx; i < arr.length; i++){ if(!visited[i]){ // 미방문 visited[i] = true; dfs(i, num - 1, tmp.concat([arr[i]]), vi..

ky와 got으로 API 호출하기

ky는 브라우저, got은 node.js 환경에서 사용된다. axios에 비해서 가볍다. (다만, axios는 서버/클라이언트 모두 호환된다.) import React, {useEffect, useState} from 'react'; import ky from 'ky'; export default function App() { const [data, setData] = useState(null); useEffect(() => { ky.get('url 주소').then((response) => (setData(response))) }, []); return ( {JSON.stringify(data)} ); } React에서 ky를 사용하여 post 요청을 보낼 수 있다. json 객체 내부에 json 데이..

ContextAPI 사용하기

리액트의 코어 라이브러리로 ContextAPI는 redux, recoil, mobX와 같은 라이브러리와는 다르게 설치 없이 사용할 수 있다. 최상위 컴포넌트부터 최하위 컴포넌트까지 모두 동일한 상태를 만들고 사용하기 위해서 ContextAPI와 같은 전역 상태 관리 도구를 이용할 수 있다. // store.js import React, { useState } from "react"; export const MyContext = React.createContext(); const StateStore = (props) => { const [color, setColor] = useState("black"); const [direction, setDirection] = useState("row"); return..