react

✅ some()배열 요소 중 하나라도 조건을 만족하면 trueconst arr = [1, 2, 3, 0]; const result = arr.some(num => num === 0); // true (0이 있음)해석: "이 배열에 0이 하나라도 있냐?" → 있다! → true✅ every()배열의 모든 요소가 조건을 만족해야 trueconst arr = [1, 2, 3, 4]; const result = arr.every(num => num > 0); // true (모두 0보다 큼)해석: "이 배열의 모든 요소가 0보다 크냐?" → 그렇다 → true비교 예시:const arr = [1, 2, 0]; arr.some(n => n === 0); // true (0이 있음) arr.every(n => n ..

https://velog.io/@eunjin/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B7%B8%EB%9E%98%ED%94%84%EC%B0%A8%ED%8A%B8-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EB%AA%A8%EC%9D%8C [React] 리액트 그래프/차트 라이브러리 모음기업협업 프로젝트에서 다양한 차트 라이브러리를 사용해야 해서 직접 사용해 본 라이브러리나 리액트 개발자들 사이에서 유명한 라이브러리를 모아 보았다. https://nivo.rocksNivo.rocks커스텀 끝판velog.io 그대로 복사한 글입니다.  기업협업 프로젝트에서 다양한 차트 라이브러리를 사용해야 해서 직접 사용해 본 라이브러리나 리액트 개발자들 사..

12.2) 페이지 라우팅 1. 소개      서버가 사용자들에게 제공할 여러 개의 페이지를 미리 가지고 있는 이러한 방식을 여러 개의 페이지를 갖는 어플리케이션이다라는 뜻에서 멀티 페이지 애플리케이션(MPA)라고 부른다. MPA방식에서 브라우저가 새로운 페이지를 요청했을 때 서버에서 미리 완성해놓은 HTML 파일을 보내주면 브라우저가 그것을 그대로 렌더링하는 방식은 서버 측에서 페이지를 미리 렌더링 해준다라고 해서 서버 사이드 렌더링이라고 부른다. 💡 MPA vs. 서버 사이드 렌더링오른쪽처럼 서버가 여러 개의 HTML페이지를 가지고 있는걸 MPA 방식이라고 부른다.이러한 MPA방식에서 브라우저가 페이지를 요청했을 때 가운데 있는 것처럼 미리 완성되어 있는 페이지를 응답해주는 방식을 서버 사이드 렌더링..

11.1) Context란 Props의 단점 1. Props Drilling데이터를 가져올 때 중단 다리를 거쳐서 Props를 가져와야함.. 만약 서비스의 규모가 커지게 되어서 지금처럼 List컴포넌트와 TodoItem 컴포넌트 사이에 굉장히 많은 컴포넌트들이 존재하게 된다면 이때에는 많은 컴포넌트를 거쳐서 데이터를 전달해야하기 때문에 타이핑해야하는 양이 많아진다.심지어 Props의 이름이 중간에 바뀌기라도 한다면 모든 컴포넌트를 찾아가서 일일이 이름을 바꿔줘야 한다. 해결방법 React Context컴포넌트 간의 데이터를 전달하는 또 다른 방법.기존의 Props가 가지고 있는 단점을 해결할 수 있음.💡Props의 어떤 단점을 가지고 있길래? => Props Drilling을 해결Context는 일종의..

