티스토리

Beyond Code
검색하기

블로그 홈

Beyond Code

beyondcode.tistory.com/m

This is my dev journey.

구독자
0
방명록 방문하기

주요 글 목록

  • [공식문서 공략] Sharing State Between Components 그냥 하나에서 아래 내려주는 그런건 이상한건가? 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.. 공감수 0 댓글수 0 2023. 9. 14.
  • [공식문서 공략] Choosing the State Structure 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, .. 공감수 0 댓글수 0 2023. 9. 13.
  • [공식문서 공략] Reacting to Input with State 선언형과 명령형의 차이 역시 리액트 공식문서, 하나하나 다 설명해준다.... 하나하나 다 설명하면 오류가 발생하기 쉽기 때문에 UI를 직접 조작하지 않는 방식 대신 표시할 내용 자체를 선언하는 방식으로 React가 개발 되었다. 택시를 타고 택시 기사에게 목적지만 말하면 알아서 처리해준다. 내부적으로 리액트가 알아서 처리해준다. 조건에 따라서 UI가 달라진다. 로딩, 데이터 온, 데이터 X, 에러 너무 복잡한 것을 안해봐서 그런가? 자연스럽게 이렇게 생각하고 있었다. state에 대한 고려를 어떻게 하는지 배웠다. 공감수 0 댓글수 0 2023. 9. 13.
  • [공식문서 공략] Updating Arrays in State 기존 객체랑 똑같음 새 배열을 만들어서 map, filter 는 얕은 복사로 원본 배열을 변화시키지 않음 역시 리액트 뭐 사용하라고 배열 함수까지 알려준다. 사실 이전 프로젝트에서 sort를 썼는데 복사하고 쓰라고 한다. 더할 때는 스프레드 문법을 사용한다. 제거할 때는 filter를 사용한다. 이거는 주의를 해야할듯 맵하고 if를 사용하여 원하는 조건을 만들어준다. 백에서 비즈니스 코드를 안적어주면 잘 처리해서 해야겠다. 원소의 순서를 바꾸는 것은 괜찮지만 원소 내용을 바꾸는 것은 문제가 되기 때문에 최상위 수준까지 복사본을 만들라고함 map, if로 소팅한다. 부끄러운 기억이 있네; 변화를 많이 가져야하는 경우면 useImmer를 사용해야될 듯하다. useState보다 공감수 0 댓글수 0 2023. 9. 13.
  • useMemo 이해해보기 useCallback이나 useMemo는 불필요한 렌더링을 막기위해 사용된다. 컴포넌트 함수 호출이 필요한 경우에만 호출되야 렌더링 최적화를 이뤄낼 수 있다. 둘의 차이는 간단한데 이름에 나와 있다싶이 콜백은 함수이고 메모는 값이다. 내용은 역시나 별코딩 강의를 통해서 학습했다. 진짜 쉽게 이해시켜주는데 다시 좀 콘텐츠를 만드셨으면 한다. 리액트는 기본적으로 상태가 변하면 렌더링을 다시한다. 아래 코드에서보면 하드 넘버와 이지넘버가 상태로 지정되어 있는데 각 input의 값이 변하면 상태가 변하므로 app함수는 새로 호출될 것이다. 근데 생각해보면 하드넘버가 변하는데 easyCalculate 함수가 호출되는 것은 매우 비효율일 것이다. 반대도 마찬가지이다. 그래서 이지넘버, 하드넘버를 기억시켜 새로 함수.. 공감수 0 댓글수 1 2023. 8. 11.
  • React-Query를 이해하기 위해서 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.. 공감수 1 댓글수 1 2023. 8. 9.
  • useEffect에서 왜 return이 바로 안되는 지 궁금했던 나 useEffect는 리액트를 배우게 되면 보통 두번째로 먼저 배우는 훅이다. 첫 번째는 당연 useState일거고 그런데, 갑자기 늘 함수에서 바로 return값이 주어졌던 경험에 비춰 useEffect를 봤더니 아니 왜 return이 자동으로 작동을 안할까라는 의문이 들었다. 물론, 우리는 추측을 할 수 있다. 어떤 로직에 의해서 return 값을 뱉는 것이 제어되고 있을거라는 추측말이다. 하지만, 리액트 초보로서 한 번 리액트의 전반에 대해 알아볼겸 파보았다. useEffect(() => { console.log("I am the effect"); return () => { console.log("I run after re-render, but before the next UseEffect") } }.. 공감수 0 댓글수 0 2023. 8. 5.
  • 캐싱, useCallback로 훅 시야 넓이기 내 리액트의 현재 수준은 기초에 머물러 있다. 기초에 머물러 있는 것은 문제가 되지 않는데 기초에서 몇 달째 좀처럼 나아가질 못하고 있어 문제이다. html, css, js는 강의를 듣다보면 어느 정도 코드를 쓰다보면 느는 것을 볼 수 있는데 리액트는 그게 되지 않는다. 그 이유는 훅의 사용 때문에 그렇다. 훅의 원리를 제대로 이해하지 못하면 훅을 사용할 수 없고 그 것은 우리가 자동차가 있어도 운전 방법을 몰라 걸어가는 것과 같다. 그래서 몇 달 째는 나는 useState, useEffect에서 벗어나지 못하고 있었다. 그래서 이제부터 좀 차근차근 정리해나가기로 한다. 사실 정리는 공식문서에 정연하게 되어있지만 난 아직 공식문서를 읽고 실행할 수 있는 단계에 이르지 못했다. 어느 정도 알아먹어야 공식문.. 공감수 0 댓글수 0 2023. 7. 30.
  • React-todolist 리팩토링으로 이벤트 위임 배워보기 리액트 파일에 작성하여 리액트 카테고리에 넣었지만 실상 js에 대한 내용이다. import { useState } from "react"; function ToDoList2() { const [todoList, setTodoList] = useState([]); const [todo, setTodo] = useState(""); const handleInput = (e: React.ChangeEvent) => { setTodo(e.target.value); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); // 기본적인 것을 잊고 있었다. 새로고침을 없애고 form을 이용해서 엔터고칠수 있다. setTodoList((prev) =.. 공감수 0 댓글수 0 2023. 7. 30.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.