728x90 분류 전체보기107 [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 - tilde( ~ ), double tilde( ~~ ) 서론 알고리즘 문제를 풀면서 신기한 연산자를 봤습니다. 물결을 두 번 써서 알고리즘 문제를 풀으셨길래 궁금해서 찾아보니 double tilde 연산자가 검색되었습니다. 블로그 정리하면서 천천히 공부해 보려고 합니다. tilde( ~ ) 연산자 우선 tilde( ~ ) 연산자는 비트 연산자이며 NOT의 기능을 한다고 합니다. 비트(bit) 단위로 논리 연산을 수행하기 때문에 비트가 1이면 0으로, 0이면 1로 반전시킵니다. const a = 5; // 0000000000000101 console.log(~a); // 1111111111111010 // -6 const b = -3; // 1111111111111101 console.log(~b); // 0000000000000010 // 2 위의 식을 예로.. 2022. 12. 12. [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. 이전 1 ··· 7 8 9 10 11 12 13 ··· 18 다음 728x90
