프로그래밍/React17 ChakraUI를 도입하려는 이유 개인 프로젝트에서 차크라UI를 도입할 생각을 하고 있다. 사실 다른 MaterialUI나 Antd 같은 컴포넌트UI를 도입하는 이유와 동일하기 때문에 그냥 비슷한 계열의 라이브러리 사이에서는 취향의 차이 정도만 있다. 저번 프로젝트에서 차크라UI를 써봐서 익숙한 점도 있다. CSS를 수정하는 포지션에 있는 라이브러리는 styled-components아니면 sass(안 써봄) 정도 될 것 같다. 이번에 TailwindCSS를 사용해보고 싶어서 도입을 했었다. 현업에서 많이 쓰는 라이브러리같아서 배워두고 싶었고, 인라인으로 수정하는 점도 마음에 들었다. 개인적인 경험으로 styled-components와 Antd를 같이 사용하는 것을 현업에서 본 경험이 있다. 그러니까 UI를 직접적으로 수정할 수 있는 .. 2025. 3. 3. Styled-components에 대한 생각 나는 개인적으로 styled-components를 회사에서 사용하는 것을 본 적이 있고, 내가 직접 사용해서 뭔가를 개발해본 경험은 없다. 다만 나는 다양한 프레임워크에서 어떤 식으로 속성을 먹이는지 접한 경험이 있어서 이를 토대로 의견을 정리해본다. 일단 FE 개발을 기본적으로 많이 안 해본 사람에게는 CSS자체가 엄청난 허들이다. 내가 경험한 Android Native XML이나 WPF XML에서는 주로 파스칼케이스 방식으로 속성을 준다. 어떠한 속성이 있는지 기본적인 것은 알고 있지만, 속성명에 엄청 능숙하지 않아도 IDE 만지다보면 알게 된다. 이런 입장에서 CSS 코드 자체를 이해하고 코드를 작성하는 게 처음에는 많이 어려웠다. styled-components로 개발하는 모든 프로젝트가 그렇지.. 2025. 3. 2. React Query와 Axios에 대한 개인적인 생각 오늘은 개인적으로 React Query 라이브러리가 끌리지 않는 이유에 대해 적어보려고 한다. 사실 React Query 라이브러리가 나쁘다고 생각하지 않으며 캐싱, 데이터 fetching 부분에서 좋다고 본다. 정말 지극히 개인적인 의견에서 적어보는 글이다. https://ravirathore.com/reactjs/react-query-vs-axios/다음글에 따르면 리액트 쿼리의 경우에는 '비동기 데이터 가져오기' '캐싱'을 목적으로 사용하며 Axios는 일반적인 HTTP 요청을 자바스크립트 환경에서 하기위해 사용한다고 한다. 또한 React Query는 리액트를 중심으로 하지만, Axios는 자바스크립트 기반의 프레임워크에서 모두 사용할 수 있다. 1. 캐싱의 부분에서 리액트 쿼리는 빌트인 기능.. 2025. 3. 1. Nextjs 정리 https://nextjs.org/docs Next.js는 풀스택 웹 어플리케이션을 만들기 위한 프레임워크입니다. 리액트에서 서버사이드 렌더링과 SEO 최적화를 위해 사용된다. 파일 시스템 기반의 라우팅, 렌더링 최적화 등을 지원하고 있다. Next.js를 사용할 때 주로 백엔드 서버를 따로 둬서 개발하는 것이 일반적인 것 같다. Client -> Next(프론트서버) -> Nest(백엔드서버) -- 일반적인 사례 Client -> Next(백엔드) Next.js의 pages 폴더를 통해 라우팅을 설정할 수 있다. / → pages/index.js /about → pages/about.js /blog/hello-world → pages/blog/[slug].js 리액트 코드 내에서는 Link 컴포넌트를 .. 2024. 1. 10. [React] useReducer useReducer useReducer is a React Hook that lets you add a reducer to your component. const [state, dispatch] = useReducer(reducer, initialArg, init?) Parameters reducer: The reducer function that specifies how the state gets updated. It must be pure, should take the state and action as arguments, and should return the next state. State and action can be of any types. initialArg: The value from w.. 2023. 11. 30. [React] createContext createContext createContext lets you create a context that components can provide or read. const SomeContext = createContext(defaultValue) Parameters defaultValue: The value that you want the context to have when there is no matching context provider in the tree above the component that reads context. If you don’t have any meaningful default value, specify null. The default value is meant as a “.. 2023. 11. 29. [React] useContext useContext useContext is a React Hook that lets you read and subscribe to context from your component. const value = useContext(SomeContext) useContext는 넘긴 context 값을 반환한다. 컨텍스트 값을 결정하기 위해 리액트는 컴포넌트 트리를 검색하고 가장 가까운 컨텍스트 프로바이더를 찾는다. 컴포넌트에 Provider로 감싸거나 부모 컴포넌트 중에 하나를 감싸라. (매칭되는 컨텍스트 프로바이더로) import { useContext } from 'react'; function Button() { const theme = useContext(ThemeContext); // ... fun.. 2023. 11. 29. [React] forwardRef forwardRef forwardRef lets your component expose a DOM node to parent component with a ref. const SomeComponent = forwardRef(render) Parameters render: The render function for your component. React calls this function with the props and ref that your component received from its parent. The JSX you return will be the output of your component. Returns forwardRef returns a React component that you .. 2023. 11. 29. [React] memo memo memo lets you skip re-rendering a component when its props are unchanged. const MemoizedComponent = memo(SomeComponent, arePropsEqual?) Parameters Component: The component that you want to memoize. The memo does not modify this component, but returns a new, memoized component instead. Any valid React component, including functions and forwardRef components, is accepted. optional arePropsEqu.. 2023. 11. 29. [React] useMemo useMemo useMemo is a React Hook that lets you cache the result of a calculation between re-renders. const cachedValue = useMemo(calculateValue, dependencies) Parameters calculateValue: The function calculating the value that you want to cache. It should be pure, should take no arguments, and should return a value of any type. React will call your function during the initial render. On next rende.. 2023. 11. 29. 이전 1 2 다음
