728x90 분류 전체보기106 [React] Hooks : optimizing 성능 최적화(2) - useMemo useMemo란? useMemo는 컴포넌트의 성능을 처적화시킬 수 있는 대표적인 react hooks 중 하나입니다. useMemo에서 Memo는 Memoizaion을 뜻합니다. Memoization이란 기존에 수향하 연산의 결과값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법입니다. 🔥기억하기!! 컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여 실행되는 것을 뜻합니다. 심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게 받은 props가 변경되지 않았더라도 리렌더링 됩니다. 컴포넌트는 자신의 state가 변경되거나, 부모에게서 받은 props가 변경될 때마다 리렌더링 됩니다. 심지어 하위 컴포넌트에 최적화 설정을 하지 않으면 부모에게 받는 pro.. 2022. 12. 22. [React] Hooks : optimizing 성능 최적화(1) - React.memo( ) React.memo( )란? 우선 memo( )는 훅이 아닙니다. 하지만 뒤에 공부할 useCallback이나 useMemo를 사용하기 위해서는 반드시 알아야 하는 개념입니다. React.memo( )는 Memorization(메모제이션) 기법으로 동작하며, 고차 컴포넌트(Higher Order Component, HOC)입니다. 컴포넌트가 props로 동일한 결과를 렌더링 하면, React.memo를 호출하고 결과를 Memoizaing(메모이징)하도록 래핑 하여 경우에 따라 성능 향상을 할 수 있습니다. 💥쉽게말해 화면에서 변경되는 부분이 없음에도 불구하고 아래의 이유로 화면이 다시 렌더링 될 때, 그 불필요한 렌더링을 줄이는 것으로 리액트 프로젝트의 부하를 줄이고 퍼포먼스를 향상시킬 수 있다는 뜻입니.. 2022. 12. 20. [React] Redux(3) [Redux Toolkit] Redux Toolkit이란? Redux Toolkit은 우리가 이전에 배운 Redux를 개량한 것으로 생각하면 됩니다. Redux를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 생기기 시작했고, Redux 팀에서 이것을 수용하여 코드는 적게, 그리고 Redux를 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 Redux Toolkit입니다. 줄여서 RTK라고도 합니다. ⭐그래서 Redux와 Redux Toolkit은 전혀 다른가? ▶ Redux Toolkit은 우리가 배웠던 Redux와 구조나 패러다임이 모두 똑같습니다. 즉 새로운 것이 아닙니다. 리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고 우리가 일일이 손으로 만들어 줘야 했던.. 2022. 12. 20. [WIL] React 시작!! 서론 본격적으로 react를 시작하면서 전에 사용하지 않았던 redux도 사용해보고 redux를 이용한 새로운 Todo List도 작성해 보았습니다. redux가 확실히 편하긴 한 것 같지만 아직 이해가 되지 않아서 좀 더 공부를 해야 할 것 같습니다. Todo List TIL을 작성하면서 redux에 대해서 다뤘었는데 이전에 props를 이용한 Todo list와는 달리 redux만 사용해서 하려고 하니까 많이 헤맸던 것 같습니다. 그래도 동기들에게 도움을 받으며 같이 프로그래밍을 하다보니 이해가 안 갔던 부분도 이해가 가고 동기들의 새로운 접근법들도 서로 공유하며 많은 것을 배운 것 같습니다. 이전에 vercel로 배포하는 방법을 배워 Todo List를 배포를 해 보았습니다. Todo List로 가.. 2022. 12. 19. [CS] 애자일(Agile) 방법론 Top-Down / Water Fall 일 처리 프로세스 리더가 전략을 수립하면 조직원들은 전략 달성을 위해 맡겨진 업무를 리더의 통제하에 수행합니다. 리더는 전약의 예측도를 높이기 위해 조사와 분석에 많은 시간을 할애합니다. 조직원들은 계획대로 과업 일정을 준수합니다. 실행의 속도가 늦다. 중간에 계획을 변경하기 어렵다. 전략 실행 과정에서 위험이 감지되더라도 조직원들은 이를 묵인한 체 계획 고수에 초점을 두는 경향이 있다. ⭐ Top-Down / Water Fall 일 처리 프로세스가 나쁜 것은 아닙니다. 변함이 적고, 확실한 업무에서는 효과적입니다! 문제점을 해결하기 위한 방법( 애자일 ) 1. 불확실에 대응하기 위한 애자일( Agile ) 애자일(Agile)의 사전적 의미는 '날렵한, 민첩한' 입.. 2022. 12. 16. [React] React-Router-Dom react-router-dom이란? react-router-dom이란 react의 화면 전환을 도와주는 역할을 합니다. 일반적인 웹에서 a태그를 이용해 다른 페이지로 이동했었다면, 리액트에서는 React-Router 를 통해 Link 태그를 사용하여 화면을 전환합니다. react는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로 페이지 이동 시 굳이 화면 전체를 새로고침 할 필요가 없기 때문입니다. React-Router-Dom 사용하기 1. 패키지 설치 yarn add react-router-dom 2. 페이지 컴포넌트 생성 우선 여러개의 페이지를 배우는 것을 배우는 것이니, 가상의 여러페이지 Home, About, Contact, Works 만듭니다. 3. Router.js 생성.. 2022. 12. 15. 이전 1 ··· 6 7 8 9 10 11 12 ··· 18 다음 728x90
