고코몽의 프론트엔드 저장소 고코몽의 프론트엔드 저장소

React/Hooks

• react - Additional Hooks(1) : useReducer

  React/Hooks 2021. 6. 7. 22:12

  useReducer useState의 확장판 다수의 하위값을 포함하는 복잡한 정적 로직을 만드는 경우 다음 state가 이전 state에 의존적인 경우 Redux를 안다면 쉽게 사용 가능 import { useReducer } from 'react'; // reducer => state를 변경하는 로직이 담겨 있는 함수 // state: 이전 state 값 // action: 객체이고 필수 프로퍼티로 type을 가진다. const reducer = (state, action) => { if (action.type === 'PLUS') { return { count: state.count + 1, }; } return state; }; export default function UseRecuderExamp..

  Read More
• React - Basic Hooks

  React/Hooks 2021. 6. 7. 00:47

  useState state를 대체 useState를 사용할 때 상태의 기본값을 파라미터로 넣어서 호출 함수를 호출하면 배열이 반환 첫번째 요소는 현재 상태, 두번째 요소는 Setter 함수 import React, { useState } from 'react'; export default function Example() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}>Click me ); } useEffect LifeCycle 대체 componentDidMount / componentDidUpdate / componentWillUnmount useEffect 첫번째 매개변수 렌더..

  Read More