1. 불필요하게 자꾸 호출되는 문제 발생 // 감정분석 const getDiaryAnalysis = () => { console.log('감정분석') const goodCount = data.filter((item) => item.emotion >= 3).length; const badCount = data.length - goodCount; const goodRatio = (goodCount / data.length) * 100; return { goodCount, badCount, goodRatio } } const { goodCount, badCount, goodRatio } = getDiaryAnalysis(); 감정을 계산하는 함수를 만들었는데, 우리가 일기를 수정할 때 마다 콘솔에 계속 찍히게..

1. jsonplaceholer JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com 2.App.js const getDate = async () => { const res = await fetch('https://jsonplaceholder.typicode.com/comments') .then((res) => res.json()); const ..

1. useEffect 훅 이란? 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. side Effect React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컽습니다. 대표적인 예로 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장됩니다. 요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이 없을 경우에도 영향을 최소화 시킬 수 있어서 사용자 경험 측면에서 유리하기 때문입니다. 2. 선언방법 첫번째 인자(effect)는 함수 두번째 인자는 배열(deps) import react, { u..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

vue에서는 console.log가 두번 찍힌적이 없었는데 React에선 중복으로 찍히는거다.. 파일 전체에서 console.log 쓴 곳 검색해도 분명하나 밖에 없는데 말이지!!! 그래서 구글링1초만에 알아냈다. 갓구글 1. src > index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( //

바닐라 자바스크립트에서 DOM을 조작해야하는 상황에선 getElementbyId, querySelector 같은 selector함수를 사용해서 DOM 을 선택한다. Vue.js 에서는 html 태그 속성안에 ref="title" 적고 스크립트 부분에서 this.$refs.title로 DOM 에 접근이 가능하다. 그렇다면 React에서는 어떤 방법으로 접근할까?? 1. useRef Hook 함수 사용 useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 한다. 그러면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 된다. import React, { useRef, useState } from "react"; cons..

1. state가 변수일 때 import {useState} from 'react'; const DiaryEditor = () => { let [author, setAuthor] = useState(""); let [content, setContent] = useState(""); return ( 오늘의 일기 { setAuthor(e.target.value) }}/> { setContent(e.target.value) }}> ) }; export default DiaryEditor import {useState} from 'react'; const DiaryEditor = () => { const [author, setAuthor] = useState(""); const handleAuthor = (e)..

첨부파일 {{ item }} X 1. 파일업로드 경우의 수 1. 파일을 선택X 2. 파일을 선택O 삭제X 3. 파일을 선택O 삭제O 1번의 경우 파일을 선택하지 않았으므로, formData로 값을 전달해 줄 필요가 없다. 2번의 경우 파일을 삭제 하지 않았을 때 undefined로 판단해주어서, if문 안으로 들어오게 하였다. this.dataTransfer.files === undefined 3번의 경우 this.file은 로 담긴 파일배열이고, this.dataTransfer은 삭제한 파일이 있을 때, this.file로 다시 할당시켜준다. (dataTransfer가 비교의 대상이 되는셈) 2. DataTransfer DataTransfer개체는 드래그 앤 드롭 작업 중에 드래그되는 데이터를 유지하는..

1. Props : properties 의 줄임말 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용한다. 2. 여러개의 props, 비구조화 할당 객체안에 ... 스프레드 연산자를 사용해서 전부 넘기기! import React, {useState} from 'react' const Counter = ({a, b}) => { return ( {a} {b} ) } export default Counter​ 3. defaultProps 로 기본값 설정 만약에 d의 값이 없는데 전달할려고 하면 undefined와 에러가 난다. 컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정하면 된다. 짝수 홀수 숫자에 ..

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데, 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 이번에는 useState 라는 함수를 사용해보게 되는데, 이게 바로 리액트의 Hooks 중 하나이다. Class형 컴포넌트의 길어지는 코드 길이 문제, 중복 코드, 가독성 문제 등등을 해결하기 위해 등장함 1. useState 컴포넌트에서 동적인 값을 상태(state)라고 부른다. 리액트에 useState 라는 함수가 있는데, 이것을 사용하면 컴포넌트에서 상태를 관리 할 수 있다. 이 코드는 리액트 패키지에서 useState 라는 함수를 불러와준다. useState 를 사용 할 때에는 상태의 기본값을 파라미터로 넣어..

1. React란? 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리 2. 사용하는 이유 컴포넌트 기반의 화면 구성 : 리액트는 화면의 한 부분을 컴포넌트 라는 단위로 나누어서 관리할 수 있다. 대규모 웹 애플리케이션에서 컴포넌트의 역할과 기능에 따라 따로 관리하기 용이하며, 반복되는 부분을 공통적인 부분으로 분리하여 재사용성을 높여준다. Virtual Dom : 기존에는 DOM(Document Object Model)을 조작해서 브라우저에 화면을 나타내는 형식이었다. 자체의 성능은 느리다고 할 수 없지만 매번 DOM 전체를 직접 접근하여 변화를 주면 html, css, js파일 전체를 다시 리랜더링하기 때문에 느려질 수 밖에 없었다. 그래서 리액트는 가..

보호되어 있는 글입니다.