react17 React에서 state를 정의할 때 고려해야 할 점 (feat. SSOT) 해당 게시글은 우아한 타입스크립트 with 리액트 10장을 읽고 정리한 글 입니다. React에서 State 란? - 시간이 지나면서 변할 수 있는 동적인 데이터 - 렌더링에 영향을 줄 수 있는 동적인 데이터 리액트 앱 내에서의 상태는 지역 상태, 전역 상태, 서버 상태 로 분류할 수 있습니다. 리액트 API만 으로도 상태를 관리할 수 있지만, 성능 문제가 발생하거나 규모가 커져 복잡해지면 Redux, MobX, Recoil 과 같은 외부 상태 라이브러리를 주로 활용합니다. 특히나, 컴포넌트 간의 상하관계 사이에서 상태 전달을 위해 과도한 Props drilling 을 막고자 사용합니다. React 에서 State 를 정의할 때 고려해야 할 사항 리액트에서 state가 변하게 되면(업데이트가 되면) 리렌.. 2024. 2. 25. React 컴포넌트 타입인 ReactElement vs JSX.Element vs ReactNode 차이와 예시 컴포넌트의 props에 컴포넌트를 넘겨야 할 때, props의 이름과 컴포넌트의 타입을 선언해주어야 한다. import { JSX, ReactElement, ReactNode, useEffect, useState } from 'react' interface Props { component: ReactElement component1: JSX.Element component2: ReactNode } 하지만 이 컴포넌트의 타입은 `ReactElement` , `Element` , `ReactNode` 세가지가 있으며, 세가지 모두 리액트의 요소를 나타낸다. 이 타입들의 차이는 무엇이 있을 지 알아보자. ReactElement 리액트에서는 JSX 문법으로 UI를 표현하고, 트랜스파일러는 JSX문법을 crea.. 2024. 2. 24. [React] useRef 알아보기 - useRef 와 ref 의 개념 및 사용 React를 개발하다보면 자주 쓰이는 useRef 와 ref라는 녀석에 대해서 알아보자. 어떨때 쓰나요? 우선 `useRef` 는 어떤 상황에서 사용할까? 개발을 하다보면 단순히 React JSX Element 만으로는 DOM 을 완벽하게 제어하기 어렵다. 가장 흔하게 예시를 들자면, 사용자가 특정 액션을 했을 때 input element에 focus를 해주어야 한다면 React에서 어떻게 구현해야 할까? useRef를 알고있다면, 해결법은 간단하다. input element를 ref에 연결하고, ref에 연결된 element를 focus해주면 된다. ref 가 뭔데요? ref는 reference의 줄임말이다. 한국말로는 참조정도 되겠다. ref는 일반 객체다. ref를 console.log 로 찍으면 .. 2023. 9. 7. [Next.js] useRouter 의 Shallow Routing 참고자료 https://post.naver.com/viewer/postView.nhn?volumeNo=29116858&memberNo=10070839 https://velog.io/@diclfn42/Next.js-Shallow-routing-%EC%9D%B4%EB%9E%80 https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating 시작하기 앞서 상태에 대한 부분들을 URL 값 파라미터에 반영되는 방식을 구현하고자 했다. 이렇게 했을 때 장점은 아래와 같다. 모든 사용자들의 동작들이 URL 파라미터로 기록된다. 그래서, 그 URL을 누군가에게 공유했을 때, 내가 보고있었던 페이지 그대로 볼 수 있을 것이다. .. 2023. 9. 6. 이전 1 2 3 4 5 다음 728x90 반응형
