본문 바로가기

React

 (56)
리액트 19강 메인페이지 만들기import React from "react";import Items from "./components/Items";import Header from "./components/Header";import CreateItem from "./components/Createitem";import { BrowserRouter, Routes, Route } from "react-router-dom";function App() { return ( }/> }/> }/> }..
리액트16강 api(Application Programming Interface)우리가 만든 로직에 대한 프로그램이 있으면 그 프로그램을 다른 프로그램에서 사용할 수 있도록 프로그램적인 인터페이스를 제공하는 것웹서비스에서 사용하는 api는 백엔드에서 구현된 api를 말함json파일에서 api서버를 바로 만들 수 있고, 이 서버를 프로젝트에서 사용{ "items" : [ {"id":1, "tesk":"숙제하기", "due":20221131, "status":"todo"}, {"id":2, "tesk":"숙제하기", "due":20221131, "status":"todo"}, {"id":3, "tesk":"숙제하기", "due":20221131, "status":"todo"} ..
리액트 15강 Custom hook리액트에 정의되어있지 않은 나만의 Hook을 만들어 사용하는 것코드가 훨씬 직관적이고 간결해짐유지보수가 훨씬 편리import { useState } from "react";function App() {const [click1, setState1] = useState(false);const toggle1 = () => setState1((click1) => !click1);const [click2, setState2] = useState(false);const toggle2 = () => setState2((click2) => !click2);const [click3, setState3] = useState(false);const toggle3 = () => setState3((clic..
리액트 14강 import React from "react";import { BrowserRouter, Routes, Route, Link, useNavigate,} from "react-router-dom";export default function BasicExample() { return ( Home Index //경로가 바뀌면 Routes컴포넌트는 하위에 있는 Route컴포넌트들 중에 하나를 찾음 } /> //찾는 기준은 path가 정확하게 일치하는지를 기준으로 ..
리액트 13강 useEffect우리가 호출을 하는 훅이 아닌 자동으로 호출이 되는 훅컴포넌트가 마운트가 되고 dom이 변경 된 다음 렌더링 발생 후 실행됨언제 필요하냐?props 에 속한 값을 컴포넌트의 로컬 변수로 선언API 호출하여 통신을 통해 값을 받아오거나 받은 값을 state에 값을 넣어주나 할 때 사용 서드파티 라이브러리 사용즉, 렌더링이 다 되면 화면에 요소들이 나타나고 그 다음 다시 한번 데이터를 변경할 때 사용하는 것아래 코드에서 제목이 알아서 바뀐다는 것이 핵심 -> 제목은 useeffect에서 바뀌는것import React, { useState, useEffect } from "react";function App() { const [count, setCount] = useState(0); ..
리액트 12강 React HookuseState도 React Hook임기존에 사용하던 클래스 컴포넌트의 여러 기능들을 자연스럽게 함수형 컴포넌트에서 사용하기 위한 장치클래스형 컴포넌트스테이트, 라이프사이클 직접 다룰수 있음진입장벽, 복잡한 코드즉 함수형 컴포넌트가 기존의 클래스형 컴포넌트를 완전히 대체할 수 있도록 하는 기능리액트의 생명주기(Life Cycle)리액트는 컴포넌트가 화면에 렌더링되는 과정을 생명주기를 이용해 관리마운팅 -> DOM에 컴포넌트가 등록되는 과정 컨스트럭터 : 우리가 만드는 컴포넌트가 생겨나는 과정, 함수정의할때의 과정랜더링 : 브라우저의 DOM에 어떤 객체가 들어가서 브라우저 화면에 나타나도록 하는 것업데이팅 -> 등록된 컴포넌트의 내용이 업데이트되는 과정언마운팅 -> DOM에서 사라지는 과..
리액트 11강 onChange가 엘리먼트의 이벤트->이를 함수 onTextChange 에서 e 라는 파라미터로 받아올 수 있고, e.target 은 이벤트가 발생한 DOM 을 가리킴setInputs 부분스프레드를 통해 inputs 객체를 복사한 다음, name 키의 값만 업데이트여러 스테이트를 다루는 경우, 리액트는 기존 state 변수를 대체하기 때문에 다른 state 변수의 손실을 막기 위해 이런 방법을 사용import React, { useState } from "react";function input() { // eslint-disable-next-line react-hooks/rules-of-hooks const [inputs, setInputs] = useState({ subject:..
리액트 10강 state일반 JavaScript 객체, 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리됨사용자와의 상호작용을 통해 화면이 바뀌는 경우에 useState 를 사용 하여 "상태 관리"를 가능하게 하는 객체 import React, { useState } from "react"; // import useState//useState라는 것을 통해서 react의 state라는 것을 만들 수 있음function Counter() { const [number, setNumber] = useState(0); //숫자의 값을 만드는 부분, useState함수 사용 //기본값을 입력으로 받음, 이 기본값은 state가 가지게 될 기본값 //기본값을..

티스토리툴바