본문 바로가기

리액트 기초

 (23)
리액트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"} ] } data.json파일
리액트 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 = () => setS..
리액트 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가 정확하게 일치하는지를 기준으로 //경로가 /home이면 element어트리뷰트에 들어있는 이라는 컴포넌트가 리턴돼서 home이 렌더링 됨 ); } function Index() { let navigate = useNavigate(); //useNavigate를 사용하면 navigate라..
리액트 13강 useEffect 우리가 호출을 하는 훅이 아닌 자동으로 호출이 되는 훅 컴포넌트가 마운트가 되고 dom이 변경 된 다음 렌더링 발생 후 실행됨 언제 필요하냐? props 에 속한 값을 컴포넌트의 로컬 변수로 선언 API 호출하여 통신을 통해 값을 받아오거나 받은 값을 state에 값을 넣어주나 할 때 사용 서드파티 라이브러리 사용 즉, 렌더링이 다 되면 화면에 요소들이 나타나고 그 다음 다시 한번 데이터를 변경할 때 사용하는 것 아래 코드에서 제목이 알아서 바뀐다는 것이 핵심 -> 제목은 useeffect에서 바뀌는것 import React, { useState, useEffect } from "react"; function App() { const [count, setCount] = useState(..
리액트 12강 React Hook useState도 React Hook임 기존에 사용하던 클래스 컴포넌트의 여러 기능들을 자연스럽게 함수형 컴포넌트에서 사용하기 위한 장치 클래스형 컴포넌트 스테이트, 라이프사이클 직접 다룰수 있음 진입장벽, 복잡한 코드 즉 함수형 컴포넌트가 기존의 클래스형 컴포넌트를 완전히 대체할 수 있도록 하는 기능 리액트의 생명주기(Life Cycle) 리액트는 컴포넌트가 화면에 렌더링되는 과정을 생명주기를 이용해 관리 마운팅 -> 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: "", sco..
리액트 10강 state 일반 JavaScript 객체, 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리됨 사용자와의 상호작용을 통해 화면이 바뀌는 경우에 useState 를 사용 하여 "상태 관리"를 가능하게 하는 객체 import React, { useState } from "react"; // import useState //useState라는 것을 통해서 react의 state라는 것을 만들 수 있음 function Counter() { const [number, setNumber] = useState(0); //숫자의 값을 만드는 부분, useState함수 사용 //기본값을 입력으로 받음, 이 기본값은 state가 가지게 될 기본값 //기본값을 받아 배열을 리..
리액트 9강 hello.js에 있는 name을 아무리 바꿔도 app.js에 있는 name은 바뀌지 않음 props는 “부모 컴포넌트”에서 “자식 컴포넌트”로 보내주는 값이기에 자식 컴포넌트를 바꿔도 부모 컴포넌트는 바뀌지 않음 함수의 파라미터로 변수를 전달해주는 것이기에 app에 있는 name의 값이 복사 alt + shift + f -> 코드정리 우리가 만든 컴포넌트로 다른 컴포넌트를 감싸주려면 반드시 감싸는 컴포넌트가 프롭스로 children을 받아온 후 자신의 jsx표현식 안에 넣어줘야 함 import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( //우리가 만든 부..

티스토리툴바