React

자바스크립트는변수의 타입을 미리 지정하지 않아도 자유롭게 사용할 수 있는 동적 언어개발 속도를 빠르게 해주는 장점도 있지만,반대로 타입 관련 버그가 런타임에서야 발견될 수 있는 단점이 존재 => 이런 문제를 해결하고자 나온 것이 바로 타입스크립트(TypeScript)1. 타입스크립트정적 타입 시스템을 통해 코드를 실행하기 전에 변수의 타입을 정적으로 결정물론 모든 변수에 타입을 지정해야 해서 유연하지 못하다는 단점타입스크립트는 점진적 타입 시스템을 채택모든 곳에 타입을 강제로 지정하지 않아도, 타입스크립트가 자동으로 타입을 추론=> 이를 통해 유연함과 타입 안정성을 모두 가져갈 수 있게 된다. 브라우저나 Node.js가 .ts 파일을 직접 실행할 수 없음→ 반드시 자바스크립트로 컴파일 후 실행해야 함2..

1. Context API란?Context API는 React에서 제공하는 전역 상태 관리 도구입니다.컴포넌트 트리 전체에서 props를 일일이 넘기지 않고도 데이터를 공유할 수 있도록 도와줍니다. 언제 사용할까?여러 컴포넌트에서 동일한 상태나 함수를 사용할 때상위 컴포넌트에서 하위 컴포넌트로 깊게 상태를 전달해야 할 때 (prop drilling 문제가 발생할 경우)Context는 우리가 직접 "세션처럼" 저장해줘야 한다!Context는 브라우저 메모리에만 존재즉, 새로고침 시 모든 값이 초기화되기 때문에 상태를 유지하려면우리가 직접 로컬 스토리지에 저장하고 불러오는 로직을 구현Context는 세션처럼 동작하지 않기 때문에 세션의 역할을 직접 코딩Context에 저장된 데이터를 브라우저 저장소에 수동으..

Context란?Context는여러 컴포넌트가 공통으로 사용하는 값을컴포넌트 트리 어디서든 쉽게 접근할 수 있도록 만들어주는 전역 데이터 저장소왜 Context를 써야 할까?리액트 애플리케이션에서는 데이터 전달이 기본적으로 부모 → 자식 props 방식여러 컴포넌트에서 공통으로 필요한 데이터를 매번 props로 전달하면 코드가 지저분해지는 props drilling 발생!!Context 패턴 정석 구성store에서 context 선언 Provider로 컴포넌트 트리를 감싸서 전역 값 전달 커스텀 훅으로 context 값 가져오기Next.js + TypeScript 이용한 Context 정리타입(interface) 선언하기=> 컨텍스트로 관리할 상태와 그 상태를 변경할 함수의 타입을 정의interface ..

TanStack Query (React Query)웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 아주 쉽게 해주는 API.기존에는 해당하는 데이터의 로딩, 에러, 캐싱, 갱신을 직접 관리했어야 했지만, React Query가 알아서 해준다. 서버로부터 데이터를 가져오는 건 useQuery데이터 생성, 수정, 삭제 같은 작업은 useMutation쿼리의 결과를 자동으로 캐싱, 관리QueryClientProvider를 앱 루트에 적용해줘야 캐싱 가능설치npm i @tanstack/react-query queryClientprovider을 붙여주어야지 캐싱 가능 import { QueryClient, QueryClientProvider } from '@tanstack..

Axios와 async/await를 활용한 비동기 통신 정리 Axios란?Axios는 Node.js와 브라우저 모두에서 사용할 수 있는 Promise 기반의 HTTP 클라이언트동일한 코드로 브라우저와 Node.js 환경에서 모두 작동할 수 있는 동형(isomorphic) 라이브러리서버 사이드에서는 Node.js의 http 모듈을 사용클라이언트(브라우저)에서는 XMLHttpRequest를 이용해 요청설치 방법npm install axios동기(Synchronous) vs 비동기(Asynchronous)프로그래밍에서는 작업이 실행되는 방식에 따라 **동기(Sync)**와 **비동기(Async)**로 나눌 수 있습니다. 동기(Synchronous)순차적으로 작업이 실행이전 작업이 끝나야 다음 작업이 실행set..

