전체 글 (291) 썸네일형 리스트형 Redux Redux 중앙 데이터 관리소(Store)로 상태관리소로 접근 & 제어 공용 변수 저장소 전역 상태관리 라이브러리 즉, Global State를 의미하고 그것을 관리하게 도와주는 라이브러리(패키지) 필요 이유 Props로 State를 공유하는 방법에는 불편한 점 개선 세팅 $ yarn add redux react-redux 리덕스 카운터 프로그램 세팅 modules/counter.js // 초기 상태값(state) const initialState = { number: 0, } // const [number, setNumber] = useState(0) // 리듀서 : 'state에 변화를 일으키는' 함수 // (1) state를 action의 type에 따라 변경하는 함수 // input : state.. Hooks - useEffect, 의존성 배열(dependency array) Hooks - useEffect, 의존성 배열(dependency array) useEffact 렌더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 훅 컴포넌트가 화면에 보여졌을 때 컴포넌트가 화면에서 사라졌을 때(return) App.jsx import React, { useEffect, useState } from 'react' function App() { const [value, setValue] = useState('') useEffect(() => { console.log('hello useEffect!'); }); return ( { setValue(event.target.value); }} /> ) } export default App 의존성 배열 dependency array 이 배열.. Hooks - useState Hooks - useState 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 갖게 함 카운터, Todolist const [state, setState] = useState(초기값); 배열을 구조분해 할당으로 꺼내놓음. 함수형 업데이트 App.jsx import { useState } from 'react'; import './App.css'; function App() { const [number, setNumber] = useState(0); return ( Number State : {number} { // 기존 업데이트 방법 // setNumber(number + 1); // 함수형 업데이트 setNumber((curNum)=>{ return curNum + 1; }) }} > 누.. 이전 1 ··· 14 15 16 17 18 19 20 ··· 97 다음
