web
-
[React] 상태관리와 훅web 2024. 9. 19. 14:29
상태상태컴포넌트 안에서 관리 되고 시간이 지나면서 바뀌는 동적인 데이터→ boolean, String, number 등의 자료형뿐만 아니라 객체, 서버에서 불러오는 데이터 등 모든 것조건부 렌더링✅ 삼항 연산자{조건?(참):(거짓)}{isClicked ? alert("참"):alert("거짓")}✅ &&{조건 &&(참)}{isClicked && alert("참")}✅ ||{조건 &&(참)}{isClicked && alert("거짓")}useState💡 state란 변수. setState는 state값을 변경시켜주는 함수. useState는 state, setState를 return하면서 초기값을 설정해주는 hook. ✅ let, const와는 다르게 렌더링이 되는 변수이기 때문에, useState를 사..
-
[ 모던 리액트 : Deep Dive ] - 03장 리액트 훅 깊게 살펴보기 useReducerweb 2023. 12. 22. 05:24
🚀 useReducer ✅ useReducer란? - useReducer는 useState의 심화 버전으로 볼 수 있다. - 복잡하고 수정해야하는 경우의 수가 많은 state일 경우, 여러개의 state를 묶어 useReducer로 관리하는 것이 효율적이다. - state 값이 변경되는 시나리오를 제한적으로 두어 변경을 빠르게 확인하고자 하는 목적성을 지닌다. 즉, dispatcher로만 state를 수정할 수 있게 해서, state 접근은 컴포넌트에서만 가능하게 하는 것이다. ✅ 사용방법 import { useReducer } from 'react'; function reducer(state, action) { if (action.type === 'changed_name') { return { name..
-
[ 모던 리액트 : Deep Dive ] - 03장 리액트 훅 깊게 살펴보기 useContextweb 2023. 12. 22. 05:06
🚀 useContext ✅ context를 사용하는 이유 - 부모 컴포넌트에서 자식 컴포넌트를 내려주는 것을 prop 내려주기라고 하고, 내려주는 prop이 많아지면 props drilling이라고 부른다. 사실 props drilling을 해결하기 위해 정말 다양한 방법이 제시되는데, context도 그 중 하나이다. - 이 context를 함수형 컴포넌트에서 사용할 수 있게 해주는 것이 useContext 훅이다. ✅ 사용방법 import { createContext, useContext } from 'react'; // (1) const Context = createContext(defaultValue); export default function MyApp() { return ( // (2) );..
-
[ 모던 리액트 : Deep Dive ] - 03장 리액트 훅 깊게 살펴보기 useRefweb 2023. 12. 22. 01:05
🚀 useRef ✅ useRef란? - 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태값을 저장하는 훅 ✔️ useState와 다른점 - useRef의 반환값은 객체여서, current 값으로 접근, 변경 가능하다. - useRef는 값이 변해도 렌더링을 발생시키지 않는다. 즉, useRef는 렌더링에 영향을 미치지 않는 고정값을 관리하기 때문에, 렌더링을 발생시키지 않고 원하는 값을 저장할 수 있다. 🚀 정리 🩵 렌더링에 영향을 미치지 않고 값을 저장하고 싶다면, useRef를 사용한다.
-
[ 모던 리액트 : Deep Dive ] - 03장 리액트 훅 깊게 살펴보기 useMemo, useCallbackweb 2023. 12. 22. 00:54
🚀 useMemo ✅ useMemo란? - 비용이 큰 연산에 대한 결과를 메모이제이션해두고, 저장된 값을 반환하는 훅 ✅ 사용방법 import { useMemo } from "react"; const memo=useMemo(()=>{ // 값을 반환하는 생성 함수 // 컴포넌트도 가능 },[// 의존성 배열 ]) 🚀 useCallback ✅ useCallback이란? - 인수로 넘겨받은 콜백 자체를 기억하는 훅. 즉, 특정 함수를 새로 만들지 않고 재사용한다. - useMemo는 값을 기억하지만, useCallback은 함수를 기억한다. ✅ 사용방법 import { useCallback } from "react"; const memo=useCallback( function func(){ },[// 의존성..
-
[ 모던 리액트 : Deep Dive ] - 03장 리액트 훅 깊게 살펴보기 useEffectweb 2023. 12. 22. 00:31
🚀 useEffect ✅ useEffect란? 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 매커니즘 ✅ useEffect의 일반적인 형태 import { useEffect } from "react"; useEffect({ // 실행할 부수효과가 포함된 함수 },[// 의존성 배열 ]) - useEffect는 의존성 배열에 담긴 값을 보면서, 이 값이 이전과 하나라도 다르다면 부수 효과를 실행한다.
-
[ 모던 리액트 : Deep Dive ] - 03장 리액트 훅 깊게 살펴보기 useStateweb 2023. 12. 21. 22:21
🚀 useState useState는 리액트를 처음 접했을 때, 가장 먼저 사용하게 되는 훅이라고 할 수 있다. 그렇다면 useState의 정확한 원리를 어떻게 될까? ✅ useState란? - 함수형 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅 ✅ 기본 사용법 import { useState } from 'react' const [state, setState]=useState(initialState) - useState는 기본적으로 위와 같이 사용하고, initialState를 지정해주지 않은 경우에는 undefined로 초깃값이 설정된다. ✅ useState 동작 원리 function Test(){ let state="어서오세요" function handleClick(){..
-
[ 모던 리액트 : Deep Dive ] - 02장 리액트 핵심 요소 깊게 살펴보기web 2023. 12. 15. 16:27
🚀 렌더링은 어떻게 일어나는가? ✅ 렌더링이란? 리액트에서의 렌더링 = 리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 UI를 구성하고, 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 과정 브라우저에서의 렌더링 = HTML과 CSS를 기반으로 웹 페이지에 필요한 UI를 그리는 과정 ✅ 렌더링은 언제 발생할까? 1. 최초 렌더링 : 유저가 처음 애플리케이션에 진입한 경우 2. 리렌더링 : 최초 렌더링 이후 발생하는 모든 렌더링 1) state가 업데이트 되는 경우 ex. 클래스형 컴포넌트의 setState가 실행되는 경우, 함수형 컴포넌트의 useState() 두번째 배열 요소인 setter가 실행되는 경우 함수형 컴포넌트의 useReducer() 두번째 배열 요소인 dispatch가 실행되는..