![]()
useMemo 란?useMemo는 컴포넌트를 최적화(optimization) 하는 리액트 훅이다.컴포넌트 최적화의 훅은 useMemo 말고 useCallback 도 존재한다.useMemo에서 Memo는 Memoization 을 의미한다Memoization은 동일한 값을 리턴하는 함수를 반복적으로 호출하는 경우, 처음의 값을 메모리에 저장해서 함수를 호출할때 마다 메모리의 값을 불러오는 기법이다. 값을 캐싱해서 불러오는 것이라고 생각하면 된다.함수형 컴포넌트가 렌더링 되는 과정에서 생기는 문제함수형 컴포넌트는 렌더링 될때 마다 Component 함수를 호출하기 때문에 모든 변수를 초기화하는 과정을 겪는다.fuction calculate(){ return 999}function Component() { co..
custom hook 이란?커스텀 훅이란 나만의 리액트 훅 이다.필요한 커스텀 훅을 만들어 놓으면, 필요할 때 마다 사용이 가능해서 재사용성이 높아 효율적이다.custom hook 만들어보기useInput 만들어보기'use client';import { ChangeEvent, useState } from 'react';const CustomHook = () => { const [inputValue, setInputValue] = useState(''); const handleChange = (e: ChangeEvent) => { setInputValue(e.target.value); }; const handleSubmit = () => { alert(inputValue); }; r..
useRef 알아보기useRef는 다음과 같이 사용된다.const ref = useRef(value);// ref => { current. : value}인자로 넣어준 값이 current에 존재하게된다.const ref = useRef("메가커피"); // ref => { current. : "메가커피"}ref.current = "스타벅스" // ref => { current. : "스타벅스"}언제 어디서든 값이 변경이 가능하다.제일 중요한것!ref 는 unmount 되기 전까지 컴포넌트 전생에 주기에 유지된다.useRef는 언제 사용하는가?첫번째. 저장 공간의 용도state는 값이 변경되면 리렌더링 되어 컴포넌트 내부 변수들이 초기화가 된다. 반면 ref는 값이 변해도 리렌더링 되지 않아 화면의 불..
useState란?component가 상태 가지게 할 수 있다.아래와 같은 코드 형태으로 존재한다.const [state, setState] = useState(초기값);예시 코드로 보기const [time, setTime] = useState(12);// time = 12// setTime(10) 을 할 경우 time 의 값이 10으로 변경된다,React는 setState() 요소를 사용하면 화면을 업데이트 즉 다시 렌더링 시켜준다실제 코드로 살펴 보기'use client';import { useState } from 'react';const Mytime = () => { const [time, setTime] = useState(1); const handleClick = () => { let..
useEffect는 컴포넌트가 3가지 상태일때 동작된다.Mount : 화면에서 생성될때Upadate : 화면에서 업데이트 될때UnMount : 화면에서 사라질때useEffect는 기본적으로 인자로 callback 함수를 인자로 받는다.useEffect 의 형태첫번째, useEffect의 인자로 callback 함수만 받는 경우useEffect(() => { // code.});해당경우는 component가 처음 렌더링될때 , 그리고 화면 다시 리렌더링 될 때 실행된다.두번째, useEffect의 인자로 callback 함수와 배열을 받는 경우 (dependency array)useEffect(() => { // code.} , [value] );component가 처음 렌더링될때 , 그리고 depen..
Context API가 무엇인가?context는 리액트에서 컴포넌트끼리 어떠한 값을 공유하는 기능이다.보통 전역적(global)로 사용되지만, 꼭 전역적으로 사용할 필요는 없다.Context API를 왜 사용하는가?React에서 컴포넌트에서 값을 props로 넘겨주면 생기는 props drill현상이 있다.import React from 'react';// 최상위 컴포넌트function App() { const username = 'johndoe'; // 사용자 이름을 상태로 관리하거나 props로 받을 수 있습니다. return ( Level 1 );}export default App;// 두 번째 컴포넌트function LevelTwo({ username })..
