useState를 통해 변수와 해당 변수를 관리하는 콜백 함수를 통해 상태 변경에 대한 연습과 리렌더링이 되는 과정을 실습했었다. useState외에도 다른 훅들을 간단히 정리해보자.리렌더링 조건우선 리액트에서 리렌더링이 되는 조건으로는 다음과 같이 정의할 수 있다. 컴포넌트에서 state의 변경컴포넌트에서 Props의 변경부모 컴포넌트에서의 리렌더링은 자식 컴포넌트까지 영향을 미친다.위와 같이 하나의 상태를 변경하고나면 해당 상태만 변경하는 것이 아니라 다른 요소들도 리렌더링이 되는데 이는 불필요하게 비용이 발생시킨다, 따라서 최적화를 필요로하게 되고 대표적인 방법으로 memo를 통해 최적화를 하는 방법들이 존재한다. React.memo : 컴포넌트 캐싱 - 해당 컴포넌트의 state 변경 시 prop..

주말동안 리액트 관련 강의와 더불어 CRUD 제작을 복기하고자 글로 남긴다.일단 오늘 간단한 투두리스트를 만들면서 리액트 문법에 익숙해지고자 했다.작동이 동작하지 않았던 코드를 위주로 살펴보고 현재 추가와 삭제 기능을 구현하였다. import { useState } from "react";import "./App.css";function App() { const [todo, setTodo] = useState([]); //할 일 목록 저장 const [newTodo, setNewTodo] = useState(""); const addTodo = (e) => { e.preventDefault(); setTodo([...todo, { id: Date.now(), schedule: newTo..

올림픽에서 국가별 메달을 입력하고 저장,로드가 가능한 CRUD를 만들었다. 제작하면서 CSS를 화려하게 넣고싶었지만 디자인을 못하니 레퍼런스를 뒤져가며 찾아볼 수 밖에 없었다. 기능적인 구현도 마찬가지이지만 컴포넌트별 분리시에도 꽤나 고생했었다.1. 컴포넌트 분리기존에 해왔던 분리하고하면 함수 단위로 파일을 나눈 정도가 다이다. Props를 부모와 자식간에 넘겨주는 방식조차도 하지 못했고 심지어 이번 과제때는 자식간 Props를 넘겨주는 과정에서 분리를 하려다보니 정말 최악의 리팩토링 결과만을 보고말았다.지난 포스팅에서 최악의 Props를 넘기는 방법을 보고나서 완전한 분리는 하지않더라도 최대한 해보고자 나누었다.UI별로 먼저 나누고 기능별로 나누고자 했지만 동적으로 생성되는 '삭제' 버튼은 자식 컴포넌..

리액트를 위한 개인과제로 국가별 올림픽 메달을 입력받고 리스트에 등록하는 과제를 하고있다.리팩토링을 하기 위해 코드를 나누기 전의 코드이다.import { useState } from "react";import "./App.css";import Button from "@mui/material/Button";import Table from "@mui/material/Table";import TableBody from "@mui/material/TableBody";import TableCell from "@mui/material/TableCell";import TableContainer from "@mui/material/TableContainer";import TableHead from "@mui/mate..

CRUD를 위한 개발에서 Create,Read,Delete에 대한 작업을 간단하게 작성했다.js 확장자에서 작성하던 코드랑 사뭇 달라서 많이 연습해야할 것 같다. 지금 뭔가 머릿 속에서 정리가 안 된 탓인지 코드 보기가 힘들다.import { useState } from "react";import "./App.css";function App() { const initialState = [ { id: 1, name: "John", age: 20 }, { id: 2, name: "Doe", age: 21 }, ]; const [users, setUsers] = useState(initialState); // TODO: 이름과 나이를 각각 상태로 정의하세요. 초기값은 빈문자열("")입니다. ..

매일 아침마다 자체 제작한 코딩 테스트 문제를 풀고있는데 part2로 넘어오니까 어려워진 것이 느껴진다.기존에 알고있는 메서드 같은 것도 심화해서 사용하거나 잘 안 쓰이는 코드도 사용해야하다보니 어렵게 느껴진 것 같다.오늘 풀었던 문제는 다음과 같았다. * 1) mergeObjects(...objs) 함수는 여러 개의 객체를 받아서, * 뒤에 오는 객체의 동일 키로 앞쪽 객체의 값을 덮어쓰는 방식으로, * 모든 객체를 하나로 합칩니다. * 2) 이때 합쳐진 최종 객체를 반환하며, 원본 객체들은 수정하지 않아야 합니다. * 3) 얕은 복사 수준이면 충분합니다. * * 예시: * const a = { x: 1, y: 2 }; * const b = { y: 3, z: 4 }; * merg..

