발자취

useMemo는 상태가 변했는 지를 확인하여 상태가 변하지 않았으면 함수를 실행하지 않게 만드는 랜더링 최적화 방법이다. import { useMemo } from "react"; const getDiaryAnalysis = useMemo(() => { console.log("useMemo 시작"); const goodCount = data.filter((it) => it.emotion >= 3).length; const badCount = data.length - goodCount; const goodRatio = (goodCount / data.length) * 100; return { goodCount, badCount, goodRatio }; }, [data.length]); deps에 data...

Mount -> Update -> UnMount 화면에 생성 -> 변화 -> 화면에서 제거 useEffect Mont & Update import React, { useEffect, useState } from "react"; const Lifecycle = () => { const [count, setCount] = useState(0); const [text, setText] = useState(""); //Mount useEffect(() => { console.log("mount"); }, []); //Update useEffect(() => { console.log("update"); }); //Update당시 조건에 따른 예외처리 useEffect(() => { console.log(`coun..

포커스 이벤트 방법 import { useRef, useState } from "react"; const DiaryEditor = () => { const authorInput = useRef(); const contentInput = useRef(); const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const hadleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }); }; const handleSubmit = () => { if (state.author.length < 1) { authorInput.current.foc..

사용자 입력 import { useState } from "react"; const DiaryEditor = () => { const [state, setState] = useState({ author: "", content: "", }); return ( 오늘의 일기 { setState({ author: e.target.value, content: state.content }); }} /> { setState({ content: e.target.value, content: state.author }); }} /> ); }; export default DiaryEditor; ... 연산자 사용 방법 import { useState } from "react"; const DiaryEditor = () =>..

React 컴포넌트는 부모의 값이 변경되면 하위 컴포넌트도 다시 랜더링 되며 자신의 값이 변경되어도 동일하게 다시 랜더링 된다. 부모에서 자식 간 Props 전달 App.js import React from 'react'; import MyHeader from './MyHeader'; import Counter from './Count'; function App() { const number = 5; const counterProps ={ a:1, b:2, c:3, d:4, e:5, } return ( ); } export default App; 자식 컨포넌트인 Counter에게 ...연산자를 사용하여 객체 자체를 넘겨줄 수 있다. 이를 props라고 한다. Counter.js import React,{..

React란? Node 기반의 Javascripts UI 라이브러리이다. React를 사용하기 위해서는 대표적인 2가지 라이브러리를 추가하여 사용하여야한다. 1. Webpack 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리 2. Babel JSX등의 쉽고 직관적인 자바스크립트 문버을 사용할 수 있도록 해주는 라이브러리 장점 1. react는 컴포넌트 방식으로 개발하기 때문에 산탄총 수술을 피할 수 있어 유지보수가 편리하다. 2. react는 선언형 프로그래밍으로 명령형 프로그래밍에 비해 절차를 하나하나 다 나열할 필요가 없어 가독성이 좋다. 대표적인 프로그래밍 - 명령형 프로그래밍(jQuery), 선언형 프로그래밍 (react) 3. Virtual dom을 사용한다. dom이란 ..