Page Routing? Router : 데이터의 경로를 실시간으로 지정해주는 역할 Routing : 데이터 경로를 정해주는 행위와 그 일련의 과정을 포함 그럼 페이지 라우팅이란? - 브라우저를 통해 웹서버에게 경로를 요청하고 그 경로를 전달받아 경로에 알맞는 웹 문서를 출력하는 행위 MPA(Multipage Application) 방식 여러개의 페이지를 준비해뒀다가 경로에 따라 적절히 보내주는 방식 전통적인 방식은 페이지 요청시마다 새로운 페이지를 웹서버에게 요청하고 전달받을 때마다 새로고침처럼 깜빡이며 움직인다. 그러나 리액트는 MPA방식이 아니다 SPA(Single Page Application) 단일 페이지 어플리케이션 반환하는 페이지가 똑같다. 리액트로 제작한 웹사이트 같은경우 어떤 요청을 하던..

contextAPI를 다룰것이다 전달만 하는 비효율적인 props (프롭스드릴링)의 문제점을 해결할 것이다 모든 데이터를 가진 component가 provider 컴포넌트에게 모든 데이터를 준다. 그리고 공급자인 provider 컴포넌트가 자신의 자손에 해당하는 모든 컴포넌트들에게 직접적으로 제공한다 그리고 provider의 자식 컴포넌트들은 이 provider컴포넌트에게 직접적으로 제공받는다 이렇게하면 코드의 가독성도 올라가고 프롭스 드릴링도 사라지게 된다. Context; 문맥 이렇게 공급자 컴포넌트의 자식 노드; 자식 컴포넌트들로 해당 provider 컴포넌트가 공급하는 모든 데이터에 접근할 수 있는 컴포넌트들의 영역 Context생성과 Provider를 이용해 프롭스 드릴링 제거 일기 data s..

JSON.stringify() - 자바스크립트 객체를 JSON 문자열로 변환할 때 사용하는 메소드 const data = [{ name: '혼자 공부하는 파이썬', price: 18000, publisher: '한빛미디어' }, { name: 'HTML5 웹 프로그래밍 입문', price: 26000, publisher: '한빛아카데미' }]; console.log(JSON.stringify(data)); console.log(JSON.stringify(data, null, 2)); JSON.parse() 메소드 JSON 문자열을 자바스크립트 객체로 전개 => 매개변수에 JSON 형식의 문자열을 넣어주면 됩니다. const dataParse = [{ name: '혼자 공부하는 파이썬', price: 18..

//타이머걸기 setTimeout(() => { console.log('1초 후에 실행됩니다'); }, 1*1000) let count = 0 setInterval(() => { console.log(`1초마다 실행됩니다(${count}번째)`); count++; }, 1*1000) setInterval, setTimeout //타이머종료 let id; let countTimer = 0; id = setInterval(() => { console.log(`1초마다 실행됩니다(${count}번째)`); count++ }, 1*1000) setTimeout(() => { console.log('타이머를 종료합니다.') clearInterval(id) }, 5*1000)

컴포넌트 코드가 길어지고 무거워지고 있다. 복잡하고 긴 컴포넌트 코드를 useReducer를 사용해서 상태변화 로직을 분리할 것이다 useReducer 위에있던 무거운 컴포넌트를 reducer를 사용해서 분리시킨다. useState때처럼 배열을 반환하게되고 Counter를 비구조화 할당을 한다. Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 공식문서에서도 useState 의 대체함수라고 설명되어있다 첫번째 반환인 0번째 인덱스 count 는 state 두번째 반환인 1번째 인덱스 dispatch는 상태를 변화시키는 액션을 발생시키는 함수 useReducer 함수는 꼭 reducer를 전..