윤시의 블로그

React에서 Axios 사용하기Axios는 HTTP 요청을 간편하게 처리해주는 JavaScript 라이브러리이다. 주로 서버와 데이터를 주고받을 때 사용된다. Axios는 Promise 기반으로 동작하여 비동기 요청을 쉽게 처리할 수 있다. 이를 통해 React와 같은 프론트엔드에서 서버와의 상호작용을 원활하게 구현할 수 있다. 1. Axios 설치하기Axios는 기본적으로 별도의 설치가 필요하다. 다음 명령어로 설치할 수 있다.npm install axios설치 후, React 컴포넌트에서 Axios를 불러와 사용할 수 있다.import axios from 'axios';2. Axios와 Fetch의 차이점 AxiosFetch설치 여부별도 설치 필요 (npm install axios)브라우저 내장 A..

Next.js란?Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원한다. React의 단점을 보완하기 위해 만들어졌으며, SEO(검색 엔진 최적화)와 성능 최적화에 강점을 가진다. Next.js의 특징파일 기반 라우팅파일 이름에 따라 라우팅이 자동으로 설정된다.서버 사이드 렌더링(SSR)요청 시 서버에서 HTML을 생성하여 브라우저에 전달한다.정적 사이트 생성(SSG)빌드 시 HTML을 생성하여 배포 후에는 CDN에서 제공한다.클라이언트 사이드 렌더링(CSR)React의 기본 렌더링 방식으로, 브라우저에서 모든 렌더링이 이루어진다.API 라우트별도의 서버를 구축하지 않고도 API 엔드포인트를 생성할 수 있다.주요 개념서버 사이드 렌더링(SSR)..

React Router란?React Router는 React 애플리케이션에서 클라이언트 측 라우팅을 구현하기 위해 사용되는 라이브러리이다.클라이언트 측 라우팅은 URL이 변경될 때 전체 페이지를 다시 로드하지 않고도 동적으로 컴포넌트를 렌더링할 수 있도록 해준다. 이를 통해 React로 제작된 SPA(Single Page Application)에서도 다양한 페이지를 탐색하는 것처럼 보이게 할 수 있다. React Router의 주요 특징페이지 새로고침 없이 URL 기반 탐색 가능동적 라우팅 지원 (예: /user/:id와 같은 URL)중첩된 라우트와 글로벌 레이아웃 관리 가능사용자 경험 향상을 위한 SPA 구성 지원  React Router 설치 및 기본 설정React 애플리케이션에 React Route..

1. React 스타일링 방식 개요React에서 주로 사용되는 스타일링 방법 일반 CSS가장 간단한 방식으로, HTML에서 사용하던 CSS 파일을 React 컴포넌트에 적용 CSS ModulesCSS 클래스 이름을 컴포넌트 범위로 제한하여 스타일 충돌을 방지하는 방식 Styled-ComponentsCSS-in-JS 방식으로, 컴포넌트 내부에서 CSS를 작성하며 동적 스타일링과 컴포넌트 기반의 스타일 관리를 지원 CSS FrameworksBootstrap, TailwindCSS, MUI(Material-UI)와 같은 프레임워크를 사용2. 일반 CSS특징HTML과 동일하게 CSS 파일을 작성 후 import하여 사용한다.가장 기본적이고 직관적인 방법이다.코드 예제// App.css.container { b..

React Hooks란?React Hooks는 함수형 컴포넌트에서도 React의 상태 관리 및 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 기능이다. 이전에는 클래스 컴포넌트에서만 가능했던 이러한 기능들을 함수형 컴포넌트에서도 활용할 수 있도록 만들어졌다. React 16.8에서 처음 도입되었다. [주요 장점]코드 재사용성: 반복적인 로직을 간결하게 처리 가능.가독성 향상: 함수형 컴포넌트에서의 간단한 구문 덕분에 코드가 더 명확함.복잡한 로직 처리 가능: 상태 관리와 비동기 작업 등을 간단하게 구현할 수 있음. 주요 Hooks와 활용법1. useState - 상태 관리useState는 컴포넌트의 상태를 관리하는 데 사용된다. 상태는 컴포넌트에서 데이터의 현재 값을 의미하며, 변경되면 컴포..

