전체 글 (76) 썸네일형 리스트형 [TIL] Context API 1. Context 생성 const LetterContext = createContext(); 2. Provider 제공 import { createContext } from 'react'; function Provider컴포넌트() { const userName = "Kim"; const age = 25; return { }; } 3. Consumer 사용 import React, { useContext } from "react"; function Consumer컴포넌트() { const data = useContext(LetterContext); return ( 내 이름은 {data.userName}입니다. 내 나이는 {data.age}입니다. ) } export default Consumer컴포넌트.. [TIL] Redux란? 리덕스는 전역 상태 관리 라이브러리이다. 애플리케이션의 상태를 효율적으로 관리할 수 있게 도와주는 도구이다. 쉽게 말해 모든 컴포넌트에서 바로 접속 가능한 저장소로 모든 컴포넌트들이 State를 쉽게 공유할 수 있게 해주는 방식이라 보면 된다. 만약 깊이가 A부터 F까지인 컴포넌트 트리 구조가 있다고 가정하면, A ▶ B ▶ C ▶ D ▶ E ▶ F 순서로 접근 이동시켜야하고, 다시 F ▶ E ▶ D ▶ C ▶ B ▶ A 루트를 통해 돌아와야하는데 이런 상황은 굉장히 귀찮고 번거로운 과정이다. 그런데 만약 리덕스를 사용해 하나의 Store라는 매체를 두면 컴포넌트가 어느 위치에 있던 간에 A ▶ Store ▶ F 로 바로 상태 값을 가지고 올 수 있다. Redux를 쓰는 이유 1. 모든 컴포넌트들이 pr.. [TIL] useState와 useRef import { useState, useRef } from 'react'; function App() { const [count, setCount] = useState(0); const refCount = useRef(0); const plusCountHandler = () => { setCount(count + 1); }; return ( UseState 카운트 : {count} 숫자 1 증가 UseRef 카운트 : {refCount.current} { refCount.current = refCount.current + 1; console.log(refCount.current); }} > + ); } export default App; useState useState는 컴포넌트의 상태를 관리하고 값이 .. 이전 1 ··· 7 8 9 10 11 12 13 ··· 26 다음