programming study/React (37) 썸네일형 리스트형 React Query(1) - 세팅 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. React Query란? Data Fetching을 위한 라이브러리 리액트에서 API 호출, 이에 따른 상태 및 로딩 관리를 간단하게 할 수 있게 도와줌 불러온 Data의 캐싱 지원 2. React Query 세팅 React Query 사용을 위해 Root에서 Provider로 React Query를 주입하기 전역적으로 주입이 되므로 하위 컴포넌트에서 React Query를 사용할 수 있음 import React from "react"; import ReactDOM from "react-dom"; import { QueryClient, QueryClientProvider } from "react-quer.. React Router Dom(1) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. Router States React Router Dom에서 제공하는 Link 컴포넌트를 활용하여 현재 화면의 데이터를 다른 화면으로 보낼 수 있음 이미 가지고 있는 데이터를 활용하여 다음 페이지의 화면 렌더링 좋은 UX 제공 useLocation: Router State에 접근할 수 있는 Hook 예시 import { Link } from 'react-router-dom'; ... function PreviousPage() { return ( 이전 페이지 다음 페이지 가기 ); }; import { useLocation } from "react-router-dom"; function NextPag.. React & TypeScript 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. Prop Types vs. TypeScript Prop Types는 prop이 컴포넌트에 전달되었는지 런타임에서 확인(콘솔) TypeScript는 런타임 이전에 prop이 컴포넌트에 전달되었는지 확인 즉, TypeScript가 더 강력하게 오류를 방지할 수 있음 2. interface object shape를 TypeScript에게 설명 강력한 타입검사 지원 IDE 자동완성 지원 import styled from 'styled-components'; const Container = styled.div` font-size: 34px; color: ${(props) => props.color}; bold.. Styled Components(4) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. Themes & TypeScript styled-components 모듈에 theme에 대한 타입을 추가 자동완성 기능 일관적인 테마 정의 styled.d.ts 정의하기 d.ts 파일 : 선언 파일 styled-components의 Definitely Typed 에서 비어있는 DefaultTheme 인터페이스를 정의하기 import 'styled-components'; // styled Components 테마 정의 확장 declare module 'styled-components' { export interface DefaultTheme { backgorundColor: string; textColor:.. Styled Components(3) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. Themes 모든 색상을 가지고 있는 object 프로젝트에 일관성 있는 스타일을 정의할 수 있음 라이트모드/다크모드를 도입할 수 있음 Themes 주입 가장 상위의 컴포넌트에서 테마를 주입하기 styled-components의 ThemeProvider를 import import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import { ThemeProvider } from 'styled-components'; // 색상을 가지고 있는 object const theme = { textColor: .. Styled Components(2) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. as 명시된 HTML 요소 말고 다른 HTML 요소를 사용하는 기능 import styled from 'styled-components'; const Text = styled.text` color: white; `; function App() { // Text 컴포넌트는 text 요소로 지정되어있어도 as를 사용하여 h1 태그로 사용 가능 return 헤더입니다. } export default App; 2. Attrs HTML Attributes에 접근 가능 import styled from 'styled-components'; const Btn = styled.button.at.. Styled Components(1) - 개요, 스타일링 방법, 동적 스타일링, 컴포넌트 확장 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. Styled Components React.js에서 최적화된 스타일링 제공 CSS를 살펴보지 않고도 각각의 컴포넌트가 맡은 일을 파악할 수 있음 컴포넌트에 사용되는 각 요소에대해서 역할에 따른 이름을 붙여줄 수 있어, 코드 파악에 용이 Styled Components가 해당 요소에 독자적인 class명을 붙여줌 컴포넌트의 확장 기존의 컴포넌트 스타일을 확장할 수 있음 동적 스타일링 props를 활용하여 컴포넌트 스타일링할 수 있음 2. 스타일링 방법 import styled from 'styled-components'; const Header = styled.h1` color: white; `; .. Hook의 개요 Hook은 하위 호환성을 가지고 있음 1. useState useState는 현재의 state 값과 업데이트하는 함수를 쌍으로 return 이전 state와 새로운 state를 합치지 않음 새로운 state로 대체 인자로 state 값 하나를 받음 React state와 생명주기 기능을 연동할 수 있게하는 함수 import React, {useState} from 'react'; function Header() { const [text, setText] = useState('헤더입니다.'); return {text} } 2. vs. Class 컴포넌트의 setState 선언 방법 // Class Component class Header extends React.component { constructo.. 이전 1 2 3 4 5 다음