리액트

function이라는 키워드 없이 =>를 이용해 함수를 생성하는 방법funtion 키워드를 생략하고 인자블록()과 본문블록{} 사이에 =>를 표기한다본문 블록이 결과값을 바로 반환하는 경우에는 중괄호를 생략가능하고 한줄에 표기할 수 있다.화살표함수를 이용해 위 함수를

ES6에서 class라는 문법이 추가되었고, 기존의 prototype 기반으로 클래스를 선언하는 것보다 명료하게 클래스를 선언할 수 있게 되었다.기존에는 prototype으로 클래스의 상속기능을 대체하였다 클래스안에 메소드를 선언하기위해서prototype 특수변수를 사

자바스크립트에 XML을 추가한 확장형 문법JSX를 이용하면 Javascript나 리액트가 제공하는 API로 개발하면 코드양이 많아질 수 있는 것을 보완하여 개발자가 쉽게 코드를 기술 할 수 있도록 한다.간혹 jsx문법에서 input태그를 안닫는 경우가 있는데 이럴 경우

React의 Component 객체에서 DOM 객체를 제어할 때에 위의 두 가지 개념을 이용해서, 부모 컴포넌트 객체의 데이터를 자식 컴포넌트에서 출력해주고, 출력해주는 부분을 수정할 수 있도록 만들어 줄 수 있다.Props는 property의 줄임말로, React에서

react 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었다. 그런데 react 16.8부터 hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.useState 함수를 통해 상태를 관리하는 방법을 알아볼 것이다.이

특정 DOM을 가리킬 때 사용하는 Hook 함수.리액트로 작업하다 보면 돔 요소에 직접 접근해야 할 때가 있다. 예를 들어, 돔 요소에 포커스를 주거나 돔 요소의 크기나 스크롤 위치를 알고 싶은 경우다. 이 때 ref 속성값을 이용하면 자식 요소에 직접 접근할 수 있다

useReducer란 useState 보다 더 다양한 컴포넌트 상황에서 더 다양한 상태를 다루고 싶을 때 사용하는 훅현재 상태, 그리고 업데이트를 위해 정보를 담은 액션(Action)의 값을 전달 받아 새로운 상태를 반환하는 함수이다.상태를 업데이트를 하는 방법중 하나

styled component는 js 파일 안에 직접 css 스타일을 적용 할 수 있는 모듈이다. yarn 이나 npm을 통해서 설치가 가능하다.대문자 시작으로 스타일드 컴포넌트를 선언한다.styled.(태그)후 Templete Literals 문법으로 css를 작성해

우리는 지금까지 자식의 자식의 자식의 컴포넌트에서 부모 컴포넌트에 있는 값을 사용하려면 props의 props의 props로 넘겨받아 사용함. 하지만 Context API와 dispatch를 사용하면 원하는 컴포넌트에게 바로 전달 가능Context 는 리액트에서 제공해

사용자가 요청하는 주소에 따라 다른 컴포넌트를 보여줘보겠습니다. 이 작업을 할 때에는 Route 라는 컴포넌트를 사용합니다.exact 라는 props 를 true 로 설정하면 경로가 완벽히 똑같을때만 컴포넌트를 보여주게 됩니다.Link 컴포넌트는 클릭하면 다른 주소로

리덕스는, 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손

api는 COVID19 API에서 가져옴내가 필요한 데이터는 Confirmed(확진자수), Active(격리자수), Date(날짜)이다.우선 api를 호출하기위해 axios와 데이터를 차트로 표출해주기위해 react-chartjs-2를 설치하여 임포트Header컴포넌트

목표 : 일일 확진자수 확인할 수 있는 상황판 만들기HeaderTodayContentsinfoBoxBarChartTableuseState를 활용하여 countryInfo정보를 담고 fetch를 통해 api를 불러옴 InfoBox 컴포넌트에 props로 title, ca

CounterContainer와 TodosContainer가 렌더링 되어 있는 모습Container는 리덕스에 있는 상태를 가져와서 보여줌Profiler에서 리렌더링 상황을 살펴볼수 있는데 Counter 버튼을 클릭하면 CounterContainer가 리렌더링 되고 T

유저가 스크롤 해서 무언갈 지나쳤을 때 색상을 바꾸거나 사용자가 원하는대로.우선 setState를 이용해서 사용자의 스크롤 위치 객체를 저장합니다. 사용 범위를 넓히기 위해서 X, Y 좌표를 모두 객체에 저장했습니다.onScroll은 window 객체의 스크롤 이벤트의

리덕스 모듈이란 다음 항목들이 모두 들어있는 자바스크립트 파일을 의미액션 타입액션 생성함수리듀서==> 리듀서와 액션 관련 코드들을 하나의 파일에 몰아서 작성하면 이를 Ducks 패턴이라고 부름.액션생성함수는 export로 써서 내보내지만리듀서는 expert defaul