본문 바로가기

Frontend/React

 (13)
[React] useState 사용법과 동작원리 useState란?state는 컴포넌트가 가지고 있는 속성값이다. 이 속성값이 변하면 react는 자동으로 UI를 업데이트 시킨다. 다음 예제에서 name은 state가 아니고 단순 변수이기 때문에 버튼을 클릭해도 화면에 표시되는 이름이 바뀌지 않는다.export default function Hello() {  let name = "Mike";  function changeName() {    name = name === "Mike" ? "Jane" : "Mike";  }  return (          state      {name}      Change      );}  state로 만들기 위하여 react hook 중 하나인 useState를 사용한다.https://legacy.reactjs.o..
[React] Typescript 컴포넌트 타입 종류 1. React.FC함수형 컴포넌트를 정의할 때 사용하는 타입이다. FunctionComponent의 줄임말이다.   ❓ React 18 버전 이전까지 FC 사용을 지양했던 이유와 이제 다시 사용할 수 있는 이유는 무엇일까? React.FC는 함수 컴포넌트의 props 타입을 간결하게 표현하기 위해 만들어졌다. 이를 통해 타입스크립트를 사용하는 프로젝트에서 함수 컴포넌트의 props를 명시적으로 지정할 수 있었다. 뿐만 아니라 props에 기본적으로 children이 포함하여, 컴포넌트에서 자식 요소를 손쉽게 다룰 수 있기를 의도했다.import { FC } from 'react';interface Props { name: string}const Foo: FC = ({ name }) => { ..
[React] Redux 상태 관리 라이브러리 Redux를 사용해야 하는 이유기존에는 props로 상태관리를 했다. (다음 게시물 참고)https://winterflower.tistory.com/460 [React] props를 통해 컴포넌트에 값 전달하기props는 properties의 줄임말이다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다. 예를 들어, App 컴포넌트에서 Hello 컴포넌트를 사용할 때 age라는 값을 전달해주려면 다음과 같이 코winterflower.tistory.com props로 상태 관리를 할 경우 자식 컴포넌트 간 다이렉트 데이터 전달은 불가능하고, 부모 컴포넌트를 통해 주고받아야 해서 자식이 많아질 경우 상태 관리가 매우 복잡해진다. redux를 쓰면 상태값을 컴포넌트에 종속시키지 않고, 컴포넌..
[React] fetch()로 API 호출 (GET, POST, PUT, DELETE) fetch() 사용 방법fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); - 첫 번째 인자로 API의 url, 두 번째 인자로 옵션 객체를 받고 옵션(options) 객체에는 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정해줄 수 있다. 응답 객체(response) 객체로부터는 HTTP 요청 상태(status), HTTP 응답 헤더(headers), HTTP 응답 전문(body) 등을 읽어올 수 있다. - Promise 타입의 객체를 반환한다. API 호출이 성공했을 경..
[React] useEffect를 사용하여 mount/unmount/update시 작업 설정하기 useEffect란?컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 한다.컴포넌트가 mount/unmount/update 됐을 때 특정 작업을 처리할 수 있다. useEffect의 첫 번째 인자는 함수(effect), 두 번째 인자는 배열(deps)이 들어간다.useEffect(effect, deps);컴포넌트가 mount 될 때렌더링 결과가 DOM에 반영된 직후에 함수가 호출된다.import { useEffect, useState } from "react";export default function DayList() { const [days, setDays] = useState([]); useEffect(() => { console.log("change"); }); return ..
[React] json-server json-server란?빠르고 쉽게 REST API를 구축해준다. 주로 프로토타입을 만들거나, 공부 목적으로 사용하는데 프로덕션용으로는 부적합하다.더미데이터 파일(data.json) 만들기{ "days" : [ {"id":1, "day":1}, {"id":2, "day":2}, {"id":3, "day":3} ], "words" : [ { "id":1, "day":1, "eng":"book", "kor":"책", "isDone":false }, { "id":2, "day":1, ..
[React] 라우터 구현(react-router-dom) react는 프레임워크가 아닌 라이브러리이므로 vue나 angular처럼 내장 라우팅을 지원하지 않는다. 따라서 router 라이브러리를 별도로 설치해 사용해야 한다. 터미널에 다음 명령어를 입력해 react-router-dom 라이브러리를 설치한다.npm install react-router-dom  라우터 사용법은 아래와 같다. react-router-dom에서 BrowserRouter, Routes, Route를 import한다. BrowserRouter로 App 전체를 감싸고 Routes로 url에 따라 달라지는 컴포넌트(Route)들을 감싼다. Routes로 감싸지 않은 컴포넌트는 모든 페이지에 보여지게 된다. Route는 path 속성에 경로, element 속성에 해당하는 컴포넌트를 지정한다..
[React] props를 통해 컴포넌트에 값 전달하기 props는 properties의 줄임말이다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다. 예를 들어, App 컴포넌트에서 Hello 컴포넌트를 사용할 때 age라는 값을 전달해주려면 다음과 같이 코드를 작성하면 된다.// App.jsimport "./App.css";import Hello from "./component/Hello.js";function App() { return ( );}export default App;// Hello.jsimport { useState } from "react";export default function Hello(props) { const [name, setName] = useState("..

티스토리툴바