Zustand란?Zustand는 독일어로 "상태"라는 뜻으로, 리액트 상태 관리를 간단하고 효율적으로 할 수 있게 도와주는 라이브러리이다. 상태(state)를 더 직관적이고 깔끔하게 관리할 수 있도록 설계되었다.왜 Zustand를 사용할까?리액트에서 기본적으로 제공하는 useState와 useReducer를 사용해도 상태 관리는 충분히 가능하다. 하지만 다음과 같은 경우, Zustand가 더 좋은 대안이 될 수 있다.1. 상태가 복잡해질 때프로젝트가 커질수록 상태가 여기저기 분산되어 관리하기 어려워진다.여러 컴포넌트에서 동일한 상태를 공유하거나, 상호작용해야 할 때는 props를 계속 전달해야 해서 코드가 복잡해진다.Zustand는 중앙 저장소(store)를 만들어 상태를 한 곳에서 관리하고, 필요한 컴..

📌 useEffect란?useEffect는 React에서 side effects를 처리하기 위한 훅(Hook)입니다. 컴포넌트가 렌더링될 때 또는 특정 상태(state)가 변경될 때 실행되는 코드(예: 데이터 가져오기, DOM 업데이트 등)를 관리하는 데 사용됩니다.React가 무언가를 할 때 실행해야 하는 코드가 있다면 useEffect를 사용한다.📌 useEffect의 기본 문법useEffect(() => { // 실행할 코드}, [dependency]);첫 번째 인수: 효과 함수입니다. 여기에서 실행할 코드를 작성합니다.두 번째 인수: 의존성 배열입니다. 이 배열에 지정한 값이 변경될 때만 효과 함수가 실행됩니다.의존성 배열이 없다면: 컴포넌트가 매번 렌더링될 때 실행됩니다.빈 배열([]): ..

1. propsprops(properties)는 React에서 컴포넌트 간 데이터 전송을 위해 사용하는 방법이다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있지만, 반대로 자식에서 부모로 데이터를 전송하는 것은 지원되지 않는다.  props의 기본 개념단방향 데이터 흐름 React에서는 데이터가 부모에서 자식으로 흐르는 단방향 흐름을 따른다. 즉, 부모가 자식에게 props를 통해 데이터를 전달할 수 있지만, 자식이 직접 부모에게 데이터를 전송하는 것은 불가능하다.props의 사용 props는 자식 컴포넌트에서 부모로부터 받은 값을 참조할 수 있게 해준다. 이를 통해 자식 컴포넌트는 부모 컴포넌트의 상태나 함수를 사용할 수 있다.props의 불변성 props는 자식 컴포넌트에서 변경할 수 없..

1. JSX에서 조건문 쓰기 - 삼항연산자2. JSX에서 반복문 사용 - map 함수   1. JSX에서 조건문 쓰는 법 JSX 안에서는 if else 문법을 바로 사용할 수 없다.if 문법 대신 삼항연산자를 사용할 수 있다. 조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드 3 > 1 ? : console.log('맞음') : console.log('틀림');  2. map 함수 똑같은 html 이 반복적으로 나타나면 반복문을 이용해 쉽게 같은 html 생성할 수 있다.for 반복문은 JSX 중괄호 안에서는 사용할 수 없기에 map()을 사용한다. var arr = [1,2,3,4];arr.map(function(){ console.log('출력') }); arr에 들어있는 ..

1. 버튼을 통해 상태(state) 값 변경하기2. 상태(state) 배열 정렬하기 3. Component 문법 1. 버튼을 이용해 상태 값 변경하기 React에서는 setState 함수를 사용해 상태를 업데이트 할 수 있다.아래 코드는 버튼을 클릭했을 때, 첫 번째 글 제목이 바뀌도록 한 예제이다.import React, { useState } from 'react';function App() { let [글제목, 글제목변경] = useState(['남자코트 추천', '인천 우동맛집', '화장품 추천']); return ( { 글제목[0] } { 글제목[1] } { 글제목[2] } {/* 버튼 클릭 시 첫 번째 글 제목을 '여자코트 추천'으로..