Redux 전역 상태 값은 전역 변수처럼 동작하나?Vanilla JavaScript, React, Redux등으로 프론트엔드 개발을 진행하면서 전역(Global), 지역(Local) 상태 관리에 대한 이해가 부족하였습니다.Vanilla JavaScript일 때 상태를 변화 시 DOM -> CSSOM -> Render Tree -> Layout -> Painting,React일 때 상태 변화 시 Virtual DOM 생성 -> 비교 -> 실제 DOM에 적용 (테스크 큐 비어있을 때 실행),전역 / 지역 상태 변화할 때 적절한 위치에서 상태 변화를 주지 않아 다음과 같은 과정을 겪지 않아도 될 곳에서도 다음과 같은 과정을 겪어 비효율적인 프로그램이 되고 있었습니다.또한 면접을 보면서 관련 내용에 대해 정확히..
> create-react-app facebook에서 만든 지속적으로 업데이트 되는 공식적인 react 웹 개발용 boilerplate 입니다. > 실행 1. npm 설치, nodejs 설치 다운로드 site https://nodejs.org/ko/download/ 설명 site https://hello-bryan.tistory.com/95 2. create-react-app 설치 https://github.com/facebook/create-react-app 다음 page에 가면 잘 알 수 있습니다. $ npx create-react-app [폴더 이름] -g : 전역 모드(즉, 명령 과 함께 -g또는 --global명령에 추가됨)에서는 현재 패키지 컨텍스트(즉, 현재 작업 디렉토리)를 전역 패키지로 ..
> *.preventDefault() event(*)의 기본적인 동작 방법을 못하게 할 때 사용 ... bind() 함수내의 this를 설정해줍니다. 여러개의 인자를 사용할 수 있다. bind()의 2번째 3번째 인자는 해당 함수의 첫번째(bind-2번째), 두번째(bind-3번째)로 들어간다. //obj객체를 test()안으로 주입을 해줍니다. var obj = {name: 'gpaeng'}; function test(num1, num2) { console.log(this.name); }.bind(obj, 1, 2); // 1 => num1 // 2 => num2 > onChangePage Component event만들기 onChangePage에 함수를 설치하면 event가 발생 되었을 때 props..
react-router-dom https://reactrouter.com/web/api/Link/to-object react-router : react의 화면 전환을 도와주는 역할 일반적인 웹에서는 을 이용해서 이동했다면 react에서는 (링크 형식으로 나옵니다)을 이용해서 이동한다. 설명 index.html의 id=root부분을 채워 넣기 위해 index.js로 App.js를 연결 해줍니다. App.js 에서 react-router-dom을 사용해서 홈페이지 이동이 잘 되게 해줍니다. Navigation.js는 react-router의 Link태그가 있는 부분입니다. index.js index.html 의 id=root부분에 App.js가 실행 되게 해줍니다. Navigation.js => \ 으로 이..
> React HTML의 class -> className react는 자동적으로 나의 class component의 render method를 실행 한다. react는 state를 refresh하고 render function을 호출한다 > State https://smilejh.tistory.com/90 [React] 3. Component의 Props 와 State 1. Component의 props 와 state 리액트 컴포넌트에서 다루는 데이터는 props와 state로 나뉜다. props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 값이다 (-> 부모 컴포넌트에서 자식 컴포넌트로 전달하 smilejh.tistory.com 동적 데이터와 함께 작업할 때 만들어져 변하는 데이터, 존재하지 않는 데..