728x90 반응형 리액트15 포트폴리오01 - 타입스크립트로 리액트 프로젝트 시작 ( yarn ) 지난 작성글에서는 자바스크립트와 npx를 이용하였기 때문에 자바스크립트와 npm 패키지를 사용해야했는데 기존 프로젝트들을 타입스크립트와 yarn을 사용하고있었기에 프로젝트를 다시 만들었다. npm npx create-react-app my-app --template typescript yarn yarn create react-app my-app --template typescript 기존 프로젝트에 추가하는 경우에는 타입스크립트를 추가해주면된다. 기존 프로젝트에 아무것도 진행을 한 것이 없기 때문에 그냥 처음부터 다시 만들어봤다. npm npm install --save typescript @types/node @types/react @types/react-dom @types/jest yarn yarn .. 2022. 12. 5. 유데미 Modern React with Redux(2023) 구매 + 약간의 후기! 이제 할인 안하면 섭섭한 유데미 블프 세일을 또 하는구나 또 안사고 넘어갈 수 없지...지금 패스트캠퍼스에서 듣는 리액트 강의는 제법 예전 강의라 바뀐 부분들이 많아 강의대로 따라했을 때 안되는 경우가 많아 불편한 점이 많았다. 물론 잘 알려주셔서 잘 배우긴하고있었음 하지만 조금 리액트 강의에 목이 마르던 차에 유데미 할인을 시작해서 후기 제일 많고 최신 강의로 냅따 구매했다. 22000원에 64시간 강의라뇨 제가 감사할다름 영어로 진행되고 한국어 자막은 없지만 영어가 조금 약한 사람들도 들을 수 있을 거 같음..? 아니면 한국어로 번역된 다른 강의도 후기가 많으니 좋을 것 같다. 첫챕터를 다들었는데 우선 강의 스타일은 문법을 먼저 알려주는 것이 아닌 프로젝트를 진행하면서 프로젝트에서 사용한 문법을 알려.. 2022. 11. 26. 리액트 - immer immer: 불변성을 해치는 코드를 작성해도 대신 불변성을 유지해줌 immer library 설치가 필요함 필수라이브러리는 아니기때문에 적재적소에 사용하는 것이 중요하다. 무작정 사용하면 안됨 update 로직이 까다로운 경우에 사용하는 것이 좋음 간단한 경우에는 크게 의미가 없다. produce(바꾸고 싶은객체, 어떻게 바꿀지 알려주는 함수) import produce from 'immer' window.produce = produce const state = { number :1, dontChangeMe : 2 } const nextState = produce(state, draft =>{ draft.number = 2; } //불변성을 지키지 않으면서 변경해도 produce가 값을 지켜줌 //배열도.. 2022. 11. 3. 리액트 - Custom Hook Custom Hook 코드를 작성하다 보면 반복되는 로직을 재사용 해야하는 상황에서 custom hook 을 만들어서 관리 할 수 있다 input 값을 작성하는 경우에 여러 폼에서 그 로직이 반복될 수 있기 때문에 해당 커스텀 훅을 만들어서 사용 - 주로 input 값 작성, fetch 호출 시에 자주 사용된다 - 항상 use로 시작해야한다. //custom hook function useInputs(initialForm){//initialForm : form에서 사용할 초기값 const [ form, setForm] = useState(initialForm); const onChange = useCallback(e =>{ const {name, value} = e.target; setForm(form .. 2022. 10. 24. 리액트 - useReducer useReducer 액션이라는 객체를 이용해서 업데이트하는 상태 관리 hook 컴포넌트 밖으로 상태 업데이트 로직을 분리할 수 있음 보다 복잡한 로직처리가 가능! 리액트 문서에 따르면 이전 값이 다음 값에 종속되는 경우가 있으면 선호된다고 나온다 기존의 값이 있고 그 값이 업데이트 되는 경우라면 선호될 것으로 예상된다. const [state, dispatch] = useReducer(reducer, initialArg, init); const [현재상태, 액션을 발생시키는 함수] = userReducer(reducer, 초기값(기본값) ) reducer : 상태를 업데이트 하는 함수 import React, { useState, useReducer } from 'react'; function reduc.. 2022. 10. 22. 리액트 - useMemo, useCallback, React.memo 알아보기 useMemo useMemo(function(), deps):특정 값이 바뀔때만 특정 함수를 실행해서 연산을 실행 deps : dependecies로 해당 내용이 변경되면 값을 연산해주고 그렇지 않으면 캐싱된 값을 사용한다. 하단 코드는 액티브 유저를 카운트 하는 경우에만 해당 컴포넌트를 리렌더링 해야하는데 유저를 추가한다거나 다른 컴포넌트에서 동작을 하는 경우에도 해당 컴포넌트가 리렌더링이된다. 이 경우에는 해당 함수의 값이 바뀔 때만 함수를 실행시키고 싶으므로 useMemo를 사용하면 된다. import React, {useRef, useState, useEffect, useMemo, useCallback} from 'react' function countActiveUsers(users){ conso.. 2022. 10. 20. 이전 1 2 3 다음 728x90 반응형
