겨리의 개발일기

React Query란? ✅ 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리. ✅ 클라이언트 상태와 서버 상태를 명확히 구분하기 위해 만들어졌다. server state와 clinet state server state ✅ 서버는 특정 시점에 클라이언트 요청에 대해 데이터데이스에서 유저 정보를 가져와 서버의 상태값을 만들어낸다. ✅ 데이터베이스에 있는 값을 그대로 클라이언트에게 전달할 수도 있고, 요청에 담긴 특정 값을 이용해 정보를 가공하여 메모리에 들고있다. 그리고 이 정보를 클라이언트에게 전달한다. clinet state clined state는 크게 두 가지로 나눌 수 있다. ✅ client에서 자체적으로 만드는 state(최초..

Programming/React 2023. 7. 4. 19:51

Recoil이란? ✅ context API 기반으로 구현된 함수형 컴포넌트에서만 사용가능한 페이스북에서 만든 라이브러리 Recoil의 핵심 컨셉 ✅ 오직 리액트만을 위해 리액트처럼 ✅ react 내부 상태만 이용 ✅ 작은 Atom 단위로 관리 ✅ 순수 함수 Selector ✅ Re-Render 최소화 ✅ 데이터 흐름을 따라서 ✅ 곧 새로운 React 기능과 호환성 설치 방법 # npm npm install recoil # yarn yarn add recil 주요개념 Atoms ✅ 상태(state)의 일부를 나타낸다. ✅ 업데이트와 구독이 가능하다. ✅ Atoms 는 어떤 컴포넌트에서나 읽고 쓸 수 있다. ✅ atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다 → atom에 변화가 생기면, 그..

Programming/React 2023. 7. 4. 19:38

Redux란? ✅ JavaScript 상태관리 라이브러리(리액트에 종속된 라이브러리 X) Redux의 기본 개념 1. Single source of truth ✅ 동일한 데이터는 항상 같은 곳에서 가지고 온다. → 스토어라는 하나 뿐인 데이터 공간이 있다. 2. State is read-only ✅ 액션이라는 객체를 통해서만 상태 변경이 가능하다. 3. Changes are made with pure functions ✅ 변경은 순수함수로만 가능하다. → 리듀서와 연관되는 개념 설치방법 # npm npm install redux react-redux # yarn yarn add react-redux store 생성과 reducer ⭐ store 생성시 reducer를 반드시 주입해야한다. reducer ..

Programming/React 2023. 7. 4. 18:57

함수 ✅ 타입스크립트로 함수를 작성한 코드 function hello(name: string,age?: number ) : string{ if(age !== undefined) return `Hello, ${name}. You are ${age}.`; else return `Hello, ${name}.`; } console.log(hello('gyeol',30)); // "Hello, gyeol. You are 30." 출력 🤔 만약 매개변수 age를 name보다 먼저 선언하고 싶다면? function hello(age?: number, name: string) : string{ if(age !== undefined) return `Hello, ${name}. You are ${age}.`; else r..

Programming/TypeScript 2023. 6. 20. 21:29

타입스크립트를 쓰는 이유 🤔 브라우저는 타입스크립트를 이해하지 못한다. 근데 왜 이걸 사용할까? ✅ JavaScript는 동적언어. 런타임에 타입이 결정되고 오류가 발견된다. → 만약 개발자가 실수를 하게되면 오류가 사용자에게 그대로 노출된다. ✅ Java, TypeScript는 정적언어. 컴파일시 타입이 결정되고 오류가 발견된다. 타입스크립트 기본타입 타입스크립트의 기본 타입에는 크게 열두가지가 있다. Boolean, Number, String, Object, Array, Tuple, Enum, any, void, null, undefined, never String, Number, Boolean, Array // number, string, boolean let age:number = 30; let ..

Programming/TypeScript 2023. 6. 20. 13:57

유투브 소플님의 강의를 보고 미니블로그 만들기를 진행한 내용을 정리해봤다. 구현할 기능 ✅ 글 목록 보기 ✅ 글 보기 ✅ 댓글 보기 ✅ 글 작성하기(일단 화면만 개발) ✅ 댓글 작성하기(일단 화면만 개발) 프로젝트 생성하기 ✅ npx create-react-app 명령어 사용 패키지 설치하기 ✅ react-router-dom v6와 styled-components v5를 사용할 예정 npm install --save react-router-dom styled-components --save : 지금 설치하는 패키지들을 package.json파일이 관리하는 의존성 목록에 저장하겠다는 의미이다. 설치 후 package.json 확인 설치가 완료되면 package.json의 dependencies 쪽에서 확인..

Programming/React 2023. 6. 5. 16:48

input을 여러 개 만들어서 관리하는 방법 useState를 여러 번 사용하고 onChange 함수도 여러 개 만들어서 구현할 수 있다. 하지만 이는 좋은 방법이 아니다. ✅ input 태그에 name을 설정하고 이벤트가 input 태그에 name을 설정하고 이벤트가 발생했을 때 name의 값을 참조하면 더 간단하게 구현할 수 있다. ✅ 단, useState에서는 문자열이 아니라 객체형태의 상태를 관리해줘야한다. 리액트에서 객체를 수정하는 방법 inputs[name] = value; ✅ 위의 코드처럼 값을 직접 수정하면 안 된다. ✅ 기존 값을 직접 수정하게 되면 값을 바꿔도 리렌더링이 진행되지 않는다! 🤔 그럼 어떻게 할까? ✅ 새로운 객체를 만들어서 그 객체에 변화를 주고 이를 상태로 사용해야한다 ..

Programming/React 2023. 5. 30. 21:59

조건부 렌더링이란? ✅ 특정 조건에 따라 다른 결과물을 렌더링 하는 것 Hello 컴포넌트를 통해 실습 ✅ isSpecial이라는 props를 받도록 구현 ✅ isSpecialdl true면 '특별한' 이라는 글자가 노출되고 false면 비노출되게 처리 cf) JSX에서 null, false, undefined 값을 렌더링하게 되면 아무것도 나타나지 않게 된다. 삼항연산자를 사용한 방법 ✅ 삼항연산자는 주로 특정 조건에 따라 보여줘야하는 내용이 다를 때 사용한다. // Hello.js export default function Hello({ isSpecial }) { return ( {isSpecial ? 특별한 : null} Hello!!!!!!! ); } &&연산자를 사용한 방법 ✅ 이처럼 내용이 달..

Programming/React 2023. 5. 30. 17:28