본문 바로가기

분류 전체보기50

withCredentials: true 리액트에서 axios를 사용할 때withCredentials: true를 설정하는 것은클라이언트가 서버와 통신할 때 쿠키를 포함한 자격 증명을 함께 보내겠다는 뜻입니다.쉽게 설명하자면, 서버와의 요청에서 로그인 상태나 사용자 정보를 유지하기 위해 필요한 설정입니다. 예를 들어, 어떤 웹사이트에 로그인한 상태에서 다른 페이지로 이동하거나 데이터를 요청할 때,서버는 이 사용자가 누구인지 알아야 합니다.이때 쿠키가 사용자 정보를 담고 있으며,withCredentials: true를 설정하면 이 쿠키를 서버로 함께 보내어 서버가 사용자를 인식할 수 있게 합니다. 다음은 withCredentials 옵션을 사용하는 간단한 예제입니다.import axios from 'axios';axios.get('https://.. 2024. 5. 25.
styled-components의 장점과 단점 styled-components는 React 애플리케이션에서 CSS를 작성하고 관리하는 방법을 제공하는 인기 있는 라이브러리입니다. 이 라이브러리는 JavaScript 안에 CSS를 직접 작성할 수 있게 해주며, 컴포넌트 단위로 스타일을 관리할 수 있는 장점을 가지고 있습니다. 그러나, 모든 기술이 그러하듯 styled-components에도 장단점이 존재합니다.장점컴포넌트 기반 스타일링:스타일을 컴포넌트 내부에 포함시킴으로써 스타일과 로직을 함께 관리할 수 있습니다. 이는 각 컴포넌트의 스타일이 독립적으로 유지될 수 있게 하여 유지보수를 쉽게 합니다.동적 스타일링:props를 통해 스타일을 동적으로 변경할 수 있습니다. 이를 통해 조건부 스타일링이 쉬워지고, 스타일 재사용성이 높아집니다.자동 중첩 및 .. 2024. 5. 21.
리액트 훅(React Hooks) 리액트 훅(React Hooks)은함수형 컴포넌트에서 상태(state)와 라이프사이클(lifecycle) 기능을 사용할 수 있게 해주는 기능입니다.리액트 16.8 버전에서 도입되었으며, 클래스형 컴포넌트의 복잡성을 피하고,함수형 컴포넌트의 장점을 살릴 수 있도록 돕습니다. 주요 훅은 다음과 같습니다: 1. useStateuseState 훅은 컴포넌트에서 상태 변수를 선언할 수 있게 합니다.import React, { useState } from 'react';function Example() { const [count, setCount] = useState(0); // 초기 값 0 return ( You clicked {count} times setCount(count + .. 2024. 5. 20.
React Component, Element 기능 구현을 하다보면 가끔 component랑 element의 정확한 뜻이 헷갈려서어? 배웠는데 뭐지? 하는 경우가 생겨서 다시 정리를 해본다...⭐엘리먼트는 리액트 애플리케이션의 가장 작은 단위로, 화면에 표시되는 내용을 기술한다. 반면, 컴포넌트는 이러한 엘리먼트들을 조합하고 재사용 가능한 코드 블록을 형성한다.  📌 리액트 컴포넌트란?이제 리액트 컴포넌트에 대해 알아보자. 리액트 컴포넌트는 엘리먼트를 좀 더 자유롭게 다루기 위한 문법이다.가장 간단한 컴포넌트 생성 방법은 자바스크립트 함수를 사용하는 것이다.리액트 엘리먼트를 함수 형태로 만들어내면 JSX 문법을 작성할 때 커스텀 태그처럼 활용할 수 있다.아래 코드에서 볼 수 있는 Hello 함수가 하나의 예시이다.import ReactDOM fro.. 2024. 5. 17.

티스토리툴바