발자취

로컬스토리지 로컬스토리지는 사용자(클라이언트) 피시에 데이터를 저장하는 방법으로 쿠키나 캐시등을 삭제하지 않는 다면 영구적으로 브라우저에 데이터를 보존할 수 있다. 사용자 개인피시에 저장하는 방식이기 때문에 컴퓨터를 해킹하지 않는 이상 보안적으로 강력하지만 아이디나 비밀번호같이 중요한 개인정보를 저장하는 것은 위험하며 보통 지속적으로 필요한 데이터인 자동 로그인등을 로컬 스토리지에 저장한다. 로컬스토리지 등록 로컬 스토리지에 객체를 등록할 경우 key3과 같이 {value:30}을 바로 쓰게되면 브라우저에서 value가 {object Object}로 출력된다.웹브라우저에서는 읽지 못하는 데이터로 등록이 되기 때문에 key4와 같이 JSON.stringify를 사용하여 직렬화 하여 사용해 줘야한다. 소스코..

라우터 설치 dom뒤에 @6는 라우터의 버전을 의미한다. React route 참고서 https://reactrouter.com/en/main/start/tutorial#setup Tutorial v6.11.0 Tutorial Welcome to the tutorial! We'll be building a small, but feature-rich app that lets you keep track of your contacts. We expect it to take between 30-60m if you're following along. 👉 Every time you see this it means you need to do something in th reactrouter.com BrowserRou..

prop drilling 이란 React 컴포넌트 트리의 일부로 데이터를 전달하기 위한 프로세스. props를 통해 데이터를 전달하는 과정에서 중간 컴포넌트는 그 데이터가 필요하지 않음에도 자식 컴포넌트에 전달하기 위해 props를 전달해야하는 과정을 말한다. 이를 해결하기 위해 React에서는 Context를 사용한다. Context 생성 const MyContext = React.createContext(value); Context Provider를 통한 데이터 공급 { //context안에 위치할 자식 컴포넌트들 }

컴포넌트 내에서 함수가 많아지고 길어지는 방법은 복잡해지기 때문에 올바른 방법이라고 할 수 없다. useReducer은 컴포넌트의 상태변화 로직을 컴포넌트 밖으로 분리하여 사용할 수 있다. reducer const reducer = (state, action) => { switch (action.type) { case 1: return state +1; case 2: return state +2; case 3: return state +3; default: return state; } ); 형식 const reducer = (상태변화가 일어나기전 status, 어떤 상태변화를 일으킬 지의 action 객체) =>{ switch(action.type){ return 새로운 상태 값 } } dispatch ..

Reac.memo는 고차 컴포넌트이다. 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다. Reac.memo은 똑같은 Prop을 전달받으면 리렌더링 하지 않는다. 문자열과 정수형에 memo 사용할 경우 import React, { useEffect, useState } from "react"; const Textview = React.memo(({ text }) => { useEffect(() => { console.log(`updatae :: text : ${text}`); }); return {text}; }); const CountView = ({ count }) => { useEffect(() => { console.log(`updatae :: count : ${count}`);..

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,{..