기존에 한 컴포넌트 안에서 데이터를 생성하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 방법은 state와 props를 사용해서 컴포넌트 간에 전달이 가능했습니다. 이 외에 state를 관리하는 방법(mobx, redux ...)은 여러가지가 있지만, 그 중 Reac

The Movie DB API 생성

리액트 앱을 만들 폴더 생성 > 터미널 실행 > npx create-react-app ./npx는 노드 패키지 실행을 도와주는 도구. npm 레지스트리에 있는 패키지를 create-react-app 것으로 실행해서 리액트를 설치시켜주는 것최신 자바스크립트 문법을 구형브

리액트 훅에 대해서 복습해보겠습니다! 리액트 훅이란 무엇인가 함수형 컨포넌트와 클래스형 컴포넌트로 만들 수 있습니다. 함수형 컴포넌트는 프로퍼티를 받고 JSX를 반환했었습니다. 리액트 훅을 사용할 걸면 클래스형 컴포넌트는 필요 없습니다. 또 작업량이 많다는 것이

이번 시간에는 리덕스 말고 리액트 전용 도구만을 이용하여 state를 관리하는 방법을 보여드리겠습니다! context 폴더 생성 후 products-context.js 파일을 만들겠습니다! products-context.jsproductsList가 바뀔 떄 마다 즉,

소개 웹앱에서는 인증 DOM이 필요합니다. 로그인해야만 하는 접근 구역이 있습니다. 바로 리액트 앱에서의 인증에 대해서 아랑보겠습니다. 가입, 로그인, 로그아웃을 구현하고 사용자 로그인 시 보호된 리소스에 접근하는 법을 알아보고, 로그인을 유지해주는 인증유지와 그

Lazy Loading : 해당 코드가 필요할 때만 그 특정 코드를 로딩하는 것입니다. App.js기존 import 문에서 벗어나 모드를 미리 다운로드하기 위해 미리 실앻하지 않고 필요할 때만 실행하는 거죠.페이지가 많고 각 페이지에 많은 컴포넌트와많은 복잡한 로직이

를 터미널에 설치한다.그리고 기존에 Switch문은 Routers로 대체되었다.App.js\->버전 6에서는 exact도 필요가 없고, element로 JSX로 연결시켜줍니다!그리고 v5에서는 동적 path가 있으면 순서가 Route의 순서가 중요했지만, v6에서는

AvailableMeals.jsDUMMY로 있던 데이터들을 Firebase로 옮겨서 백엔드 작업을 해보겠습니다!데이터를 저장시켰고, 이 데이터를 AvailableMeals에서 useEffect와 useState를 이용하여 불러들이는 작업을 하겠습니다.fetch를 이용하

이번에는 사용자 입력 폼에 대해 폼이 어떻게 복잡한지 다루고,리액트에서 폼과 입력 값을 조작하고 검증하는 것에 대해 다루겠습니다.이를 개발자로서 작업할 수 있게 해주는 몇가지 도구들과 접근방법에 대해서도 알아보겠습니다!

Custom Hooks을 만들어서, 재사용 가능한 함수에 상태를 설정하는 로직을 아웃소싱할 수 있습니다. 정규 함수와는 다르게, 커스텀 훅은 다른 커스텀 훅을 포함한 다른 리액트 훅을 사용할 수 있습니다. useState, useEffect 등을 통해 관리하는 리액트

React는 데이터베이스와 앱으로 직접 연결을하거나 데이터를 직접 가져오는 행위는 외부 환경에서 안되는 일 중 하나이다. 인증 정보를 노출시키는 행위이기 떄문이다. 간단하게 개발자도구를 통해서 코드를 볼 수 있기 때문에 안전하지 않다. 그래서 백엔드 App을 이용해야한

useState의 생성과 함께 초기화할 값을 넣어줌으로써 state에 값이 세팅된다.현재 상태 값은 state에 들어있고, setState에 값을 세팅하여 값을 바꿀 수 있다!예를 들어, time이라는 시간이 5라고 맞춰져있고 이 시간을 바꾸고 싶으면 setTime(6