리액트 훅 사용법
-
컴포넌트(5) 리액트 훅(react hook)사용 - useReducerReact 리액트 2023. 9. 7. 11:18
1. useReducer 훅이란? - useReducer은 상태를 관리하고 업데이트하는 훅인 useState를 대체할 수 있는 함수이다. - 한 컴포넌트 내에서 State를 업데이트하는 로직 부분을 그 컴포넌트로부터 분리시키는 것이 가능하여 코드의 최적화 할 수 있다. 기본형 const [state, dispatch] = useReducer(reducer, initialState); state : 현재 상태 dispatch : action을 발생시키는 함수 reducer : state와 action를 받아 새로운 state를 반환하는 함수 initialState : 초기값 같은 로직을 각각 useState훅과 useReducer를 사용하여 비교해보는게 이해가 빠르다. App.js import Counte..
-
컴포넌트(3) 리액트 훅(react hook)사용 - useStateReact 리액트 2023. 9. 5. 16:37
리액트 훅 (react hook) 이란? - 리액트의 훅은 16.8 버전부터 새로 추가된 기능이다. Hook은 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 [연동(hook into)]할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않으며, 대신 class 없이 React를 사용할 수 있게 해준다. state란? - 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용하고 동적인 값을 상태(state)라고 부른다. useState란? - 리액트의 훅중 하나이며 현재의 state 값과 state 값을 업데이트하는 함수를 반환하는 함수다. 일반적으로 함수 내의 변수는 함수가 종료되면 사라지지만, useState 를 사용해 변수의 ..