하얀성의 개발 메타인지

useCallback() hook의 하나.아래의 변수 5개 중 1개라도 바뀌면 새로운 변수를 포함한 새로운 함수를 만들어줌.그렇지 않으면 그대로 기존 함수를 기억했다가 불러옴.(캐싱) 리랜더링을 막기위함. 그리고 디버깅을 원활히 하기 위함. const onSubmit = useCallback(    async (e) => {      e.preventDefault();      console.log(email, nickname, password, passwordCheck, mismatchError)    },    [email, nickname, password, passwordCheck, mismatchError],

state가 어디에 있어야 할지 파악하기  앱에서 최소한으로 필요한 state 데이터를 식별한 후에는, 이 state를 변경하는 데 책임이 있는 컴포넌트, 즉,state를 ‘소유’하는 컴포넌트를 식별해야 합니다. 기억하세요: React는 컴포넌트 계층 구조를 따라 부모 컴포넌트에서 자식 컴포넌트로, 아래로 내려가는 단방향 데이터 흐름을 따릅니다. ■ 애플리케이션의 각 state에 대해:해당 state를 기반으로 렌더링하는 모든 컴포넌트를 찾으세요.가장 가까운 공통 상위 컴포넌트, 즉,계층상 그 state의 영향을 받는 모든 컴포넌트들의 위에 있는 컴포넌트를 찾으세요.state가 어디에 위치할지 결정합시다:대개 공통 부모에 state를 그대로 둘 수 있습니다.혹은 공통 부모보다 더 상위 컴포넌트에 stat..

새로 알게된 사실 1. react strictmode 는 프로덕션 나갈땐 없애준다.export default function MyButton() {  function handleClick() {    alert('You clicked me!');  }  return (    button onClick={handleClick}>      Click me    button>  );} onClick={handleClick}의 끝에 괄호가 없는 것을 주목하세요! 이벤트 핸들러 함수를 호출하지 마세요. 단지 전달만 하면 됩니다. React는 사용자가 버튼을 클릭할 때 이벤트 핸들러를 호출합니다.  use로 시작하는 함수를 *훅(Hook)*이라고 합니다. 훅은 일반 함수보다 더 제한적입니다. 컴포넌트(또는 다른 훅..

Zustand는 React 애플리케이션을 위한 상태 관리 라이브러리입니다. 이 라이브러리는 간단하고, 유연하며, 효율적인 상태 관리를 제공하도록 설계되었습니다. Zustand는 Redux나 MobX와 같은 다른 상태 관리 라이브러리보다 학습 곡선이 덜 가파르며, 설정이 간단합니다. 이는 React 컴포넌트 내부와 외부에서 사용할 수 있는 상태 저장소를 쉽게 생성할 수 있게 해줍니다. 요즘 개발자 커뮤니티에서는 Zustand와 같은 더 간단하고 유연한 상태 관리 라이브러리를 Redux보다 추천하는 경향이 있습니다. 이유는 아래와 같습니다. 간결함과 직관성: Zustand는 매우 간단한 API를 제공합니다. 이로 인해 학습 곡선이 낮아지고, 개발자가 빠르게 상태 관리를 구현하고 이해할 수 있습니다. 반면, ..

그저 작은 오류이지만, 잘 모르면 나중에 큰일나는 얘기다. 그래서 문서화한다. 아래는 map 함수의 반환값인 return을 지정해주지 않았기 때문에 undefined로 반환하게 된다. return문을 map 함수에 필히 넣어야 하는 이유이다. return ( Notes: {notes && notes.map((note) => { {note.title} ; })} ); 수정코드 return ( Notes: {notes && notes.map((note) => { return ( {note.title} ); })} ); 출력이 잘된다. https://www.youtube.com/watch?v=jjuXRSb1UT8&list=PL-LRDpVN2fZA-1igOQ6PDcqfBjS-vaC7w&index=3

LocalStorage localStorage는 웹 브라우저가 제공하는 저장소 중 하나로, 키와 값을 이용해 데이터를 클라이언트 측에 영구적으로 저장할 수 있게 해줍니다. 이 저장소는 페이지 세션이 종료되어도 데이터가 사라지지 않으며, 동일한 오리진(도메인, 프로토콜, 포트가 모두 같은 주소)에 대해 약 5MB 정도의 데이터를 저장할 수 있습니다. localStorage를 사용하면 사용자가 브라우저를 닫았다가 나중에 다시 열어도 저장된 데이터를 유지할 수 있습니다. localStorage의 주요 메서드 setItem(key, value): 주어진 키에 값을 저장합니다. key와 value 모두 문자열이어야 합니다. 이미 존재하는 키에 값을 저장하면 이전 값을 덮어씁니다. getItem(key): 주어진 ..

프로젝트를 생성할 때 처음부터 소문자로만 작성하는 것이 일반적으로 더 낫습니다. 이렇게 하면 다음과 같은 이점이 있습니다: 간소화된 프로세스: 처음부터 소문자를 사용하면 패키지 이름에 대한 추가적인 질문이나 수정 단계를 거치지 않아도 됩니다. 일관성: 프로젝트 이름과 패키지 이름 사이에 일관성을 유지할 수 있습니다. 이는 혼동을 방지하고, 프로젝트 관리를 단순화하는 데 도움이 됩니다. 규칙 준수: NPM과 같은 패키지 관리 시스템은 대문자를 포함하지 않는 소문자 패키지 이름을 권장합니다. 이는 URL과 같이 대소문자를 구분하지 않는 시스템에서의 호환성을 위한 것입니다. 대문자를 포함하면 아래처럼 Package 설정을 다시 소문자로만 재설정 해줘야 한다. npm create vite@latest √ Pro..

useEffect()의 다양한 예시들 import React, { useEffect, useState } from 'react' function Lifecycle() { const [count, setCount] = useState(0); const [text, setText] = useState(""); useEffect(()=>{ console.log("Mount!") },[]); // 맨처음 랜더링이 탄생됬을 때만 출력 useEffect(()=>{ console.log("Updatae!") }) // 값이 바뀔 때마다 계속 출력 useEffect(()=>{ console.log(`clunt is update : ${count}`) },[count]); // 특정 값이 바뀔 때마다 출력 useEffe..

결론. csr [ 클라이언트에서 부모 컴포넌트가 상태관리(db관리) / 바뀌는상태 값만 관리 대상이고, html 요소 즉 jsx 들은 안바뀌고 가상돔이 차이나는 상태만 새로 렌더링] ssr[ 서버에서 db관리 , db값 받아와서 값 원하는대로 변형해서 사이드인 ejs로 전송 /ejs는 html 사용을 위한 판데기일 뿐. 랜더링 때, 그 페이지에 데이터값과 html요소 전채 재 랜더링 실시] React의 데이터 흐름 원칙 단방향 데이터 흐름 (One-Way Data Flow): React에서 데이터는 부모 컴포넌트에서 자식 컴포넌트로만 흐릅니다. 자식 컴포넌트는 받은 props를 직접 수정할 수 없습니다. 대신, 자식 컴포넌트는 부모 컴포넌트에게 변경을 요청할 수 있습니다. Props는 읽기 전용 (Pro..

useRef는 React의 Hook 중 하나로, 렌더링 사이에 값을 "기억"하는데 사용됩니다. 주로 두 가지 주요 목적으로 사용됩니다: DOM 요소에 직접 접근: 일반적으로 React는 선언적 UI를 사용하여 DOM을 조작하지만, 때때로 직접 DOM 요소에 접근해야 할 필요가 있습니다. 예를 들어, 포커스를 설정하거나, 비디오를 재생하는 등의 작업을 할 때 useRef를 사용하여 DOM 요소에 직접 접근할 수 있습니다. 값 저장: useRef는 렌더링 간에 데이터를 저장하는데 사용할 수 있습니다. 이 때 중요한 점은 useRef로 저장된 값이 변경되어도 컴포넌트가 리렌더링되지 않는다는 것입니다. 이는 단순히 데이터를 저장하고, 리렌더링 없이 그 값을 참조하고자 할 때 유용합니다. useRef 사용 예제:..