잇!(IT) 블로그

useMemo - useMemo란 1. 성능 최적화를 위해 사용된다. 2. 이전 결과를재사용함으로써 렌더링 성능을 향상시킬 수 있다. 결과값이 변하지 않을 경우 리렌더링 할 때 마다 연산을 하게 되면 성능 최적화가 되지 않기 때문이다. - 위와 같이 각 일기(객체)에는 감정 점수를 할당 할 수 있고, 중간에 결과값 같이 감정에 따른 비율을 측정하는 코드를 추가할 것이다. - App.js ....... const getDiaryAnalysis = () => { console.log("일기 분석 시작"); const goodCount = data.filter((it) => it.emotion >= 3).length; const badCount = data.length - goodCount; const goo..

https://insoobaik.tistory.com/505 React - 사용자 입력 처리 / DOM 조작(useRef) / API 호출 * 아래 코드를 확인하기 전 알아야 할 것이 있다. React는 같은 레벨에서 데이터를 주고 받을 수 없기 때문에 부모 컴포넌트로 데이터를 전달하고, 부모 데이터로부터 데이터를 전달 받아야 한다. insoobaik.tistory.com - 앞서서 사용자 입력, DOM 조작(useRef), API 호출에 대해 알아보았다. - 리스트 렌더링 / 데이터 추가, 삭제, 수정 - 이번에는 받아온 데이터 리스트를 렌더링하고, 데이터 추가, 삭제, 수정 하는 것에 대해 알아 볼 것이다. - App.js ...... return ( ); } - DiaryList 컴포넌트로 onEd..

* 아래 코드를 확인하기 전 알아야 할 것이 있다. React는 같은 레벨에서 데이터를 주고 받을 수 없기 때문에 부모 컴포넌트로 데이터를 전달하고, 부모 데이터로부터 데이터를 전달 받아야 한다. - 위와 같이 Event를 통해 부모 컴포넌트에서 자식 컴포너트로부터 데이터를 전달받고, 자식 컴포넌트로 데이터를 전달하는 것을 확인 할 수 있다. - 사용자 입력, 입력 화면 - App.js import { useEffect, useRef, useState } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; import Lifecycle from "./Life..

- useState - React의 useState는 modify 즉, 수정자 함수가 호출되면 변경된 값을 기반으로 해당 컴포넌트가 렌더링되고 React에 의해 변경된 부분만 리렌더링되어 수정된다. 즉 UI가 useState에 의해 리렌더링 된다.

- JSX - JSX는 JavaScript 파일 내에 HTML과 유사한 마크업을 작성할 수 있게 해주는 JavaScript용 구문 확장이다. - JSX의 규칙 1. 단일 루트 요소를 반환한다. Hedy Lamarr's Todos ... - 최상위 태그로 를 사용하였고 를 사용해도 된다. Hedy Lamarr's Todos ... - 빈 태그를 조각이라고 한다. HTML 트리에 흔적을 남기지 않고 항목을 그룹화 할 수 있다. 2. 모든 태그는 닫아야 한다. - 자체 닫는 태그인 같은 경우 와 같이 닫는다. 3. CamelCase를 사용한다. - 이름에는 대시를 포함하거나 class와 같은 예약어를 쓸 수 없다. - class는 예약어이므로 React에서는 해당 DOM 속성의 className 이름을 따서 ..

- React.js 1. 반복적인 코드를 줄 일 수 있다. - 컴포넌트와 방식을 사용하기 때문에 중복된 코드로 인한 산탄총 수술을 할 필요가 없어진다. - 즉, React는 Component 기반의 UI 라이브러리이다. 2. 선언형 프로그래밍으로 목적을 바로 나타낸다. - 프로그래밍 방식에는 명령형 프로그래밍 (대표적으로 jQuery)가 있고, 선언형 프로그래밍에는 (React)가 있다. - 선언형 플로그래밍은 목적을 바로 나타내기 때문에 코드의 목적이 간결하고 확실해진다. 3. V irtual DOM - DOM (Document Object Model)은 태그, 아이템이 코드에 추가 될 때마다 브라우저가 웹 페이지를 보여주기 위해 동작하는 흐름이 계속해서 반복적으로 일어난다. - React는 Virtu..

- Node.js - JS는 JS 엔진 위에서 동작하게 된다. 대표적으로 Chrome의 V8 JS 엔진이 대표적인 JS 엔진이다. - JS는 웹브라우저 안에서만 동작하고 html 문서 안에서 동작하게 된다. - Chrome의 V8 엔진을 브라우저가 아닌 어디서든 사용할 수 있도록 시작한 프로젝트가 Node.js이다. - 즉, Node.js JS의 실행 환경이고 JS엔진이며 어디서든 JS를 사용할 수 있도록 도와준다. + JS로 Web Server를 생성하는 것이 가능해졌다. - 결론적으로 React는 JS 파일을 쉽게 만들어내는 기술이다. React는 Node.js를 기반으로 실행된다. https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime bui..

- 동기 & 비동기 - 동기 - Javascript는 코드가 작성된 순서대로 작업을 처리한다. - 이전 작업이 진행 중 일 때는 다음 작업을 수행하지 않고 기다린다. - 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다. - 비동기 - 싱글 쓰레드 방식을 이용하면서, 동기적 작업의 단점을 극복하기 위해 여러 개의 작업을 동시에 실행 시킨다. - 즉, 먼저 작성된 코드의 결과를 기다리지 않고, 다음 코드를 바로 실행한다. function taskA(a,b, cb) { // console.log("A 작업 끝"); setTimeout(() => { const res = a + b; cb(res); }, 3000); } function taskB(a, cb){ setTimeout(() =..

- 함수 // 콜백 함수 사용 function checkMood(mood, goodCallback, badCallback) { // 함수 파라미터로 함수를 사용할 수 있다. if(mood === "good"){ // 기분 좋을 때 하는 동작 goodCallback(); } else { // 기분 안 좋을 때 하는 동작 badCallback(); } } function cry() { console.log("ACTION :: CRY"); } function sing() { console.log("ACTION :: SING"); } function dance() { console.log("ACTION :: DANCE"); } checkMood("sad", sing, cry); let person = { nam..

* 결과부터 얘기하자면 1. @Builder + @Builder.Default 사용 - 디컴파일 부분을 확인해보면, page, size의 필드가 초기화 되어 있지 않고, builder에 의한 default에 의한 값이 설정되어 있어 파라미터로 값이 넘어오지 않으면 null이 주입된다. 2. @Builder만 사용 - 디컴파일 부분을 확인해보면 @Builder.Default가 빠지게 되면, 기본 필드에 설정한 1, 10 값이 필드에 그대로 남아 있는 것을 확인 할 수 있지만, 생성자 주입에 의해 파라미터로 아무런 값이 넘어오지 않으면 null로 초기화 된다. 3. @Builder, @NoArgsConstructor, @AllArgsConstructor 사용 - 기본 생성자가 생성되고, 매개변수로 아무런 값..