React7 Reducer useReducer hook이란? useState를 대체할 수 있는 함수입니다. React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 state입니다. 좀 더 복잡한 상태 관리가 필요한 경우 reducer를 사용할 수 있습니다. 이전 상태와 Action을 합쳐, 새로운 state를 만드는 조작입니다. 1.useReducer 함수 import React, { useReducer } from "react"; const [state, dispatch] = useReducer(reducer, initialState, init); 1. state 컴포넌트에서 사용할 상태 2. dispatch 함수 첫번째 인자인 reducer 함수를 실행 컴포넌트 내에서 state의 업데이트를 일으키기.. 2023. 12. 25. useEffect useEffect란? 부수효과(sideEffect)가 일어날 수 있는 코드를 작성하기 위한 hook이라고 볼 수 있습니다. 1-1. 프로토타입 - useEffect (setup callback, dependency array) 1. setup callback 선택적으로 Effect 작업을 마치고 마무리로 수행할 로직이 작성된 clean up 함수를 반환할 수 있습니다. 컴포넌트가 초기에 마운트되거나 의존성 배열 내에 작성된 값이 변경됨에 따라 useEffect가 다시 호출되면 clean up 함수와 setup call back이 호출됩니다. 이후 DOM에서 useEffect를 사용하는 컴포넌트가 제거될 경우 React는 clean up 함수를 호출합니다. 2. dependency array - (opti.. 2023. 12. 25. useState 함수형 컴포넌트 내부에서 상태를 관리할 수 있게 제공해주는 hook으로 React에서 기본적으로 제공되는 하나의 내장 함수처럼 동작합니다. 1. 프로토타입 페이지에 초기 렌더링 될 때만 수행되고 이후 컴포넌트가 다시 호출될 때는 초기값으로 재할당되지 않습니다. 1-2 반환 값 (return) state: 배열의 첫 번째 요소, 현재 state에 초기화된 상태 값 setState: 배열의 두 번째 요소, setter() 함수 setter() 의 인수에 전달한 값을 통해 state의 값을 업데이트할 수 있으며 setter() 가 호출되면 이전에 출력된 결과값과 비교하였을 때 변경된 부분이 존재하기 때문에 페이지에는 새롭게 업데이트된 결과값으로 re-rendering 됩니다. 2023. 12. 25. State State란 상태를 의미하며 React에서 데이터를 관리하는 대표적인 방법 중 하나입니다. 특징 1. Props와 다르게 자신의 컴포넌트 내에서 관리되는 State는 값 변경이 가능합니다. 2. useState() hook으로 관리 중인 state의 값을 변경 시 re-rendering 발생 2023. 12. 22. 이전 1 2 다음
