공부방

클래스 컴포넌트를 사용하여 카운터 기능을 구현. Counter.tsx // React 라이브러리에서 Component 클래스를 가져옵니다. import { Component } from "react"; // Counter 컴포넌트에서 사용될 props의 타입을 정의합니다. // 여기서는 message라는 문자열 타입의 prop만을 가집니다. type ConuterProps = { message: string; }; // Counter 컴포넌트의 내부 상태(state)의 타입을 정의합니다. // 여기서는 count라는 숫자 타입의 상태만을 가집니다. type ConuterState = { count: number; }; // Counter라는 클래스 컴포넌트를 정의합니다. export class Count..

DOM 요소에 대한 참조 : 'useRef'를 사용하면 DOM 요소에 직접적으로 접근할 수 있다. 이를 통해 DOM 요소의 속성을 읽거나 수정하거나, 명시적으로 포커스를 설정하거나, 원시 DOM API를 추가 작업을 수행할 수 있다. 임의의 변경 가능한 값 저장 : 'useRef'는 리렌더링 시에도 유지되는 변경 가능한 참조 객체를 반환한다. 따라서 'useRef'는 컴포넌트의 여러 렌더링 사이에서 유지하는데 사용될 수 있다. 이 값은 리액트의 렌더링 사이클에 영향을 주지 않으므로, 렌더링과 관련되지 않은 정보(예: 타이머 ID, 외부 라이브러리 인스턴스 등)을 저장하는데 적합 이전 상태 또는 속성값 유지 : 'useRef'는 이전 렌더링에서의 값을 저장하고 추후에 그 값을 참조하는데 사용될 수 있다. ..

useState vs useReducer 복잡성 useState 간단한 상태를 관리할 때 주로 사용. 예를 들어, 숫자, 문자열, boolean 값 또는 간단한 객체 및 배열과 같은 상태를 관리하는데 적합 useReducer 복잡한 상태 로직이나 여러 값을 포함하는 상태를 관리할 때 주로 사용. 리듀서는 상태 업데이트 로직을 조직화하고 분리하는데 유용 상태 업데이트 로직 useState 상태 업데이트 함수를 호출하여 상태를 변경. 이 함수는 새로운 상태 값을 직접 받거나 상태를 업데이트하는 함수를 받는다. useReducer 액션 객체를 dispatch 함수에 전달하여 상태를 업데이트. 액션은 리듀서에서 상태 업데이트 로직을 결정하는데 사용 재사용성 useState 상태 로직이 컴포넌트 내부에 존재하기 ..

LoggedIn.tsx import { useState } from "react"; export const LoggedIn = () => { const [isLoggedIn, setIsLoggedIn] = useState(false); const handleLogin = () => { setIsLoggedIn(true); }; const handleLogout = () => { setIsLoggedIn(false); }; return ( Login Logout 사용자는 {isLoggedIn ? "logged in" : "logged out"} ); }; User.tsx import { useState } from "react"; type AuthUser = { name: string; email: str..

Style Props 주는 법 Container.tsx type ContainerProps = { styles: React.CSSProperties; // 스타일의 타입 }; export const Container = (props: ContainerProps) => { return 내용이 여기 들어옴; }; App.tsx import "./App.css"; import { Container } from "./components/Container"; function App() { return ( ); } export default App;

OnClick Event Props를 주고 받으면서 적용하기 Button.tsx type ButtonProps = { handleClick: (event: React.MouseEvent, id: number) => void; // 이벤트 props를 받기 위해 event: React.MouseEvent를 넣고, id: number 받을게 무엇인지 // 넣는다. }; export const Button = (props: ButtonProps) => { return props.handleClick(event, 2)}>Click; // 이벤트를 props.handleClick(event로 받고, 2를 number로 정해준다. }; App.tsx import "./App.css"; import { Button ..

number Greet.tsx type GreetProps ={ name:string messageCount:number } // Props의 type을 정해주기 위해 GreetProps를 정해준다. export const Greet=(props:GreetProps)=>{ // props부분에 위에 지정해준 GreetProps를 넣어준다. return( {props.name} 안 읽은 메세지가 ${props.messageCount}개가 있어 ) } App.tsx import "./App.css"; import { Greet } from "./components/Greet"; // Greet라는 컴포넌트를 쓰기 위해 import function App() { return ( ); } export defau..

타입스크립트 리액트 만들기 npx create-react-app (만들 타입스크립트 리액트 파일 이름) --template typescript 인사말 쓰기 App.tsx import "./App.css"; import {Greet} from './components/Greet' // Greet라는 컴포넌트를 쓰기 위해 import function App() { return {/* 안녕이라는 말을 보내고 싶다. */} ; } export default App; Greet.tsx type GreetProps ={ name:string } // Props의 type을 정해주기 위해 GreetProps를 정해준다. export const Greet=(props:GreetProps)=>{ // props부분에 위..