728x90 반응형 useState4 [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] 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. [React.js] 4주차 - state, useState, useRef, React Hooks, 렌더링 1. State State 는 현재 가지고 있는 형태나 모양을 정의하고, 변화할 수 있는 동적이 값을 말한다. 리액트에서 모든 컴포넌트들은 State 를 가질 수 있는데(한 개의 컴포넌트는 여러개의 State 를 가질 수 있음), State 를 갖는 컴포넌트들은 이 State 값에 따라 렌더링 되는 UI 가 결정된다. 이 때 컴포넌트의 State 값에 따라서 화면이 다시 렌더링 되는 것을 리 렌더(Re-Render) 또는 리 렌더링(Re-Rendering) 이라고 한다. 1.1. useState 사용하기 useState 를 사용하려면 리액트의 내장 함수인 useState 를 import 해줘야 한다. import { useState } from 'react'; useState 함수를 호출하고 반.. 2024. 10. 29. [React+JS/리액트] 웹 스터디 - state 변경함수 사용할 때 주의점: async 자바스크립트는 일반으로 코드를 작성하면 synchronous 하게 처리된다. 코드를 적은 순서 그대로 위에서부터 아래로 코드가 실행된다는 뜻이다. 그런데 어떤 코드들은 synchronous 하지 않게 실행되는 코드들이 있다. ajax, 이벤트 리스너, setTimeout 이런 함수들을 쓸 때 asynchronous, 즉 비동기적으로 코드가 실행된다. 이런 함수들은 보통 처리시간이 길다. ajax 로 예를 들면 인터넷 상황이 안 좋으면 코드 실행이 오래걸리는 것을 생각하면 된다. 그래서 이런 코드들은 순차적으로 실행되지 않고 완료되면 실행이 된다. 아래 코드를 실행시키면 2 4 가 순서대로 출력되고, 그 다음에 3이 출력된다. 이는 3을 출력하는 코드가 asynchronous 처리를 지원하는 코드이기 .. 2024. 8. 6. 이전 1 다음 728x90 반응형
