728x90 분류 전체보기104 [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. [React] Redux(2) [payload] Payload란? 이전에 Redux를 이용해 counter를 만들었습니다. 그때는 정해진 숫자만 더하고 빼기만 했었는데 이번에는 임의의 값을 넣어 더하고 빼는 counter를 만들어 보려고 합니다. 이때 임의의 값이라는 목적어가 생기게 되고 그 목적어도 액션객체에 담아 같이 보내줘야 합니다. 이렇게 액션객체에 같이 담아 보내주는 것을 Payload라고 합니다. export const addNumber = (payload) => { return { type: ADD_NUMBER, payload, }; }; ⭐반드시 payload라는 이름을 통해서 보내야 하나요? 리덕스는 굉장히 유연한 라이브러리이기 때문에 많은 것들이 “표준화”되어 있지 않습니다. 때문에 자신만의 방식으로 프로그래밍 할 수 있는 유연성을 .. 2022. 12. 14. [React] Redux(1) [count 만들기] Redux란? 리덕스는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리중 하나이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다. 최근 Redux Toolkit이 등장하면서 더욱 더 이 효율성은 빛을 보이고 있다. Redux 기본 키워드 1. 액션( Action ) 상태에 어떠한 변화가 필요하게 도리 때, 액션이란 것을 발생시켭니다. 액션은 객체로 표현되며 type필드를 반드시 가지고 있어야 합니다. { type : "PLUS_ONE" } 2. 액션 생성함수( Action Creator ) 액션 생성함수는, 액션을 만드는 함수입니다. 액션 생성함수를 만들어서 사용하는 이뉴는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함입니다. 그래서.. 2022. 12. 13. 이전 1 ··· 6 7 8 9 10 11 12 ··· 18 다음 728x90
