728x90 반응형 타입스크립트13 [TIL] 11/5 프론트엔드 심화2 - 몰랐던 부분 정리 1. useState 상태 변경 함수의 타입 정의 isFormOpen, setIsFormOpen 을 props 를 이용해 다른 컴포넌트로 보내어 사용해야 하는 상황에서는 props 의 타입을 정해줘야 한다. const [isFormOpen, setIsFormOpen] = useState(false);import React, { FC } from 'react'import { FiPlusCircle } from 'react-icons/fi'type TFormProps = { isFormOpen: boolean, setIsFormOpen: React.Dispatch>}const SideForm: FC = ({isFormOpen, setIsFormOpen}) => { return ( /.. 2024. 11. 5. [TIL] 11/4 프론트엔드 심화1 - 모르는거 정리 리액트 리덕스 정리본 상태의 일관성을 유지하고 디버깅이 쉬움불변성(Immutability): 리덕스는 상태를 직접 " data-og-host="everydayc0ding.tistory.com" data-og-source-url="https://everydayc0ding.tistory.com/entry/React-Redux-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-feat-TypeScript" data-og-url="https://everydayc0ding.tistory.com/entry/React-Redux-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-feat-TypeScript" data-og-image="https://scrap.kakaocdn.net/d.. 2024. 11. 4. [TIL] 11/1 props, 모달창 만들기 1. props일반 함수의 매개변수와 비슷하다고 생각하면 된다. props 는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘길 때 사용한다. (역방향, 자식 -> 부모로는 불가능) 1.1. 함수형 컴포넌트에서 props 사용하기 부모 컴포넌트에서 "맑음" 을 넘겨주면 자식 컴포넌트에서 받아서 사용할 수 있다. 타입스크립트는 타입이 존재하기 때문에 자바스크립트와는 다르게 props 의 타입을 지정해줘야 한다. // App.tsx -> 부모 컴포넌트function App() { return ( );}export default App;// MyWeather.tsx -> 자식 컴포넌트interface MyProps { weather: string; children: Re.. 2024. 11. 1. [TIL] 10/31 클래스/함수형 컴포넌트, useState 1. 컴포넌트 원래 리액트에서는 클래스형 컴포넌트를 썼지만, 리액트 18버전 이후로 리액트 훅이란 것이 생기면서 함수형 컴포넌트에서 state 관리, 라이프사이클 등을 사용할 수 있게 되면서 더 간단하게 사용할 수 있는 함수형 컴포넌트를 사용하고 있다. 1.1. 클래스형 컴포넌트 Component 클래스를 상속해야 하기 때문에 Component 를 import 해와야한다. 클래스형 컴포넌트에서는 render() 메서드를 통해 화면을 그린다. import { Component } from "react";class ClassCom extends Component { render() { return ( 클래스형 컴포넌트 .. 2024. 10. 31. 이전 1 2 3 4 다음 728x90 반응형