10.2) useMemo와 연산 최적화"메모이제이션"기법을 기반으로 불 필요한 연산을 최적화 하는 리액트 훅특정 연산의 결과 값을 기억해 둘 수 있다.자매품: useCallback메모이제이션(Memoization)? 기억해두기, 메모해두기   import "./List.css";import TodoItem from "./TodoItem";import { useMemo, useState } from "react";const List = ({ todos, onUpdate, onDelete }) => { const [search, setSearch] = useState(""); const onChangeSearch = (e) => { setSearch(e.target.value); }; const..

💡useReducer컴포넌트 내부에 새로운 State를 생성하는 React Hook모든 useState는 useReducer로 대체 가능상태 관리 코드를 컴포넌트 외부로 분리할 수 있음      import { useReducer } from "react";// # 3번: 상태를 어떻게 변화시킬지 적용// reducer : 변환기// -> 상태를 실제로 변화시키는 변환기 역할function reducer(state, action) { // if (action.type === "INCREASE") { // return state + action.data; // return만 해주면 값은 자동으로 state값으로 반영된다. // } else if (action.type === "DECR..

리액트 컴포넌트에도 라이프 사이클이 있다. Mount - like. 탄생 - 컴포넌트가 탄생하는 순간 - 화면에 처음 렌더링 되는 순간"A컴포넌트가 Mount 되었다!" → A 컴포넌트가 화면에 처음으로 렌더링 되었다. Update - like. 변화 - 컴포넌트가 다시 렌더링되는 순간 - 리렌더링 될 때를 의미"A 컴포넌트가 업데이트 되었다!" → "A 컴포넌트가 리렌더링 되었다." UnMount - like. 죽음 - 컴포넌트가 화면에서 사라지는 순간 - 렌더링에서 제외되는 순간 "A 컴포넌트가 언마운트 되었다!" → "A 컴포넌트가 화면에서 사라졌다."   💡 라이프 사이클 제어컴포넌트의 라이프 사이클의 단계별로 컴포넌트들이 각각 다른 작업을 수행하도록 한다.   7.2) useEffect 사용하..

6.3) 기능 구현하기1. 리액트에서 화면을 구성할 때 여러 개의 컴포넌트들이 서로 부모와 자식 관계를 이루며 계층 구조를 형성한다. 2. 특정 컴포넌트가 다른 컴포넌트에게 데이터를 전달하려면 반드시 두 컴포넌트는 서로 부모 자식 관계를 가지고 있어야 한다. 3. 그렇기 때문에, 하나의 state를 여러 컴포넌트에서 관리하게 될 경우 이 state는 반드시 이런 컴포넌트들의 공통 부모가 되는 곳에서 만들어야 한다.Viewer와 Controller는 형제관계?이기 때문에 props를 공유할 수 없다!💡State Lifting (State 끌어올리기)이렇게 state를 계층 구조상에서 위로 끌어올려서 그 아래에 있는 컴포넌트들이 모두 공유할 수 있도록 만드는 이러한 방법을 state Lifting(Stat..

JSX로 UI 표현하기 jsx(JavaScript Extensions)란?확장된 자바스크립트의 문법  jsx파일에서는 자바스크립트와 HTML을 혼용하여 사용가능하게 한다.   💡JSX 주의 사항1. 중괄호 내부 자바스크립트 표현식만 넣을 수 있다. 삼항 연산자나 변수의 이름처럼 특정 값으로 평가될 수 있는 코드(if문, for문 안됨)2. 숫자, 문자역, 배열 값만 렌더링된다.(boolean, undefined, null은 오류는 발생하지 않지만, 화면에 렌더링도 안됨/객체는 화면에 바로 렌더링 되지 않고 값을 뺴와서 해야함)3. 모든 태그는 닫혀있어야 한다.4. 최상위 태그는 반드시 하나여야만 한다.// JSX 주의 사항// 1. 중괄호 내부 자바스크립트 표현식만 넣을 수 있다.// 삼항 연산자나 변..

React.js란?Meta(Facebook)이 개발한 오픈소스 JavaSecript 라이브러리대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술 React.js 특징1. 컴포넌트를 기반으로 UI를 표현한다. 2. 화면 업데이트 구현이 쉽다. 3. 화면 업데이트가 빠르게 처리된다.  특징 1. 컴포넌트를 기반으로 UI를 표현한다.컴포넌트(Component): 구성요소, 화면을 구성하는 요소, UI를 구성하는 요소를 말중복을 줄일 수 있다. 특징 2. 화면 업데이트 구현이 쉽다.선언형 프로그래밍: 과정은 생략하고 목적만 간결히 명시하는 방법(식당에서 주문하는 것과 유사함((과정은 모르겠고!)토마토 파스타 하나 주세요.)) ↔ 명령형 프로그래밍: 목적을 이루기 위한 모든 일련의 과정을 설명하는 ..