그냥 하나에서 아래 내려주는 그런건 이상한건가? import { useState } from 'react'; function Panel({ title, children }) { const [isActive, setIsActive] = useState(false); return ( {title} {isActive ? ( {children} ) : ( setIsActive(true)}> Show )} ); } export default function Accordion() { return ( Almaty, Kazakhstan With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was it..

state 구조화 한번도 생각해보지 않았던 부분이다. 초창기 값이 무시된다는 걸 알 수 있도록 명명한다. 초기에만 들어오고 state color에 값이 들어오면 수정됨 이런 실수는 할 수 있을 것 같음; 지금 initialItems 가 items에 들어가 있는데 items[0]가 아래 state로 관리되고 있음. 중복되는데 input에 변해도 아래 ui가 안변함 선택된 아이템의 아이디를 찾아서 value를 변경시켜 다시 저장 그리고 리렌더링 되고 아래 메시지도 변경 import { useState } from 'react'; import { initialTravelPlan } from './places.js'; export default function TravelPlan() { const [plan, ..

선언형과 명령형의 차이 역시 리액트 공식문서, 하나하나 다 설명해준다.... 하나하나 다 설명하면 오류가 발생하기 쉽기 때문에 UI를 직접 조작하지 않는 방식 대신 표시할 내용 자체를 선언하는 방식으로 React가 개발 되었다. 택시를 타고 택시 기사에게 목적지만 말하면 알아서 처리해준다. 내부적으로 리액트가 알아서 처리해준다. 조건에 따라서 UI가 달라진다. 로딩, 데이터 온, 데이터 X, 에러 너무 복잡한 것을 안해봐서 그런가? 자연스럽게 이렇게 생각하고 있었다. state에 대한 고려를 어떻게 하는지 배웠다.

기존 객체랑 똑같음 새 배열을 만들어서 map, filter 는 얕은 복사로 원본 배열을 변화시키지 않음 역시 리액트 뭐 사용하라고 배열 함수까지 알려준다. 사실 이전 프로젝트에서 sort를 썼는데 복사하고 쓰라고 한다. 더할 때는 스프레드 문법을 사용한다. 제거할 때는 filter를 사용한다. 이거는 주의를 해야할듯 맵하고 if를 사용하여 원하는 조건을 만들어준다. 백에서 비즈니스 코드를 안적어주면 잘 처리해서 해야겠다. 원소의 순서를 바꾸는 것은 괜찮지만 원소 내용을 바꾸는 것은 문제가 되기 때문에 최상위 수준까지 복사본을 만들라고함 map, if로 소팅한다. 부끄러운 기억이 있네; 변화를 많이 가져야하는 경우면 useImmer를 사용해야될 듯하다. useState보다

useCallback이나 useMemo는 불필요한 렌더링을 막기위해 사용된다. 컴포넌트 함수 호출이 필요한 경우에만 호출되야 렌더링 최적화를 이뤄낼 수 있다. 둘의 차이는 간단한데 이름에 나와 있다싶이 콜백은 함수이고 메모는 값이다. 내용은 역시나 별코딩 강의를 통해서 학습했다. 진짜 쉽게 이해시켜주는데 다시 좀 콘텐츠를 만드셨으면 한다. 리액트는 기본적으로 상태가 변하면 렌더링을 다시한다. 아래 코드에서보면 하드 넘버와 이지넘버가 상태로 지정되어 있는데 각 input의 값이 변하면 상태가 변하므로 app함수는 새로 호출될 것이다. 근데 생각해보면 하드넘버가 변하는데 easyCalculate 함수가 호출되는 것은 매우 비효율일 것이다. 반대도 마찬가지이다. 그래서 이지넘버, 하드넘버를 기억시켜 새로 함수..

react-query를 강의에서 배웠지만 한 번 까먹었다. 사실 코드상 어렵지는 않은 데 어색해서 까먹었다. 근데 한 번 까먹으면 두 번 까먹기 쉬우므로 기록을 남긴다. 그리고 카카오도 쓰니 중요한 라이브러리 인 것 같다. import React from "react"; import ReactDOM from "react-dom/client"; import { QueryClient, QueryClientProvider } from "react-query"; import { ThemeProvider } from "styled-components"; import App from "./App"; import { RecoilRoot } from "recoil"; const queryClient = new Quer..