리액트 React/Hooks (7) 썸네일형 리스트형 리액트 훅스 Hooks 7: 커스텀 훅 여러 컴포넌트에서 비슷한 기능을 공유할 경우 커스텀 훅을 이용하여 로직을 분할할 수 있습니다. 적절히 사용하면 컴포넌트를 깔끔하게 만들고 매인 로직에만 집중 할 수 있습니다. 기존 Info.js import React, { useReducer } from "react"; function reducer(state, action) { return { ...state, [action.name]: action.value }; } const Info = () => { const [state, dispatch] = useReducer(reducer, { email:'', password:'' }); const {email, password} = state; const onChange = e => { dispatch.. 리액트 훅스 Hooks 6: useRef useRef Hook은 함수형 컴포넌트에서 ref를 쉽게 사용 할 수 있도록 해줍니다. 기본적으로 current속성을 가지고 있는 객체를 반환하고 이 객체는 컴포넌트의 전 라이프사이클을 통해 유지됩니다. useRef로 focus 예시 import React, { useMemo, useState, useCallback, useRef } from "react"; const getMultiply = (numbers) => { console.log("calculating"); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a * b); return sum; }; const Multiply = () => { const [list,.. 리액트 훅스 Hooks 5: useCallback useMemo와 비슷한 useCallback은 메모이제이션된 콜백을 반환하고 렌더링 선능을 최적화해야 할때 사용됩니다. 전편에서 구현한 곱셈 컴포넌트에서 onChange와 onClick 함수를 선언해 주었는데 이러면 컴포넌트가 리렌더링 될때마다 새로 만들어진 함수를 사용하게 됩니다. Multiply.js import React, {useMemo, useState} from 'react'; const getMultiply = numbers => { console.log("calculating"); if(numbers.length === 0) return 0; const sum = numbers.reduce((a,b)=> a*b); return sum; }; const Multiply = () => { co.. 리액트 훅스 Hooks 4: useMemo 메모이제이션된 값을 반환합니다. 메모이제이션이란 간단히 연산의 결과값을 저장해놓고 동일한 입력이 들어오면 그 값을 가져오는 것입니다. 곱셈 컴포넌트 import React, {useMemo, useState} from 'react'; const getMultiply = numbers => { console.log("calculating"); if(numbers.length === 0) return 0; const sum = numbers.reduce((a,b)=> a*b); return sum; }; const Multiply = () => { const [list, setList] = useState([]); const [number, setNumber] = useState(''); const onCh.. 리액트 훅스 Hooks 3: useReducer useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 상태를 다른 값으로 업데이트 해 주고 싶을 대 사용하는 Hook입니다. 리덕스를 사용해 보셨다면 이해하기 쉽습니다. 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새로운 상태를 반환하는 함수입니다. 리듀서 함수에서 새로운 상태를 만들때는 반드시 불변성을 지켜 주어야 합니다. useReducer로 카운터 구현예시 import React, { useReducer } from "react"; function reducer(state, action) { switch (action.type) { case "INCREMENT": return { value: state.value + 1 }; case "DEC.. 리액트 훅스 Hooks 2: useEffect useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다. 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 볼 수 있습니다. 컴포넌트 생명주기 useEffect를 이용한 예시 import React, { useState, useEffect } from 'react'; const Info = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); useEffect(() => { console.log({email, password}); }); const onChangeEmail = e => { .. 리액트 훅스 Hooks 1: useState Hooks는 리액트 16.8버전 부터 새로 도입되어 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect등의 기능을 제공합니다. useState는 가장 기본적인 hook이고 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줍니다. useState를 이용한 카운터 예시 import React, { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 setValue(value - 1)}>-1 ); }; export default Counter; .. 이전 1 다음
