코딩 정보/React36 [React] 통신을 위한 Json과 response, error에 대해 알아보자 목차 JSON과 JavaScript의 차이JSON은 일반 JavaScript처럼 보이지만 JSON을 텍스트 파일과 유사한 데이터 형식으로 이해하는 것이 좋다. JSON이 JavaScript와 매우 비슷해 보이는 이유는 JSON은 JavaScript 문법에서 영감을 받아 만들어졌기 때문이다. 다음 코드를 실행해보면 json과 자바스크립트 객체의 차이를 볼 수 있다.const arr = { name: "hauksu", age: 19, school: 'sejong',};function Practice() { console.log(arr); console.log("------------"); console.log(JSON.stringify(arr)); return ;}export default Pr.. 2024. 8. 21. [React] 라우터의 개념과 활용 방법에 대해 알아보자 목차 라우팅이란?라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다.간단하게 요약하면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다. 리액트 라우터의 사용 이유SPA 사용자 경험 향상의 목적으로 페이지 전체를 로딩하는 대신 라우팅을 통해 부드러운 화면전환을 목적으로 사용한다. 간단한 사용 방법import { createBrowserRouter, RouterProvider } from "react-router-dom";import HomePage from "./pages/HomePage";const router = createBrowserRouter([ //경로 { path: "/", element: }, {},]);function Router() { .. 2024. 8. 16. [React] 리덕스의 개념과 활용 방법에 대해 알아보자 목차 리덕스의 정의javascript의 상태관리 라이브러리이다.여러 컴포넌트가 공유하는 상태를 관리하기 위한 라이브러리로, 메타(페이스북)가 설계한 flux 규격에 맞추어져 있다.리액트와 사용하기 위해서는 RTK(React Tool Kit)을 함께 설치해야 한다.리액트 컨텍스트에 기반을 둔 라이브러리로 Provider 컴포넌트가 항상 취상위로 동작해야 한다. 리액트에서는 다음과 같은 상태가 있다.local state단일 컴포넌트에 속해있는 상태로 예로는 useState, useReducer가 있다. cross-component state여러 컴포넌트에 속해 있는 상태로 예로는 프롭스 드릴링, 프롭스 체인이 있다. app-wide state전체 앱에 영향을 미치는 상태로 예로는 프롭스 드릴링, 프롭스 체.. 2024. 8. 11. [React] useEffect와 관련되어 순차적으로 에러 핸들링 해보기 데이터를 불러오는 과정을 만들고자 한다.그 과정에서 useEffetc를 통해 에러핸들링을 순차적으로 만들어보면서 에러가 나는 부분을 해결하고자 한다. 이 글을 보기 전에 커스텀 훅의 개념과 useEffect의 실행시점, useCallback에 대해 알고 가면 좋다.아래를 참고하자https://be-senior-developer.tistory.com/157 [React] Custom Hook에 대해 알아보자목차 Custom Hook의 정의리액트 훅의 첫번째 규칙은 리액트 훅은 리액트 컴포넌트안에서만 사용해야 한다.이 첫번째 규칙을 더 유연하게 만들어 주는 것이 Custom Hook으로 컴포넌트에들어가 있는 함be-senior-developer.tistory.comhttps://be-senior-develo.. 2024. 8. 10. 이전 1 2 3 4 5 6 7 ··· 9 다음 728x90
