akjfal

RTK Query를 왜 나왔냐? 💡 결론 : 데이터 fetching과 caching 로직을 줄이기 위해서! 데이터를 가져오는데는 해줘야 할 일이 많습니다. 가져오는동안 로딩창 중복데이터 호출도 고려 최적화 캐쉬도 관리 기존엔 상태 관리와 엮어서 해결하려던 부분을 별도의 작업이라고 생각하기 시작했습니다. RTK Query는 createSlice랑 craeteAsyncThunk로 만들어진 리덕스 라이브러리입니다.. 그리고 Query를 통해서 데이터 로딩 등 컴포넌트를 만들고 화면을 구성하는데 필요한 값들을 제공해줍니다. 초기 세팅 App.tsx // 기존 Redux가 있으면 사용하면 안됩니다! function App(props) { ... return ( // ({ // 선언해두면 발동 getApi: bui..

작년에 신규 프로젝트를 하면서 Nextjs를 사용하던 중 Next 13이 출시되었었습니다. 이때 당시엔 정신이 없어서 살펴보지 못했는데 옆 팀 프로젝트 마감 기한이 너무 빡빡하게 잡혀서 2달 정도 도와주게 된 프로젝트에서 Next 13을 사용하고 있다고 합니다. 이번 기회에 공식 문서를 토대로 기존 방식과 달라진 점을 살펴보려고 합니다. Next 13 New App Directory(Beta) app directory는 현재 베타 버전이고, PR에는 추천하지 않습니다. 그리고 아직 pages directory는 next/image와 next/link 등 기존의 안정된 기능들과 함께 사용할 수 있습니다. app directory는 아래 기능들은 지원합니다. Layouts : state를 유지하고 리렌더링을..

React 최상위 API ※ 공식 사이트에 한글로 번역이 이미 되어있으니 원문을 보시는 것을 추천드립니다. 개요 script를 통해서 React를 불러올 경우 전역객체에서 사용할 수 있고, npm에서 es6를 사용 할경우 import, es5일 경우 require(’react’)를 사용하면 됩니다. 컴포넌트 React 컴포넌트를 사용하면 UI를 재사용할 수 있는 부분으로 나누고, 각 부분을 분리하여 생각할 수 있습니다. React.Component와 React.PureComponent로 나누어 정의할 수 있습니다. ES6 class를 사용하지 않는다면, create-react-class 모듈을 대신 사용해도 됩니다. 또한 React의 컴포넌트를 정의할 때 래핑될 수 있는 함수의 형태로 할 수도 있습니다...

Effect Hook 사용하기 Using the Effect Hook – React A JavaScript library for building user interfaces ko.reactjs.org useEffect는 class에서 componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 방식이라고 생각하면 된다. React에는 두 종류의 side effects가 존재하는데 clean-up이 필요한 것과 필요 없는 것 두가지가 있다. clean-up이 필요 없는 Effects class형에서 어떠한 데이터를 업데이트 하기 위해서는 컴포넌트가 방금 마운트 되엇는지(componentDidMount), 업데이트되었는지(componentDidUpdat..

우선 사용하는 방법을 보자 Text 컴포넌트안에 variant="text" 같이 변수를 인자로 넘겨준다. 인자로 들어가는 것들은 Button 에서 살펴볼 수 있으니 확인해보도록 하자. Button 컴포넌트를 까보도록 하자 const Button = React.forwardRef(function Button(inProps, ref) { const props = useThemeProps({ props: inProps, name: "MuiButton" }); const { className: classNameContext, color: colorContext, disabled: disabledContext, disableElevation: disableElevationContext, disableFocusRi..