IT Development Challenge

* Immer ? --> 리액트에서 객체나 배열을 업데이트 할 시, 대상에 직접적으로 수정하는 코드는 불변성을 위배하는 행위이다. 스프레드 연산자를 활용하여 새로운 대상생성 및 기존데이터 복사 후, 업데이트하는 방식이 불변성을 지키는 것 입니다. 객체(Object) 객체대상.속성 = 값 (불변성X) Spread연산자 사용 (불변성O) 배열(Array) push, splice사용 (불변성X) Spread연산자, (concat, filter, map)사용 (불변성O) Immer 라이브러리 사용 시 불변성에 관하여 고려하지 않고 작성하여도, "불변성이 유지"된다. (즉, 변화가 일어날 시 기존의 데이터는 유지하며 새로운 데이터를 만든다) * Immer 구조 ? const Immer수행결과 = Immer(tar..

작성중..

* contextAPI (createContext, useContext) ? --> 리액트 컴포넌트가 구조적으로 복잡할 경우 최상위 컴포넌트로 부터 전달되는 속성(Props)이 최 하위 컴포넌트에게 최종적으로 전달되기 까지 중간컴포넌트들을 거쳐 연속적인 전달과정이 발생된다. contextAPI는 사용할 속성(Props)을 저장하며 모든컴포넌트에서 전역적인 접근이 가능하다 또한, 외부에서 contextAPI를 선언하여 활용가능하다. * contextAPI 사용 ? const 컨텍스트명 = createContext('기본 값'); --> createContext() 함수를 사용하여 컨텍스트를 생성한다. 함수 내부에 파라미터로써 기본값을 설정할 수 있다. 기본값이란, 태그를 활용하지 않았을 경우 지정되는 값이..

* 커스텀 훅(Custom Hook) ? --> 컴포넌트에서는 반복적으로 사용하는 로직들이 발생할 수 있다. 커스텀 훅(Custom Hook)은 React에서 기본 제공되는 Hooks(useSatae, useReducer, useCallBack..)를 활용하여 여러가지 기능들을 구현하며, 해당 구현된 기능들을 외부 컴포넌트에 제공하는 역할을 한다. * 커스텀 훅을 만들시 "Prefix('use') + 구현대상" 으로 네이밍을 하는것이 관례.. CustomHook Exercise.. 1. useInputs 생성 (커스텀 훅_ustState) CASE(1) : useState활용.. CASE(2) : useReducer활용.. * 커스텀 훅(useInputs) 내부에 3가지 구현요소 (inputs, onCh..

* useState vs useReducer ? --> 컴포넌트에서 사용하는 상태 값을 관리할시, useState 또는 useReducer를 활용할 수 있다. 컴포넌트에서 관리하는 상태값이 (String, Number, Boolean)과 같은 단순한 형태일 시 useState를 활용하는 것이 관리적인 면에서 효율적이며 컴포넌트에서 관리하는 상태값이 복잡한 형태로 되어있을 시 useReducer를 사용하는 것이 효율적이다. useReducer는 reducer() 함수내부에서 복잡한 여러 상태 값에 관하여 다중처리 가능하다. Cf). function reducer(state, action) { switch(action.type) { case 'ACTION1': return { setGoodLi.. // 상태..

* useReducer ? --> 컴포넌트에서 사용하는 상태 값을 관리할시, useState를 대신하여 useReducer를 활용 할 수 있다. useReduce는 Action객체를 기반으로 상태 값을 관리한다. Action객체는 상태값을 업데이트 할 시 참조하는 객체이며 Action객체가 가지고있는 type속성에 따라 어떤 업데이트 행위를 진행할 것 인지 명시할 수 있다. 이외, 업데이트 진행시 필요한 속성을 추가적으로 Action객체에 선언 및 활용이 가능하다. * useReducer 구조 ? useReducer("리듀서 함수", "초기 값"); --> 배열 Return ["현재상태", "액션발생함수"] const [state, dispatch] = useReducer('리듀서 함수', '초기 값')..

* useCallBack ? 이전에 선언한 함수에 관하여 재 사용하는 목적을 가지고있다. 컴포넌트가 리 렌더링 될 때, 새로운 함수를 만들지 않으며 기존함수를 재 사용한다. 하위 컴포넌트에 프롭스(Props)로 전달된 함수가 바뀌지 않았다면 가상돔(Virtual Dom)에 리 렌더링 되지 않고 이전에 만들었던 결과물을 재 활용한다, 최종적으로 애플리케이션 뷰 최적화 및 성능향상에 목적을 두고 있다. * useCallBack 구조 첫번째요소: 구현 함수내용. 두번째요소: 첫번째 함수 내 에서 사용되는, 의존요소(Dependency)들에 관한, 선언 부 이다. - 배열로선언 [ props, state... ] * React.Memo ? 컴포넌트에서 리 렌더링이 불 필요할 때 이전, 렌더링한 결과를 재 활용하..

* useMemo ? --> 이전에 연산된 값을 재 사용하는 목적을가지고있다. 특정 대상이 변화하였을 때, 특정연산을(Callback Function) 처리하도록 실행. 특정연산 수행 시, 대상 값이 바뀌지 않았다면 이전에 연산된 값을 재사용한다. * useMemo 의 2가지 요소 첫번째요소: 익명 CallBack함수로 선언되며 useMemo로 인하여 수행될 영역선언. - (params) => { function Execute Body.. } 두번째요소: 첫번째 콜백함수, 의존요소 선언 부 이다. 이 대상이 변할시에만 첫번째 콜백함수 호출된다. - 의존요소들.. 배열로선언 [ props, state ] useMemo 연습하기 1. App.js 컴포넌트 수정 Step1. react로 부터 useMemo 함..

* useEffect ? --> 리액트 컴포넌트가 처음 화면에 나타나게 될때(Mount), 화면에서 사라지게 될때(Unmount) 컴포넌트의 프롭스(Props), 상태(State) 가 업데이트 된 이후, 업데이트 되기 전 또는 컴포넌트가 리 렌더링 될 때 마다 어떤 특정한 작업을 수행하기 위해, Hooks문법인 useEffect를 사용할 수 있습니다. * useEffect 의 2가지 요소 첫번째요소: useEffect가 발생될때, 수행하는 익명 CallBack함수 - (params) => { function Execute.. } 두번째요소: 첫번째 콜백함수 내부에서 참조하고 있는 요소 ( Props, State, Function )등.. - 배열로선언 [ props, state, function ] * ..

* 배열(Array) ? 여러 값(문자, 숫자, Boolean, Object 등..) 들이 순서를 가지며 나열되어있는 집합요소 * React에서 배열(조회, 수정, 삭제) 에 관하여 Exercise.. 1. GoodsList.js 컴포넌트 생성 (* 상품목록 렌더링) * GoodList 함수형컴포넌트는 상위 컴포넌트 App.js로 부터 (goodLi: "상품목록", onRemove: "상품삭제처리 함수", onToggle: "상품상태변화 함수") 3가지의 Props를 전달 받는다. * GoodList 에서 Props로 전달받은 상품목록을 배열 내장함수(map) 을 활용하여, Goods(하위 컴포넌트) 반복호출.. * Goods(하위 컴포넌트)에서 상위 컴포넌트 GoodList 로부터 전달받은 Props로..