React💃 (5) 썸네일형 리스트형 [React] UseEffect가 두번 실행되는 이유 부트캠프를 할 당시, React를 공부했었다. 그러다가 첫 회사에서는 Vue.js 프레임워크를 사용을 하여 입사하고 지금까지 쭉 Vue로 개발을 하고, 공부를 하고 있다. 물론 Vue를 계속 공부하고 있지만, 많은 회사에서는 React를 사용하고 있어서 React도 다시 공부를 해야겠다는 생각이 들어서 조금씩이라도 하고 있다. # 상황 함수 컴포넌트에서 사용하는 Hook 중 하나인 useEffect를 공부하는 와중, 예제를 보고 똑같이 따라하는데도 책에서는 처음 렌더링 시 '한번'만 실행이 되는데 내가 짠 코드에서는 계속 두 번씩 실행이 되는 것이다. //Info.js import { useState, useEffect } from 'react'; const Info = () => { const [nam.. StatesAirline-Client import Head from 'next/head' import { useEffect, useState } from 'react' import { getFlight } from '../api/FlightDataApi' import FlightList from './component/FlightList' import LoadingIndicator from './component/LoadingIndicator' import Search from './component/Search' import Debug from './component/Debug' import json from '../resource/flightList' export default function Main() { const [conditio.. Effect Hook (2) - 조건부 실행(dependency array), 명언제조기 filter 1. 조건부 effect 발생(dependency array) useEffect의 두 번째 인자는 '배열'. 이 배열은 조건을 담고 있다. 이 조건은 boolean형식이 아닌, 어떤 값의 목록이 들어간다. 이 배열을 '종속성 배열'이라고 부른다. useEffect(함수, [종속성1, 종속성2, ...]) : 배열 내의 종속성1, 종속성2의 값이 변할 때 첫번째 인자인 함수가 실행된다. import { useEffect, useState } from "react"; import "./styles.css"; import { getProverbs } from "./storageUtil"; export default function App() { const [proverbs, setProverbs] = useS.. React에서의 useEffect, Life Cycle, 순수함수 함수 방식이 클래스 방식에 버금가는 가능성을 갖게된 중요한 2가지 측면 1. state를 사용할 수 있게 되었다.(useState) 2. 라이프사이클을 다룰 수 있게 되었다.(useEffect) [1. class 방식에서의 Lify Cycle구현] 클래스 방식에서 React Component를 만들 때, 컴포넌트의 메소드들이 어떤 순서로 호출이 되는가. 1. componentWillMount() - 랜더되기전에 실행. 컴포넌트가 생성되기 전에(렌더가 호출되기 전에) 처리해야 할 일이 있다면, 이 메소드를 구현하여 해야할 일을 여기에 갖다 놓는다. 2. render() - 호출되면 마운트가 된다.(화면에 그려진다) 3. componentDidMount() - 화면에 그려진 다음에 처리해야 할 일. - 컴포.. React Modal창 구현 export const Modal = () => { const [isOpen, setIsOpen] = useState(false); // Modal창이 열려있는지, 닫혀있는지의 status. 현재는 isOpen의 상태는 false. 즉, 닫혀있는 상태. const openModalHandler = () => { setIsOpen(!isOpen); // Event Handler. isOpen의 status를 setIsOpen함수를 통해 변경. // 만약 isOpen이 false면 ---> true로 변경, isOpen이 true면 ---> false로 변경. }; return ( // ModalBtn을 클릭하면 onClick이벤트의 이벤트핸들러인 openModalHandler함수가 실행되어 isOpen 상.. 이전 1 다음