리액트는 라이브러리이다. 뷰와 앵귤러를 프레임워크라하고 리액트는 라이브러리하고 이유에는 다음과 같은 차이가 있다. 라이브러리공통 기능의 모듈화가 이루어진 집합프레임워크기능 구현에 중점적인 프로그래밍적 재원을 지원하는 기술 이해하기 쉽게 설명하자면 라이브러리는 프레임워크라고 하기에는 제공하는 기술이 부족하고, 다른 기능들을 불러와 사용한다. 상태관리를 위한 Redux, 라우팅을 위한 React-route-dom 등의 여러 라이브러리를 쓴다.특정 애플리케이션을 개발한다고하면 리액트는 UI를 렌더링하는 역할을 할 뿐 애플리케이션을 아우를는 아키텍처에 대해서는 제어할 수가 없다. 리액트는 애플리케익션의 흐름과 구조를 제어하며 앞서 말한 Redux와 같은 다른 라이브러리를 가져다 사용하는 것이 일반적이다. SPA..

자바스크립트에서 실행 컨텍스트는 크게 스택과 큐로 나눌 수 있다. 싱글 스레드인 자바스크립트 엔진 특성상 병렬처리를 하기 위해 비동기적 프로그래밍을 통해 코드를 처리할 수 있다. const foo = () => { console.log("Execute foo"); return Promise.resolve("foo");};async function bar() { console.log("Before await"); const fooValue = await foo(); console.log(fooValue); console.log("After await");}console.log("First");bar();console.log("Second"); 위의 코드의 결과를 직관적으로 예측하기 어려운 이유도..

오늘은 자바스크립트 실습 내용을 하면서 버벅이다보니 위의 주제들을 정리해야겠다.속도가 느린 것이 내 발목을 잡는다, 타자가 느린 것도 있겠지만 대략적인 접근법만 알고 구현력은 떨어지는 것이 문제다. 오늘 다룰 것은 다음과 같다.This 바인딩ScopeClass자바스크립트에서 클래스 쓰는 걸 많이 보지는 못했지만, 지식을 늘리는게 특정 목표만 이룰려고 배우는 것이 아니므로 일단은 배우자. 내가 알고있는 스코프는 범위이다. 말 그대로 중괄호로 구분되고 변수나 함수가 참조하는 영역이자 범위이다.하지만 함수 스코프, 블록 스코프가 있다. 함수 스코프, 블록 스코프함수 스코프는 함수 내에서 선언된 변수가 함수 내에서만 유효하다는 것을 의미한다. 대표적으로 var 키워드는 함수 스코프이다. ES6에서 추가된 let..

데일리 알고리즘을 풀면서 느끼는 것은 절망뿐이다.오늘의 문제다. https://school.programmers.co.kr/learn/courses/30/lessons/12977 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr소수를 판별하는 문제다. 문제를 요약하자면 다음과 같다. 숫자가 담긴 배열이 매개변수로 넘겨진다.숫자가 담긴 배열에서 서로 다른 3개의 수를 뽑아 합한다.합한 수가 소수임을 판별하고 그런 수들이 몇 개인지 반환한다. 이제는 검색을 통해 다른 사람들의 풀이를 보고 지피티의 도움을 받아 힌트만 받아서 풀도록 했다.문제를 풀면서 가급적 하나의 함수로 반환하는 것이 좋은지 아니면 그냥 내 ..