728x90 내일배움단40 [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. [TIL] JavaScript - This (bind, call, apply) call call()은 이미 할당되어있는 다른 객체의 함수/메소드를 호출하는 해당 객체에 재할당할때 사용됩니다. this는 현재 객체(호출하는 객체)를 참조합니다. 메소드를 한번 작성하면 새 객체를 위한 메소드를 재작성할 필요 없이 call()을 이용해 다른 객체에 상속할 수 있습니다. 구문 func.call(thisArg[, arg1[, arg2[, ...]]]) thisArg : func 호출에 제공되는 this 의 값입니다. 예제 const pokemon = { firstName: "Pika", lastName: "Chu", getPokemonName: function () { const fullName = this.firstName + " " + this.lastName; return fullNa.. 2022. 12. 7. [TIL] JavaScript - This This란? 다른 객체지향 언어에서는 this는 곳 클래스로 생성한 인스턴스를 말합니다. 하지만 JavaScript에서 함수의 this 키워드는 다른 언어들과 비교하여 조금 다르게 this는 어디에서나 사용될 수 있습니다. 대부분의 경우, this의 값은 함수를 호출하는 방법에 의해 결정됩니다. 실행하는 동안의 할당에 의해 설정될 수 없고, 함수가 호출될 때마다 다를 수 있습니다. this의 이해 this가 어떤 값과 연결되는 지는 this의 바인딩을 통해서 확인해 볼 수 있습니다. 바인딩이란, this의 호출 방식에 따라서 this가 특정 '객체'에 연결되는 것입니다. this의 바인딩은 일반 함수 내부, 메서드 내부, 생성자 함수 내부, Call, Apply, Bind를 통한 '호출 방식'으로 나눠서.. 2022. 12. 6. [WIL] 새로운 시작... 서론 프로젝트가 끝나고 새로운 조 배정을 받았습니다. 새로운 조에서 새로운 사람들과 본격적으로 리액트를 배우게 되는 것이지요!! 새로운 조장님이 엄청 계획적이신 분이여서 자신이 부족하다고 생각하는 팀원들과 같이 공부도 해주시며 커리큘럼도 짜주셨답니다. 제 2의 매니저님이 계신 느낌 하하하... 본론 지난 주는 하루종일 알고리즘 문제와 클론 코딩, 그리고 내일배움단에서 제공해 주신 강의를 들으면서 시간을 보냈습니다. 모던 자바스크립트를 읽으며 자바스크립트에 기본적인 개념을 공부하였고, DOM, SPA등 웹개발에 필요한 개념들을 강의해 주셨습니다. 또한 개인적으로 알고리즘 문제를 풀면서 이해가 안가는 부분들을 찾아서 블로그에 정리하고, 리액트 클론코딩으로 미리 예습을 했습니다. 마치며... 지난 주는 사실 .. 2022. 12. 5. 이전 1 2 3 4 5 ··· 7 다음 728x90
