코딩연습장

CRA로 생성한 프로젝트는 테스팅 라이브러리가 자동으로 설치되어있다. 또한 기본 App.js를 위한 테스트코드도 한개가 작성되어 있다. 터미널에 npm test를 입력해보자. import { render, screen } from '@testing-library/react';import App from './App';test('renders learn react link', () => { render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument();});render은 안의 컴포넌트를 렌더링하는 함수이다.import logo from "./logo.svg";import "./A..

나만의 포켓몬 선택하기나만의 포켓몬 선택하기 - 깃허브 이번 프로젝트는 포켓몬 리스트에서 내가 원하는 포켓몬을 선택하는 페이지를 만드는 것이었다. 처음엔 props drilling으로 state를 관리하고, 그 다음으론 Context API를 사용하여 상태관리를 하고, 다음으론 redux toolkit을 사용하여 전역 상태관리를 하도록 리팩토링하였다. props drilling은 확실히 불편하다. 원하는 상위 컴포넌트에서 state와 handler을 만들고, 자식으로 쭉 내려줘야하다보니, 데이터 변경에 따른 흐름을 예측하기 어렵기도 하고, depths가 깊어질수록 더욱 파악이 어려워 진다. 반면, props drilling에서 Context로 리팩토링하며, 훨씬 편하다는 것을 느꼈다.자식 컴포넌트에게 직..

1. 화면에 뿌려줄 index.html을 생성한다.기존에 리액트에서 화면에 뿌려주듯이 사용하기 위해 root를 id로 갖는 div를 body요소 안에 만들어준다. 2. React, ReactDOM CDN 추가별도의 설치없이 CDN을 import해와 React를 사용할 수 있다. 3. JSX to JS 기존에 컴포넌트를 만들고 해당 컴포넌트를 root div에 할당해 render하는 방식이다.하지만 syntax Error가 출력된다. 이유는 뭘까?우리가 작성한 함수형 컴포넌트 방식은 JSX문법이다. 하지만 바닐라 자바스크립트는 JS를 사용한다.따라서 JSX를 JS로 바꿔주는 과정이 필요하다. 물론 이렇게 사용해도 되지만, 코드작성이 불편하므로 JSX를 JS로..

1. supabase설치yarn add @supabase/supabase-js 2. supabase에서 프로젝트 생성 3. new Project프로젝트명과 데이터베이스 비밀번호를 입력하고 생성한다. 3. Table Editor 세팅해당 프로젝트가 생성된 뒤 Table Editor을 누른다.Create a new Table을 누르고프로젝트에 알맞은 데이터 테이블을 만들고, type을 올바르게 지정한 뒤 저장해준다. 4. 데이터 직접 추가생성된 테이블에서 상단 Insert, Insert row를 눌러주면아까 만들었던 데이터 종류별로 입력할 수 있다.데이터가 잘 들어가 있다. 5. 데이터 Read하기import React, { useEffect, useState } from "react";import supa..

기존 Layout을 전체적용하고싶을 때에는 Router을 Layout컴포넌트로 감싸주었다.import React from 'react';import { BrowserRouter, Route, Routes } from 'react-router-dom';import Home from '../pages/Home';import About from '../pages/About';import Contact from '../pages/Contact';import Works from '../pages/Works';import Layout from './Layout';const Router = () => { return ( } /> } /> ..

1. React-Router-Dom 설치yarn add react-router-dom 2. 페이지 폴더 및 파일 추가 3. Router.jsx 생성shared폴더에 Router.jsx파일을 생성한 후import React from "react";import { BrowserRouter, Routes, Route } from "react-router-dom";import Home from "../pages/Home";import About from "../pages/About";import Contact from "../pages/Contact";import Works from "../pages/Works";const Router = () => { return ( ..

React의 useContext를 활용해도 전역 상태관리가 어느정도는 가능하다.하지만 프로젝트의 크기가 커질수록 useContext의 부족한 점이 드러나 우리는 라이브러리에서 제공해주는 전역상태관리를 사용하고자 한다.처음으로 redux를 사용해볼 것이다. 1. redux 설치yarn add redux react-redux 2. 폴더 및 파일 생성 3. configStore 작성import { combineReducers, createStore } from "redux";//1) rootReducer 만들기const rootReducer = combineReducers({});//2) store 조합const store = createStore(rootReducer);//3) store 내보내기export..

useState VS useRefuseState와 useRef는 둘 다 어떤 값을 저장하기 위해 사용하는 훅이다.다만, useState로 만든 state는 변경점이 있을 때마다 컴포넌트가 리렌더링되지만, useRef로 만들어진 값은 변경이 되더라도 리렌더링을 유발하지 않는다.import { useState, useRef } from "react";const App = () => { const [count, setCount] = useState(0); const countRef = useRef(0); const plusStateBtnHandler = () => { setCount((prev) => prev + 1); }; const plusRefBtnHandler =..

useEffect는 외부시스템과 컴포넌트를 동기화 할 수 있는 기능이다. 하지만 외부시스템이 관여하지 않는 경우, 우리는 effect가 필요하지 않다.따라서 불필요한  Effect를 제거하여 코드를 직관적이게 바꾸고, 실행 속도가 빨라지며, 의도하지 않은 에러를 방지할 수 있다. props 또는 state에 따라 state 업데이트하기import { useEffect } from "react";import { useState } from "react";const App = () => { const [firstName, setFirstName] = useState(""); const [lastName, setLastName] = useState(""); const [fullName, set..

https://yozm.wishket.com/magazine/detail/2688/ 알아두면 유용한 ‘리액트’ 개념과 성능 최적화 팁 | 요즘IT리액트는 프론트엔드 개발에서 가장 널리 사용되고 있는 자바스크립트 라이브러리입니다. 컴포넌트 기반 아키텍처와 가상 DOM 등의 개념을 도입하였으며, 여러 글로벌 기업이 리액트를 활용하yozm.wishket.com요즘IT의 알아두면 유용한 리액트개념과 성능 최적화 팁에 대해 정리를 해보고자 한다.  리액트의 기본 개념 1. 컴포넌트 기반 아키텍쳐- 복잡한 UI를 재사용가능한 단위인 컴포넌트로 분할하고, 각 컴포넌트는 상태(State)와 속성(prop)을 가지고 있으며, 독립적으로 작동한다.- 각 컴포넌트는 특정 기능이나 UI를 책임지며, 관심사를 분리하여 개발에 ..