Web Tech/react (21) 썸네일형 리스트형 react 기본 - 18.Context API 로 전역 값 관리 Context API 여러개의 컴포넌트를 거쳐서 전달할 때 사용하면 복잡한 구조를 해결 할 수 있습니다. Context 기본문법 // 내보내주기 export const UserDispatch = React.createContext(null); // 사용때 불러오기 import { UserDispatch } from './App'; // createContext의 파라미터에 Context의 기본값을 설정할 수 있으며, // 값을 따로 지정하지 않을 경우 사용되는 기본 값 const UserDispatch = React.createContext(null); // Context를 생성하면, Context 안에 Provider라는 컴포넌트가 들어가있음 // 이 컴포넌트를 통하여 Context의 값을 정할 수 있.. react 기본 - 17.커스텀 Hooks 커스텀 Hooks 반복되는 로직을 커스텀 Hooks 를 만들어서 로직을 쉽게 재사용하는 방법입니다. 보통 use라는 키워로 시작하는 파일을 만들고 그 안에 함수로 작성하여, 그 안에서 useState, useEffect, useReducer, useCallback 등 Hooks을 사용해서 원하는 기능 구현 후 컴포넌트에서 사용하고 싶은 값 반환하면 됩니다. useInputs.js import {useState, useCallback} from 'react'; function useInputs(initialForm) { const [form, setForm] = useState(initialForm); const onChage = useCallback(e => { const {name, value} = e.. react 기본 - 16.useReducer useReducer 사용자 리스트 기능에서의 주요 상태 업데이트 및 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 컴포넌트에서 관리하는 값이 여러개가 되어 상태의 구조가 복잡하다면 useReducer 사용, 컴포넌트에서 관리하는 값이 하나고 단순한 숫자 또는 문자열이라면 useSate로 관리 reducer 기본 문법 reducer 에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 되며, action은 업데이트를 위한 정보를 가지고 있습니다. type 값을 지닌 객체 형태로 사용하지만, 꼭 따라야 할 규칙은 없음 // 현재 상태와 액션 객체를 파라미터로 받아서 새로운 상태를 반환해주는 함수 function reducer(state, action) { // 새로운 상태를 만드는 로.. react 기본 - 15.React.memo React.memo props가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줍니다. 클릭 및 체인지 같은 이벤트 함수들은 useCallback으로 재사용 해도 리렌더링을 막을 수 없습니다. CreateUser.js import React from 'react'; function CreateUser({username, email, onChange, onCreate}) { return ( 등록 ) } // 내보낼 컴포넌트 React.memo로 감싸기 export default React.memo(CreateUser); App.js import React, {useRef, useState, useMemo, useCallback} from 'react'; import Inner f.. react 기본 - 14.useCallback useCallback 특정 함수를 새로 만들지 않고 재사용하는 React Hook 함수 안에서 사용하는 상태 혹은 props 가 있다면 deps 배열안에 포함시켜야 함수 내에서 해당 값들을 참조할때 가장 최신 값을 참조함 App.js // useCallback Hook 설정 import React, {useRef, useState, useMemo, useCallback} from 'react'; import Inner from "./Inner"; import UserList from "./UserList"; import CreateUser from "./CreateUser"; function countActiveUsers(users) { console.log('활성 사용자 수를 세는중') return u.. react 기본 - 13.useMemo useMemo 컴포넌트가 업데이트 되고 렌더링 될 때, 업데이트가 필요없는 불필요한 컴포넌트까지 같이 리렌더링 되는 경우가 있다. 이를 방지하기 위해 react Hook 중 useMemo를 사용하며, 연산된 값을 렌더링 시 재 사용할 때 쓰인다. 기본형태 useMemo(function, deps) > function : 어떻게 연산할 지 정의하는 함수 > deps : 검사할 특정 값을 담은 배열 **배열 안의 값이 바뀌면 함수를 호출해서 연산하고, 값이 바뀌지 않으면 이전에 연산한 값을 재사용** App.js import React, {useRef, useState, useMemo} from 'react'; import Inner from "./Inner"; import UserList from "./U.. react 기본 - 13.useEffect useEffect react Hook 중 useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있게 합니다. 마운트 될 때(처음 나타났을때), 언마운트 됐을 때(사라질때), 업데이트 될 때(특정 props가 바뀔 때) 특정 작업을 처리할 수 있습니다. 기본형태 useEffect(function, deps) > function : 수행하고자 하는 작업 > deps : 배열 형태, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 **deps 를 생략한다면 렌더링 될 때 마다 실행됨** 1. 마운트 될 때 컴포넌트가 처음 나타날때에만 useEffect에 등록한 함수가 호출됩니다. > props 로 받은 값을 컴포넌트의 로컬 상태로 설정 > 외부 API 요청 > 라이브러리 사용 > setI.. react 기본 - 12.배열 항목 수정 배열 항목 수정 App.js import React, {useRef, useState} from 'react'; import Inner from "./Inner"; import UserList from "./UserList"; import CreateUser from "./CreateUser"; function App() { const [inputs, setInputs] = useState({ usersname: '', email: '' }); const {username, email} = inputs; const onChange = e => { const {name,value} = e.target; setInputs({ ...inputs, [name]: value }); } //활성화 구분을 activ.. 이전 1 2 3 다음
