REACT10 JSX? 그게 뭔데? 1. JSX의 정의JSX는 JavaScript XML의 줄임말로, JavaScript 안에서 HTML 같은 문법을 사용할 수 있게 해주는 문법 확장입니다. JSX는 React 컴포넌트에서 UI를 정의하는데 매우 유용하며, 보다 직관적으로 UI 구조를 작성할 수 있습니다.쉽게 말해, JSX는 JavaScript 코드를 작성하면서 HTML 태그를 넣을 수 있도록 도와주는 도구입니다. 이를 통해 HTML 요소들을 함수형 컴포넌트 내부에서 정의하고 조작할 수 있습니다. JSX의 기본 문법:const element = Hello, world!;위 코드는 JavaScript로 작성되어 있지만, HTML 요소를 포함하고 있는 것을 볼 수 있습니다. JSX를 사용하지 않으면 UI를 JavaScript 코드로 아래와 같.. 2024. 9. 10. React Query의 처리중 상태 구분하기 React Query에서 isFetching, isLoading, isPending, isRefetching의 차이점과 활용법React Query는 서버 상태를 효율적으로 관리할 수 있는 강력한 라이브러리입니다. 서버에서 데이터를 가져오거나 캐싱하는 작업을 단순화해 주며, 이 과정에서 발생하는 다양한 상태를 쉽게 관리할 수 있도록 여러 상태 플래그를 제공합니다. 이번 글에서는 React Query의 중요한 상태 플래그인 isFetching, isLoading, isPending, isRefetching에 대해 자세히 알아보겠습니다. 1. isFetching: 데이터 갱신 상태를 확인isFetching은 쿼리가 백그라운드에서 데이터를 갱신 중인지 여부를 나타내는 플래그입니다. 예를 들어, 이미 캐시된 데이.. 2024. 8. 16. React에서 비동기작업을 컴포넌트 로딩 전에 하면 useEffect를 사용하지 않아도 될 것 같은데, 왜 useEffect를 사용해서 처리하는걸까 ? useEffect?우선 useEffect가 어떤 역할을 하는지부터 알아보겠습니다.useEffect는 React에서 사이드 이펙트를 처리하기 위해 사용하는 훅입니다. 사이드 이펙트는 데이터 패칭, DOM 업데이트, 타이머 설정 등과 같이 컴포넌트의 렌더링과는 직접적으로 관련이 없는 작업들을 말합니다. useEffect의 주요 역할은 다음과 같습니다:컴포넌트 마운트 및 업데이트 시 작업 수행컴포넌트 언마운트 및 업데이트 시 작업 수행: 컴포넌트가 언마운트될 때나 업데이트 전에 이전 사이드 이펙트를 정리(cleanup)하는 작업을 수행합니다.종속성 배열: 두 번째 인자로 전달하는 배열을 통해 전달된 변수의 배열값이 변경될 때마다 실행하여, 사이드이펙트를 관리할 수 있습니다.React에서 초기에 데이터를 셋팅하.. 2024. 7. 22. Missing Suspense boundary with useSearchParams 발단React로 웹 개발을 하다보면 url searchParams를 활용해서 데이터를 처리해야 하는 경우가 생기는데, IDE에서 이와 같은 에러를 내밀었습니다.React는 비동기 작업을 처리하면서 사용자에게 일관된 경험을 제공하기 위해 Suspense 경계를 사용합니다 왜? useSearchParams는 React Router의 훅 중 하나로, URL의 쿼리 파라미터를 읽고 설정하는 데 사용됩니다. 이 훅을 사용할 때, React는 비동기적으로 쿼리 파라미터를 처리하므로 Suspense boundary를 설정하지 않으면 "Missing Suspense boundary" 오류가 발생할 수 있습니다. 비동기 작업을 처리하는 동안, React는 사용자가 비동기 처리가 완료될 때까지 기다리도록 하는 기본적인.. 2024. 7. 19. Worklets - React Native Reanimated Worklets Worklets의 궁극적인 목표는 뷰 속성을 업데이트하거나 UI 스레드에서 이벤트에 반응할 때 실행되는 작은 JavaScript 코드를 정의하는 것입니다. 이러한 목적에 대한 JavaScript에서 자연스러운 구성 요소는 간단한 함수였습니다. Reanimated를 사용하면 UI 스레드에 보조 JS 컨텍스트를 생성하고 JavaScript 함수를 실행할 수 있습니다. 유일한 필수 조건은 해당 함수가 맨 위에 "worklet" 지시문을 가져야 한다는 것입니다 function someWorklet(greeting) { 'worklet'; console.log("Hey I'm running on the UI thread"); } 함수는 우리의 필요에 맞는 훌륭한 구성 요소입니다. 실행되는 코드와 .. 2023. 7. 15. React Native 0.72 변경점 React Native 0.72는 2023년 6월 21일에 출시되었습니다. 여기에는 다음과 같은 여러 가지 새로운 기능과 개선 사항이 포함되어 있습니다. 요약 TurboModules: TurboModules는 React Native용 네이티브 모듈을 작성하는 새로운 방법입니다. 기존 네이티브 모듈보다 더 효율적이고 사용하기 쉽습니다. iOS용 런타임 연결 지원: 런타임 연결을 사용하면 React Native 앱이 런타임에 타사 라이브러리에 동적으로 연결할 수 있습니다. 이렇게 하면 전체 앱을 다시 빌드하지 않고도 앱에 새 기능을 더 쉽게 추가할 수 있습니다. Symlink 지원: Symlink 지원을 통해 React Native가 monorepo 설정 및 pnpm과 투명하게 작동할 수 있습니다. 이렇게 .. 2023. 7. 14. Front end 면접에 대비하기 위한 팁과 가이드라인 소개 프론트 엔드 개발은 웹 개발의 중요한 부분이며, 이 분야에서 취업하기 위해서는 HTML, CSS 및 JavaScript에 대한 튼튼한 이해가 필요합니다. 프론트 엔드 면접에서 성공하기 위해서는 철저한 준비와 흔히 나타날 수 있는 주제와 질문에 익숙해져야 합니다. 이 블로그 포스트에서는 프론트 엔드 면접에 효과적으로 준비하기 위한 팁과 가이드라인을 제공하겠습니다. 1. 채용 요구사항 이해하기 면접 준비에 앞서, 지원하는 프론트 엔드 직무의 특정 채용 요구사항을 이해하는 것이 중요합니다. 채용 공고를 주의 깊게 읽고 필요한 기술과 기술들을 메모해두세요. 이를 통해 준비를 맞추고 역할과 관련된 가장 중요한 영역에 초점을 맞출 수 있습니다. 2. HTML 기본 개념 복습하기 HTML은 웹 페이지의 기반이 .. 2023. 6. 27. 아직도 이거 모르니? React의 힘 useState 동작원리! 소개 React는 사용자 인터페이스를 구축하기 위해 사용되는 인기있는 JavaScript 라이브러리입니다. React의 주요 기능 중 하나는 useState 훅을 사용하여 상태를 관리할 수 있는 능력입니다. 이 블로그 포스트에서는 useState의 작동 방식에 대해 자세히 알아보고 React 개발에서의 힘을 탐구해보겠습니다. 1. useState란? useState는 React의 내장 훅으로, 함수형 컴포넌트에서 상태를 가질 수 있게 해줍니다. 이는 클래스 컴포넌트에서의 setState 메서드를 대체하는 역할을 합니다. useState를 사용하면 함수형 컴포넌트 내에서 상태 변수를 선언하고 업데이트할 수 있습니다. 2. useState 사용 방법 useState를 사용하기 위해서는 react 패키지에서 .. 2023. 6. 23. Typescript와 함께 알아보는 Context API 사용방법 소개 Context API는 React 애플리케이션에서 상태를 전역적으로 관리하기 위한 도구입니다. 이 기능은 컴포넌트 간에 데이터를 공유하고 전달하는 데 사용됩니다. 이번 블로그 포스트에서는 Typescript와 함께 Context API를 사용하는 방법에 대해 자세히 알아보겠습니다. 본문 1. Context API란? Context API는 React의 공식 상태 관리 도구로, 컴포넌트 트리 전체에서 데이터를 공유할 수 있게 해줍니다. 이를 통해 중첩된 컴포넌트 간에 데이터를 전달하는 것이 간편해집니다. 2. Context API의 주요 개념 Context API를 사용하기 위해 알아야 할 주요 개념은 다음과 같습니다: Context: 데이터를 공유하기 위한 컨테이너 역할을 하는 객체입니다. Prov.. 2023. 6. 23. 이전 1 2 다음 반응형
