ENN

Redux #Redux의 동작 구조 store : 정보가 저장되는 곳 state : 실제 정보가 저장되는 곳. 직접적인 접근이 불가능하다. reducer : 현재 state값과 action을 인자로 받아서 새로운 state를 리턴하는 가공자이다. dispatch : reducer를 호출해서 state값을 변경한 뒤, subscribe을 이용해 render한다. subscribe : render함수를 등록해놓으면 state가 바뀔 때마다 render함수가 실행된다. getState render : getState를 통해 state를 가져와 ui를 만든다. action : dispatch에게 전달된다. #Redux를 쓰면 좋은 이유 중앙집중적 데이터 관리 하나의 부품이 변경되었을 때, 중앙의 redux가 나..

Hook이란? - Hook: React 버전 16.8부터 리액트 요소로 새로 추가되었으며, 기존 class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 리액트의 기능을 사용할 수 있게 해주는 요소 - 훅이 존재하기 이전에는 상태 관련 로직이 하나로 묶이기 때문에 상태 로직을 재사용하는 것이 어려웠다. 여기에 훅을 도입하면서 상태 로직을 추상화하여 재사용이 가능하게 한다. - Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 통해 컴포넌트 재사용이 가능하다. 리액트 내장 훅 API 1. useState() import React, {useState} from 'react'; const [state, setState] = useState(initialState); - ..

1. react-router - 해당되는 URL에 따라 페이지를 이동하는 것을 Routing이라고 함. - React-Router는 리액트의 네비게이션 라이브러리로 사용됨. react-router-dom라이브러리 1) Link - to ="URL"을 통해서 이동경로를 지정해줌. Home 2) Router - Route와 Link컴포넌트를 유기적으로 묶어주며, route와 link 컴포넌트는 항상 router를 상위 컴포넌트로 가져야함 실제로 라우팅 구현 - 컴포넌트는 여러개의 Route를 감싸고, 그 중 규칙이 일치하는 Route를 렌더링 시켜줌. -는 path="", element 에는 컴포넌트를 넣어줌.

npm npm install node package manager 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자 npx execute npm package binaries - npm에 속해 있는 npm 패키지 실행도구 - npm과의 차이점: npx는 해당 패키지를 실행만 되게 해주는 패키지 실행 도구로 패키지를 다운받지않고 실행만 할 수 있게 한다. yarn - 패키지 설치 속도가 빠르며, 패키지 설치과정에서 패키지가 code를 run하지 않도록 하여 보안상 안전하다. - 또한 package.json에 의존하는 두개의 서로 다른 환경이 서로 다른 버전의 패키지 의존성을 가지는 것을 방지하기 위해 yarn.lock파일을 사용한다.