본문 바로가기

React49

리덕스(Redux) 소개 리덕스는 뭘까? 리덕스(Redux)는 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리이다. 리덕스는 예측 가능한 상태 컨테이너를 제공하여 애플리케이션의 상태를 중앙에서 관리하고, 상태 변경을 위한 일관된 방법을 제공한다. 특히 리덕스는 애플리케이션이 커지고 복잡해질 때 유용하며, 예측 가능한 특성 때문에 디버깅과 테스트를 용이하게 해준다. 리덕스에는 아래의 다섯 가지 핵심 개념이 있다. Store: 애플리케이션의 상태를 보유하고 있는 단일 객체이다. 리덕스 스토어는 상태를 변경하기 위한 액션을 받아 리듀서를 호출하여 상태를 업데이트하게 된다. Action: 애플리케이션에서 발생하는 어떠한 이벤트나 동작을 나타내는 객체이다. 액션은 반드시 type이라는 필드를 가지며, 상태를 업데이트할 때 어떤 작업.. 2023. 6. 19.
음식 주문 앱 사용자 주문 받고 서버에 저장하기 사용자 주문 받고 서버에 저장하기 어제 더미데이터를 서버에 저장하여 화면에 표출하는 것을 했다면, 오늘은 이 데이터를 보고 사용자가 주문양식을 작성해서 주문을 하면 서버에 주문데이터가 저장되는 것을 해보았다. 주문양식은 음식을 담아 헤더의 카트를 누르고 order 버튼을 누르면 위 이미지처럼 양식과 새로운 두 버튼이 보이도록 했다. 이 버튼 중 confirm 버튼을 누르면 서버에 저장되도록 했는데, 그 전에 4개의 값을 받아서 서버로 보내는 코드를 작성해주었다. 우선 사용자가 양식에 입력하는 값을 받기 위해 submitHandler에 event.target.value로 받을 수 있었지만 매번 값을 받는 게 아니라 제출을 했을 때 값을 받으면 되므로, useRef 훅을 불러와 제출이 되면 current.v.. 2023. 6. 17.
음식 주문 앱 메뉴를 백엔드 서버에 등록하고 가져오기 메뉴를 백엔드 서버에 등록하고 가져오기 저번에 만들었던 음식 주문 앱은 4개의 메뉴가 자바스크립트 파일 내의 별도공간에 담겨있었다. 오늘은 이 데이터를 백엔드 서버에 등록하고 불러와서 표출하는 것까지 해보았다. 구글의 파이어베이스에 더미데이터를 등록했고, 각각의 id별로 description과 name, price 키-값을 담았다. 이렇게 등록한 데이터를 불러오기 위해 더미데이터가 원래 있던 AvailableOrder.js 파일에서 useEffect 훅을 불러왔다. 이 더미데이터는 최초 한 번만 렌더링되면 되기 때문이다. 서버에서 불러와지기 전 초기 상태는 비어있는 값이고, 불러오면 서버에 있는 값이 나타나게 되는데 이는 상태 변화에 해당하므로 useState 훅을 사용했고, 데이터인 meals, 로딩중.. 2023. 6. 16.
사용자 입력양식 코드 정리 사용자 입력양식 코드 정리하기 오늘은 어제 만든 사용자 입력양식 내 코드의 중복된 부분을 정리하는 방법에 대해 배워보았다. 이를 위해 커스텀 훅을 만들었는데, 별도 파일에 useInput이라 명명한 함수를 만들었다. 여기에 사용자 입력값과 사용자가 입력칸을 건드렸는지에 대한 상태값을 만들었고, 인증을 위해 기존 파일에 있는 인증로직을 validateValue로 받고, 사용자가 입력한 값인 enteredValue를 이 인증로직에 적용하도록 했다. 에러가 발생하는 것은 hasError로 묶고 인증한 결과가 거짓일 때와 사용자가 입력칸을 건드려서 isTouched가 true로 되었을 때 에러가 발생하도록 했다. 기존 파일에 이름과 이메일 각각에 함수를 적용했던 것을 두개로 줄이고, reset 함수도 만들어서 .. 2023. 6. 15.
리액트에서의 양식 및 사용자 입력작업 양식 및 사용자 입력작업 리액트로 만드는 웹사이트나 웹앱에서 사용자의 입력을 받아 제출받는 경우는 흔하다. 이 경우에 사용자가 입력하는 요소들에 반드시 지켜져야 할 부분이 있어야 한다면 인증로직을 거쳐서 최종적인 제출을 할 수 있도록 해야한다. 오늘은 이 부분에 대한 수업을 진행하며, 구체적으로 알아보았다. 위 양식은 오늘 수업을 진행하며 만들어본 양식이다. 이름입력란과 이메일 입력란에 각각 인증로직이 되어있고, 이름과 이메일이 모두 정상입력되어야 제출이 가능하도록 해놓았다. 여기서 이름과 이메일은 사용자가 입력하는 값을 받도록 하고, 이름에서는 공백여부를 확인하고 이메일에서는 @ 문자의 존재여부를 확인하는 인증로직을 넣었다. 위 이미지의 세 번째 코드는 제출시 실행되는 함수 내의 인증로직인데, 이름에 .. 2023. 6. 14.
HTTP 요청 심화, 커스텀 훅 리액트에서의 HTTP 요청 (2) 오늘은 어제 배운 HTTP 요청에 대해 좀 더 깊게 들어가 살펴보았다. 어제 사용한 app 컴포넌트에는 HTTP 요청을 했을 때 서버와의 통신에 문제가 생겼을 때 사용자에게 상황을 알려줄 수 있는 코드를 추가하고, 스타워즈API에서 사실상 정적인 데이터를 전달받는 대신 사용자가 입력한 내용을 서버에 저장하고 전달받을 수 있는 코드도 추가했다. 우선 서버와의 통신에 오류가 발생했을 경우의 상태값과 상태변경함수를 만들고 초기값은 null로 해주었다. 기존에 함수였던 fetchMoviesHandler는 상수명으로 바꿨고, 이 상수의 값으로 이전값을 저장하고 불필요한 계산이 이루어지지 않도록 useCallback 훅을 사용해서 비동기함수를 생성해주었다. 이 함수의 실행으로 se.. 2023. 6. 2.

티스토리툴바