나의 개발일지

props와 state의 차이 Props와 State는 모두 컴포넌트의 데이터를 다루는 데 사용하며 일반 Javascript 객체이다 목적과 사용 방법에 차이점이 존재한다. React에서 불변성을 지키는 이유 불변성이란? 불변성의 사전적 의미는 값이나 상태를 변경할 수 없는 것을 의미 원시데이터 ( Boolean, Number, String, null, undefined, Symbol ) --> 불변성이 있다 원시데이터가 아닌 데이터( Object, Array, Function ) --> 불변성이 없다 원시데이터 불변성의 예시 1. 변수 a는 ‘data1’ 에서 ‘data2’로 변경 2. 총 2개의 메모리 영역 사용 ( 실제 메모리영역에는 ‘data1’, ‘data2’ 둘 다 존재 ) 3. 메모리 영역에..

라이프 사이클은 컴포넌트가 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 것이다. 컴포넌트는 생성(mounting) ➡️ 업데이트(updating) ➡️ 제거(unmounting)의 생명주기를 갖는다. 리액트 클래스 컴포넌트는 라이프 사이클 메서드를 사용하고, 함수형 컴포넌트는 Hook을 사용한다. 1. class component 생명주기 마운트(mount) 컴포넌트가 처음 실행이 될때 생성단계를 마운트(Mount)라고 표현을 한다. 마운트에 해당되는 생명주기에는 다음과 같은 메서드들이 있다. constructor constructor(props) { super(props); this.state = { counter: 0 }; // this.setState() 호출은 X } 컴포넌트 ..

프로젝트에서 supabase를 통해 로그인과 회원가입을 구현하는 기능을 맡았다 필수로 구현해야 하는 기능 중에 react-hook-form 을 통해 유효성 검사를 하는 항목이 있어서 시도해보기로 했다! 그렇다면, 왜 react-hook-form를 쓰는 걸까? 1. TS를 기본으로 지원한다 2. 로딩 속도가 빠르다 3. 리렌더링 수가 적다 4. 코드량이 적어진다 이러한 장점들로 form을 만들 시, 사용하기에 적합하다! 우선 react-hook-form을 이용하기 위해 설치를 해야 한다. yarn add react-hook-form npm install react-hook-form 타입스크립트를 사용하기 때문에 input의 타입을 정해준다. export type Inputs = { userEmail: st..

supabase는 이메일 뿐만 아니라 여러 소셜 로그인이 가능하다 구글 로그인을 위한 공식문서가 있다 사용법은 아주 간단! https://supabase.com/docs/learn/auth-deep-dive/auth-google-oauth Part Five: Google OAuth | Supabase Docs _10 const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'google' }) supabase.com 구글 로그인 로직 또한 공식 문서를 참조하면 된다 https://supabase.com/docs/guides/auth/social-login/auth-google Login with Google | Supabase Doc..

supabase는 오픈 소스 백엔드 서비스로 데이터베이스 및 인증, 스토리지 등 다양한 기능을 제공하는 플랫폼이다 팀프로젝트를 하면서 supabase를 처음 접해보았다 같은 팀원분이 사용해봤었는데 firebase의 공식문서보다 친절하다고 했다 써보니 무슨 말인지 잘 알 것 같다^^ supabase 설치 npm install @supabase/supabase-js yarn add @supabase/supabase-js supabaseClient.ts 파일 import { createClient } from '@supabase/supabase-js'; type SupabaseConfig = { supabaseUrl: string; supabaseKey: string; }; const supabaseConfi..

Redux-toolkit(RTK)이란 기존의 리덕스를 개량한 것이다 코드는 더 적게, 그리고 더 편하게 개발했다 기존의 리덕스와 다른 점은 Action Value와 Action Creator, Reducer가 하나로 합쳐졌다는 점이다 리덕스 툴킷 설치 // NPM npm install @reduxjs/toolkit // Yarn yarn add @reduxjs/toolkit RTK에선 Slice라는 API를 사용한다 //createSlice API 뼈대 const counterSlice = createSlice({ name: '', // 이 모듈의 이름 initialState : {}, // 이 모듈의 초기상태 값 reducers : {}, // 이 모듈의 Reducer 로직 }) RTK로 counter..

react-memo memo(React.memo) : 컴포넌트를 캐싱 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트는 모두 리렌더링 되는데 자식 컴포넌트는 바뀐 것이 없는데 리렌더링이 된다면 너무 비효율적임 이러한 문제점을 돕는 게 바로 memo다 src > App.jsx import { useState } from "react"; import Box1 from "./components/Box1"; import Box2 from "./components/Box2"; import Box3 from "./components/Box3"; function App() { console.log("App 컴포넌트가 렌더링되었습니다"); const [count, setCount] = useState(0); const o..

useContext의 필요성 props-drilling의 문제점을 개선 하기 위해 필요하다 useContext는 전역 데이터 관리를 할 수 있게 되었다 주의할 점 useContext를 사용할 때, provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링이 되기 때문에 value부분을 항상 신경써줘야 한다! 할아버지가 손자에게 어떠한 정보를 주기 위해서 거쳐야 하는 과정은 App → GrandFather → Father → Child 이다 단순한 정보이면 모를까 전달해야 할 데이터가 100가지가 넘는다면 너무나도 복잡하고 비효율적일 것이다 Props-drilling 적용 코드 src > App.jsx import GrandFather from "./co..

staleTime > 0인 경우, 가져온 데이터는 그 시간 만큼 fresh한 것으로 간주 staleTime = 0인 경우, 가져온 데이터는 즉시 stale한 것으로 간주 inActive - 특정 쿼리에 대한 모든 옵저버(observer)가 제거되었을 때 발생 - 해당 데이터를 사용하는 컴포넌트가 더 이상 마운트되지 않거나 해당 쿼리를 구독하는 컴포넌트가 없을 때 이 상태에서는 데이터가 캐시에서 자동으로 삭제되기 전까지 일정 기간 동안 유지 - inActive 에서 다시 fresh 상태가 될 수 있다! : 이전에 사용되었던 쿼리 키를 가진 컴포넌트가 재마운트 되면 해당 쿼리는 다시 활성화가 된다 이때 staleTime이 아직 지나지 않았다면 데이터는 여전히 fresh 상태로 간주된다 staleTime 기본..

yarn add axois yarn add json-server json-server --watch db.json --port 번호 yarn add react-query src > App.jsx import React from "react"; import Router from "./shared/Router"; import { QueryClientProvider, QueryClient } from "react-query"; const queryClient = new QueryClient(); const App = () => { return ( ; ); }; export default App; QueryClientProvider : 데이터를 읽어오는 기능(QueryClient)을 ..

todos.js import uuid from "react-uuid"; const initialState = [ { id: uuid(), title: "리액트", content: "이해하기", isDone: false, }, { id: uuid(), title: "리덕스", content: "사용하기", isDone: false, }, { id: uuid(), title: "열심히", content: "공부하기", isDone: true, }, ]; // action items const ADD_TODO = "ADD_TODO"; const DELETE_TODO = "DELETE_TODO"; const SWITCH_TODO = "SWITCH_TODO"; // action creator // action은 ..

과제 해설 영상 보면서 따라하는데 계속 오류가 떴다 십분 넘게 찾는데 아예 못 찾겠어서 튜터님이랑 함께 찾아봤다 map 함수 쓰기 전에는 오류가 나질 않았으니 이 부분이 분명 오류가 있었던 것이다 props의 문제일까 싶어서 다 콘솔로 찍어봤는데 들어와있어야 할 곳에 undefined라고 찍혔다 드디어 발견 .. 미친거니? 심지어 return 안함 ...... 수정 했더니 오류 해결 완료 넘 급한 마음에 잘 안 보였던 걸까...ㅠㅠ 실수를 줄이자!

Redux가 필요한 이유 useState의 불편함 - 반드시 부모-자식 관계가 형성돼있어야 한다 - 조부모에서 손자 컴포넌트로 보낼 시 반드시 부모 컴포넌트를 거쳐야 한다 - 자식--> 부모로 보낼 수 없다 하지만 redux를 쓰게 된다면 중앙 state 관리소에서 생성된 Global state에서 불러와서 사용할 수 있다! 어느 특정 컴포넌트에 종속되어 있지 않다 유지보수성이 좋아진다. 리덕스 패키지 설치 git bash에 yarn add redux react-redux 입력 후 설치 --> package.json 에서 확인 --> 폴더 생성 counter.js // 초기 상태값(state) // const [number, setNumber] = useState(0) const initialState ..

JSON은 자바스크립트 강의 들을 때도 봤었고 특히 과제할 때 썼던 기억이 있어서 나름 들을만 했다 그리고 이제서야 뭔가 완벽하게 이해된 것 같아서 해소가 되었다 까먹지 않기 위해 바로바로 TIL 작성하기 JSON 이란 자비스크립트 객체 문법에 토대를 둔, 문자 기반의 데이터 교환 형식을 말한다 다양한 형태의 구조를 가질 수 있다 원시 자료형인 문자열, 숫자, 불리언을 가질 수 있고 중첩된 계층 구조 포함한다 하지만 객체는 아니다! 객체 구조를 가진 것일 뿐 JSON에서는 ( " " )만 허용된다 ( ' ' --> X ) JSON -> 문자열 형태 -> 서버-클라이언트 간 데이터 전송 시 사용한다 JSON은 본래의 모습으로는 전송이 되지 않는다 파싱(parsing) 과정이 필수 1. JS 객체를 JSON..

useState  리액트 훅에는 여러가지 종류가 있는데우선 공부할 것은 이젠 나름 익숙한 useState 이다! useState의 기본 형태는const [state, setState] = useState(initialState);  ❗ ⭐ useState에서 짚고 넘어가야 할 포인트 1️⃣state는 변수, setState를 이용해 state의 값을 수정한다!그리고 state가 만약 원시데이터가 아닌 객체 데이터 타입인 경우그토록 강조하는 불변성을 유지해야 한다!  // 가장 기본적인 Hook// 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함// 카운터 , TodoList// const[state, setState] = useState(초기값);// 함수형 업데이트란?import "./App.css";..

styled component 외에 스타일링 할 수 있는 또 다른 방법이 있는데 바로 🔥 GlobalStyles (전역스타일링) 이다 ▼ TestPage.jsx 우선 TestPage.jsx 라는 컴포넌트에 스타일을 적용한다 import React from "react"; import styled from "styled-components"; //부모 컴포넌트에서 받은 정보를 props한다 function TestPage(props) { return ( //리렌더링 {/* Title 컴포넌트에서 정보를 받아서 렌더링 {} 안에 부모컴포넌트 정보 받아서 렌더링 */} {props.title} {props.contents} ); } const Title = styled.h1` font-size: 1.5rem;..

본격적인 React 수업이 시작되었다 이건 커리큘럼은 정말 실무적인 내용이 담겨 있다고 해서 얼마나 어려울까 하는 긴장감을 가지고 시작했다 우린 자바스크립트 내에 있는 className 태그를 사용해서 css를 꾸며주었다. (혹은 인라인을 이용해서!) 하지만 이 방식은 많은 컴포넌트를 생성해야 한다는 점에서 불편함을 느껴 CSS-in-Js라는 방식을 만들었다고 한다. 💡 CSS-in-Js 방식이란? 단어 그대로 js 코드로 CSS코드를 작성하여 컴포넌트를 꾸는 방식이다 우선 styled-components 설치하고 터미널에서 yarn add styled-components 의 명령을 입력해서 패키지를 설치한다! ❗styled-components : CSS-in-Js 방식으로 컴포넌트를 꾸밀 수 있게 도와..

나는 todoList에서 새로운 리스트를 작성할 때마다 할당하는 id 값을 Date.now()를 써서 중복되지 않도록 했었다 하지만 개인과제 해설영상을 보고 새로운 함수를 알게 되었다 💡UUID란 ( Universally Unique IDentifier ) 범용 고유 식별자의 약자로 고유한 아이디 값을 생성할 때 사용할 수 있다 특히 컴포넌트에 고유한 키를 요구하는 리액트로 개발할 때 유용하게 사용할 수 있는데 react-uuid라는 모듈과 함께 uuid 함수 생성할 수 있도록 제공한다 ✔️How to use npm install react-uuid 혹은 yarn add react-uuid 로 모듈 설치 후 id 값을 할당해주어야 하는 파일 내에서 import 를 받아 함수를 실행시키면 된다

//React 강의 복습 import React from "react"; function App() { const name = "상위컴포넌트이름"; return ; // 새로운 이름을 정하고 App에서 User로 정보를 전달한다 } //컴포넌트는 대문자 function User(props) { return {props.comp_name}; // props.로 정보를 전달받는다! {} 필수! } export default App; //------------------------------------------------------------------------------ import React from "react"; //부모 function App() { return 안녕하세요 //컴포넌트 사이에 낀 ..

불변성을 지키는 것이 중요하다! 불변성은 메모리의 있는 값을 변경할 수 없는 것을 말한다 자바스크립트의 원시 데이터는 문자열, 숫자, 불리언 타입 등이 있는데 우선 결론적으로 말하자면 원시데이터는 불변성이 있다 반대로 원시데이터가 아닌 배열, 객체, 함수는 불변성이 없다! ▶ 불변성이 있다! let num = 1; 메모리에는 1이 라는 값이 저장되고 , num이라는 변수는 메모리에 있는 1을 참조! 그리고 재선언 let num2 = 1; num === num2 의 결과값은 true이다! 즉, num의 메모리 주소에 이미 1이라는 값이 할당이 되었고 같은 값으로 재선언을 해도 메모리 주소가 변하지 않고 이미 생성되어 있는 1이라는 값을 참조한다! --> 같은 메모리 값을 바라보고 있는 것이다 즉, 기존 메..

오류 발생 및 문제 해결 / 주의할 점 1. 컴포넌트를 만들었는데 랜더링이 되지 않고 오류만 떴다 오류를 보니 리액트 컴포넌트 이름의 시작은 대문자로 해야 한다고 한다 오류를 고치고 나니 그제서야 강의해주신 것이 떠올랐다,,!! 잘 기억해두자 2. 절대경로와 상대경로 Child.js 파일을 만들고 import를 했는데 오류가 났다 튜터님께 도움을 요청하니 절대경로 파일을 만들지 않았고 Child 파일의 경로 표기가 잘못되었다고 하셨다 같은 디렉토리에 위치해있으니 내가 수정해야 하는 것은 "Child" 에서 "./Child" 로 수정 이건 기본 중에 기본인데 이제서야 생각나서 조금 민망했다^^ ./ : 현재 디렉토리 위치 ../ : (상대경로) 상위 위치 (한 단계 뒤로 가기) 그리고 절대경로 파일을 만드..

자바스크립트가 끝나고 오늘 첫 리액트 수업이었다! CRA를 통해 기초 파일들이 자동으로 세팅되는 게 너무 신기해서 저절로 박수가 나왔다. 튜터님도 첫 세팅을 축하한다고 말씀하셨다ㅋㅋㅋ 우선 오늘 TIL의 내용은 리액트를 다루면서 주의해야 할 점들과 개념들 위주로 작성할 예정이다 1. React에서 자주 사용되는 ES6 필수 문법 (1)Object 선언, 단축 속성, 객체 복사 - 가장 중요한 것은 object는 key-value pair !!! // 객체 선언 방법 const person = { name: "희원", age: 26, MBTI: "isfj", // dosomething: () => {} // 함수도 value값이 될 수 있다 }; // 생략해서 표현하는 방법 const name = "희원"..