react-hooks3 useReducer, React-hooks(3) 8-3 useReducer useState와 useReducer는 컴포넌트의 상태를 관리하는 hook이다. useReducer는 컴포넌트와 상태 업데이트 로직을 분리하여 컴포넌트 외부에서도 상태관리를 할 수 있다 useReducer를 사용하면 컴포넌트 바깥에서도 작성할 수 있고, 다른 파일에 작성하여 불러와서 사용할 수도 있다. 1. 컴포넌트 외부에 상태 업데이트 로직의 reducer함수 작성 기본형태 : function reducer(state, action) { ... } function reducer (state, action) { switch (action.type){ case 'INCREMENT' : return {value : state.value+1} case 'DECREMENT': retu.. 2022. 8. 10. useEffect, React-Hooks(2) useState, useEffect, useReducer Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수다. useState : state의 상태를 관리하는 Hook useEffect : 렌더링 직후 작업 설정하는 Hook useReducer : useState처럼 state를 관리, 업데이트 할 수 있는 Hook 8-2 useEffect 기본형태 : useEffect( function, deps ) function : 수행하고자 하는 작업 deps(의존배열) : 배열 형태이며, 배열 안에는 검사하고자 하는 특정값 or 빈배열이 들어간다 1. 마운트 될 때만 실행하고 싶을 때 = 컴포넌트가 처음 나타날 때만 실행하고 싶을 때 함수의 두 번째 파라미터(dep.. 2022. 8. 10. useState, 가장 기본적인 React-Hooks useState, useEffect, useReducer Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수다. useState : state의 상태를 관리하는 Hook useEffect : 렌더링 직후 작업 설정하는 Hook useReducer : useState처럼 state를 관리, 업데이트 할 수 있는 Hook 8-1 useState const Counter = ()=>{ const [value, setValue] = useState(0) useState 함수를 호출하면 배열을 반환 첫번째 원소 value = 현재 상태값 변수이고 두번째 원소 setValue = 상태값을 갱신해주는 setter함수다 useState 괄호 안의 값은 초기 상태값이다. //.. 2022. 8. 10. 이전 1 다음