SPA란?SPA (Single Page Application)말 그대로 한 개의 페이지로 구성된 애플리케이션✅ 기존 방식 (MPA: Multi Page Application)페이지 이동 시마다 새 HTML을 서버로부터 받아옴페이지마다 서버가 새로 해석 후 렌더링느리고, 화면 전환 시 깜빡임 발생✅ CSR 기반 SPA 방식처음에 한 번만 HTML과 JS를 받아옴이후에는 브라우저에서 필요한 부분만 업데이트서버는 데이터를 제공하고, 뷰 렌더링은 클라이언트(브라우저)에서 처리React와 CSR (Client-Side Rendering)React는 SPA 구현을 위한 대표적인 라이브러리✅ CSR 특징초기 HTML은 거의 비어 있음브라우저에서 JS가 실행되며 React가 컴포넌트를 렌더링**가상 돔(Virtual ..

- React에 TypeScript 적용하기: TypeScript는 JavaScript 코드 베이스에 타입 정의를 추가하는 사용Project 생성하기 1. React app 생성하기2. Typescript 라이브러리 설치하기3. Typescript 초기화 하기 create-react-app 프로젝트이름create-react-app 01_props npm install @types/react @types/react-dom npx tsc --init tsconfig.json 설정하기{ "compilerOptions": { "jsx": "react-jsx", "module": "ESNext", "target": "ES6", "moduleResolution": "node", "strict": true, "esM..

CSS전처리기CSS 전처리기는 CSS 코드를 작성할 때 보다 효과적이고 조직적으로 스타일을 관리하기 위한 스크립팅 언어이 전처리기는 특별한 문법을 사용하여 작성되며, 웹 사이트를 실행하기 전에 일반 CSS로 컴파일(vs code extension - compile hero)해서 배포합니다 종류Sass와 SCSS가 있다.  특징 SCSS SASS 문법CSS와 유사한 문법 사용들여쓰기를 기반으로 한 문법 사용세미콜론 및 중괄호;와 {} 사용세미콜론과 중괄호 없이 들여쓰기로 구분CSS 호환성기존 CSS 파일을 SCSS로 변환 가능CSS와 호환되지 않음, 별도의 문법 사용간결성상대적으로 덜 간결하지만 직관적더 간결하고 읽기 쉬운 문법문법 예시scss .btn { color: red; }sass .btn co..

useReducer다양한 컴포넌트의 상황에 따라 state의 상태 관리를 구조적으로 할 수 있는 Hook  상태 변화 로직을 하나의 함수(reducer)에서 관리할 수 있어서 복잡한 상태 로직을 처리할 때 유용 const [state, dispatch] = useReducer(reducer, state객체) reducer   : dispatch에 의해 호출되어 state를 관리할 함수 state객체  : 관리할 state const reducer(state, action) =() =>{// 보통 switch 문으로 type 별로 상태관리} 컨포넌트 내부에 새로운 State를 생성하는 리엑트 hook  모든 useState는 useReducer로 대체 가능=>상태 관리 코드를 컴포넌트 외부로 분리할 수 있..

React 실습컴포넌트의 역할을분리하고 props와 state 상태관리를 활용하여다양한 책 정보를 목록으로 보여주고, 각 책을 클릭하면 책의 상세 정보를 표시하는 웹사이트 만들어 보기!!!! - 구조Books(책 정보)->app->bookDetailapp-> booklist->bookitem BookItem은 책 정보를 렌더링BookList는 여러 BookItem을 렌더링BookDetail은 선택된 책의 세부 정보를 표시  BookItem: 각 책에 대한 정보를 테이블 행(tr)에 출력 / 버튼을 클릭하면 bookSelect 함수가 호출 부모 컴포넌트로 선택된 책 정보를 전달BookList: 책 목록을 테이블 형식으로 출력 /  각 책 항목은 BookItem을 사용하여 렌더링BookDetail: 선택된 ..