728x90 내일배움단40 [React] onClick 이벤트 발생 시 함수 실행하기 onClick 함수란? 사용자가 요소를 클릭했을 때 발생하는 이벤트입니다. 오류 발생 상황 컴포넌트가 렌더링 될 때 db에 있는 모든 자료들이 삭제가 되는 상황입니다. 코드 function CommentList() { const [comments, setComments] = useState(null); const fetchComments = async () => { const { data } = await axios.get("http://localhost:3001/comments"); setComments(data); }; const onDeleteComments = (id) => { dispatch(deleteComment(id)); axios.delete(`http://localhost:3001/co.. 2022. 12. 23. [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. 이전 1 2 3 4 ··· 7 다음 728x90
