useRef 참고 유튜브 : https://www.youtube.com/watch?v=VxqZrL4FLz8 useRef 변수 관리 반환된 ref는 컴포넌트가 계속해서 렌 더링이 되어도 언마운트가 되기 전까지 값을 유지 가능 변경 시 렌더링을 발생시키지 말아야 하는 값을 다룰 때 편리 실제적으로 dom 요소에 접근 가능 ex)포커스 주기 , 손쉽게 input요소 접근 가능 import import React, { useRef, useState } from "react"; const countRef = useRef(0); //countRef.current에 저장이 된다. 예제 코드 import React, { useRef, useState } from "react"; function Ref() { const..

Custom hook Custom hook이란? useState, useEffect 등등 hook을 사용하는 것만으로도 코드가 훨씬 보기 좋아졌지만, 반복되는 훅 활용 메소드들을 하나로 줄여줌으로써 더 간결하고 보기 좋은 코드를 만들 수 있는 것이 바로 custom hooks입니다. custom hook의 이름은 무조건!!!! use로 시작해야한다! //UserList.js import React, { useEffect, useState } from "react" import { Link } from "react-router-dom" function UserList() { const [userList, setUserList] = useState([]) const url = "https://jsonplac..

styled-components 설치 npm i styled-components import import styled from "styled-components"; 고정 스타일링 import React from "react"; import styled from "styled-components"; const StyledButton = styled.button` padding: 0.375rem 0.75rem; border-radius: 0.25rem; font-size: 1rem; line-height: 1.5; border: 1px solid lightgray; color: gray; background: white; `; function Button({ children }) { return {child..

const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); import { useEffect, useState, useCallback } from "react"; import "./App.css"; function App() { const [number, setNumber] = useState(0); const someFunction = () => { console.log(number); }; useEffect(() => { console.log("변경됨"); }, [someFunction]); return ( { setNumber(e.target.value); }} /> Call someFunc ); } export de..

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 자바스크립트에서는 원시타입과 객체타입이 있다. 원시타입? 어떤 변수에 원시타입의 값을 할당하면 그 값은 박스에 바로 들어간다. 같은 원시값을 가지고 있는 두가지 변수를 비교하면 true가 나온다. 객체타입? 하지만 객체는 어떤 변수에 객체타입의 값을 할당하면 객체는 크기가 크기 때문에 메모리상에 값이 할당되어 보관되고 변수안에는 그 객체에 담긴 메모리의 주소가 할당이 된다. 똑같은 객체를 넣어준 변수를 비교하면 false가 나온다. 변수라는 상자안에는 메모리 상의 주소가 들어가 있기 때문에 다른 주소에 저장되어 있기 때문이다. 오브젝트가 똑같아 보여도 다른 오브젝트이다. 렌..

Redux 상태 관리 라이브러리 props ? 부모 → 자식, 변하지 않음 state ? 컴포넌트 안에서 전달, 변경 가능, 변하면 리 랜더링 리덕스의 좋은점은? 컴포넌트로 데이터 전달시 props로 하나씩 타고 올라가면서 주던가 타고 내려가면서 줘야한다. 하지만 리덕스는 리덕스 스토어에 저장하면 직접 접근 가능 리액트 컴포넌트 → 디스패치 → 액션 → 리듀서 → 스토어 → 컴포넌트 (한방향) 액션? 액션은 객체, 무엇이 일어나는 타입인지 (type), 그밖에 설명, 상태 알려줌 리듀서? 리듀서는 이전state가 액션을 만나서 next state(변화가 생긴) 것을 반환 스토어? store는 state를 감싸주는 역할 store안에는 여러가지 메소드가 있는데 이를 이용하여 관리할 수 있다. Setting..

Utility Types //keyof interface User { id: number; name: string; age: number; gender: "m" | "f"; } type UserKey = keyof User; //'id' | 'name' | 'age' | 'gender' const uk1: UserKey = ""; //오류 const uk2: UserKey = "age"; Partial //Partial //Partial은 프로퍼티를 모두 옵션으로 바꿔준다. 따라서 일부만 사용할 수 있다. interface User { id: number; name: string; age: number; gender: "m" | "f"; } let admin:Partial = { //Partial로 감싸..

Generic //Generic을 이용하면 클래스나 함수, 인터페이스를 다양한 타입으로 재사용할 수 있다. function getSize(arr: number[] | string[] | boolean[] | object[]): number { return arr.length; } const arr1 = [1, 2, 3]; getSize(arr1); //3 //함수 오버로드나 유니온 타입을 사용하여 문제 해결 const arr2 = ["a", "b", "c"]; getSize(arr2); const arr3 = [false, false, true]; getSize(arr3); const arr4 = [{}, {}, { name: "tom" }]; getSize(arr4); 다른 타입들을 전달하기 위해서는 ..