분류 전체보기142 [React] 6-2. Deps 알아보기 📌 Deps 지난 시간에 자세히 살펴보지 않았던 useEffect에 들어가는 두 번째 인자에 대하여 알아보자. 1. 다른 것들은 그대로 두고, search bar를 추가해 보자. function App() { ..... const [keyword, setKeyword] = useState(""); ..... const onChange = (event) => setKeyword(event.target.value); ..... return ( ..... input은 search bar에 해당하고, input에 value를 주어 state와 연결될 수 있게 한다. 결과로 search bar에다 내용을 입력할 때마다 state가 modify되므로 console 창에 'i run the all time&#.. 2023. 6. 2. [React] 6-1. React에서 useEffect 사용해보기 📌 useEffect 이번 시간에 알아볼 것은 특정 코드를 처음 한번만 실행하고 다시는 실행되지 않게 하는 방법이다. 이것은 useEffect 를 이용하여 구현할 수 있다. - useEffect 는 두 개의 argument를 가지는 function으로, create-react-app에서 useState와 마찬가지로 import해서 사용하는 것이 가능하다. - 첫번째 인자로는 처음에 화면이 render될 때 딱 한번만 실행하고 싶은 코드가 들어간다. 다음과 같이 App.js에 useEffect를 사용한 코드를 작성하고 어떤 일이 벌어지는지 살펴보자. import { useState, useEffect } from "react"; // useState와 useEffect를 import 한다. function.. 2023. 6. 2. [React] 6-0. React에서 Effect가 필요한 이유 📌 Effect가 필요한 이유 이전 시간에 배운 내용을 상기하면서 생각해 보자. useState와 props를 이용하여 counter를 만들어 보자. import { useState } from "react"; // useState를 import 한다. function App() { // 우리는 create react app에서 작업을 하고 있고, useState를 위에서 이미 import 했기 때문에 React.useState의 형태로 작성하지 않아도 된다. const [counter, setValue] = useState(0); // 이전 counter 값에 1을 더한 값을 counter 값으로 설정한다. const onClick = () => setValue((prev) => prev + 1); r.. 2023. 6. 2. [React] 5-1. Create React App 사용해보기 📌 create react app 사용해보기 1. 다음과 같이 Button.js 파일을 생성하여 Button 컴포넌트를 작성한다. function Button({ text }) { return {text}; } export default Button; // Button 컴포넌트를 App.js에서 사용할 수 있게 하기 위해 export default Button을 해 주었다. 2. App.js에 Button 컴포넌트를 불러와서 App 컴포넌트에서 사용해 본다. import Button from "./Button"; function App() { return ( Welcome back! ); } export default App; 만약 Button 컴포넌트를 import 하기만 하고 App 컴포넌트 내부에서.. 2023. 6. 2. 이전 1 ··· 25 26 27 28 29 30 31 ··· 36 다음
