front_end/react (4) 썸네일형 리스트형 useContext (typescript) useContext props를 app.tsx에서 각각 내려준다고 가정하자 이처럼 필요 없는 props를 내려주거나 하는 일이 발생할 수 있다. props에 해당되는 값들을 따로 모아 context를 만들어 주어 context 에서 직접적으로 props를 제공하는 역할을 하는 것이 useContext이다 context 셋업 특정 contextProvider 안에 있는 모든 childeren에서 theme라는 prop을 사용한다고 가정하자 theme props /* theme.ts */ export const theme = { primary: { main: '#3f5185', text: '#fff', }, secondary: { main: '#f50057'. text: '#fff', }, }; ThemeC.. React - useReducer (in typescript) USEREDUCER useState가 여의치 못한 상황일 때 사용 (state 종류가 많던지 등의) reducer 함수 예시 function reducer(state: CounterState, action: CounterAction) { switch (action.type) { case 'INCREMENT': return { count: state.count + action.payload }; case 'DECREMENT': return { count: state.count - action.payload }; default: return state; } } 사용 예시 import { FC, useReducer } from 'react'; type CounterState = { count: number; .. React useState hook (Typescript 에서) boolean type 을 가지는 간단한 useState import { FC, useState } from 'react' export const App: FC = () => { const [isLoggedIn, setIsLoggedIn] = useState(false); const handleLogin = () => { setIsLoggedIn(true); }; const handleLogout = () => { setIsLoggedIn(false) }; return ( Login Logout Use is {isLoggedIn ? 'Logged in' : 'Logged out'} ); }; 단순히 boolean type을 지정해 주기만 하면 사용하는 데에 지장이 없다. 사용자 지정 타입의 경우도 비슷.. 리엑트 앱 이니셜라이즈 1. create-react-app npx create-react-app myapp 터미널에서 npx(node 패키지 실행 도구) create-react-app myapp(생성할 어플리케이션 이름) 명령어를 실행 2. 해당 폴더로 이동(cd myapp)후 npm start로 실행 테스트 브라우저에서 localhost:3000 을 띄워준다 3. public 폴더 정리 3.1 public 폴더 favicon.ico = 웹 브라우저 상단에 띄워주는 아이콘 logo192 = 192x192 사이즈의 로고 logo512 = 512x512 사이즈의 로고 manifest.json = 앱에 대한 정보를 담고 있는 파일 short_name: 사용자 홈 화면에서 아이콘으로 사용 name: 웹 앱 설치 배너에 사용 icons.. 이전 1 다음
