reactjs

React.js 를 사용하는 이유 header, nav, footer 등 모든 페이지에 반복적으로 들어가는 부분을 컴포넌트로 만들어서 사용할 수 있다. React는 Component 기반의 UI 라이브러리이기 때문이다. jQuery 등은 명령형 프로그래밍, rea

jSX의 함수는 반드시 어떤 값을 return 해야한다.import Reactß from 'react'; 리액트 불러오기(리액트 기능을 사용하지 않는다면 불러오지 않아도 됨)export default MyHeader; 컴포넌트 내보내기JSX의 표현식은 반드시 하나의 최

React에서 말하는 state(상태)는 컴포넌트가 가지는 테마처럼 계속 값이 바뀔 동적인 데이터이고, 이 상태 관리는 이것을 가진 컴포넌트가 직접 하게 된다.컴포넌트는 자신이 가진 state(상태)가 변화하면 그 컴포넌트가 re-render를 한다.그렇기 때문에 실시

props

👉 완성이미지input에 받을 작성자를 받아줄 author, textarea에 받을 일기내용을 받아줄 content로상태변화 함수를 만들어준다. 위와 같은 여러개의 useState 함수를 하나로 합칠 수 있다.위와 같이 쓰면 여러가지의 useState 함수들을 하나의

React로 프로젝트를 생성하면 많은 컴포넌트들을 생성하게 되는데,코드 작성을 진행하기 전에 컴포넌트 트리를 직접 그려보는 것이 좋다.React에서는 같은 레벨의 컴포넌트끼리 데이터를 주고받을 수 없다.위의 그림으로 보면 App 컴포넌트가 0 레벨, DiaryEdito

React의 Lifecycle > 컴포넌트의 생애주기란? 컴포넌트가 탄생하고 변화하고 사라지는 순간에 각각 작업을 수행시킬 수 있는 것을 라이프사이클을 제어한다고 할 수 있다. React Hooks useState, useEffect, useRef 와 같이 앞에 u

더미데이터를 받아올 수 있는 jsonplaceholder 사이트에서 api를 받아온다.데이터를 받아오는 getData 함수를 만들고, res에 fetch를 이용하여 api를 호출한다.initData에 불러온 데이터 중 index 0부터 19까지 20개의 데이터만 남기고

이미 계산해 본 연산 결과를 기억해두었다가 동일한 계산을 시키면다시 연산하지 않고 기억해두었던 데이터를 반환시키게 하는 방법React의 기능이기 때문에 useMemo를 import 해야함.기본공식 : useMemo(콜백함수,\[]);useMemo(콜백함수,data.le

복잡하고 많은 상태 업데이트 로직을 가지고 있는 컴포넌트에서 코드가 길어지고 복잡해지는 것이 좋지 않기 때문에 복잡하고 긴 상태변화 로직을 컴포넌트 밖으로 분리하는 기능이다. useState처럼 React의 상태관리를 돕는 Hooks 중 하나이다. useReducer를

모든 데이터를 가지고 있는 컴포넌트가 Provider라는 공급자 역할을 하는 컴포넌트에게 자신이 갖고 있는 모든 데이터를 전달한다. 이 Provider라는 컴포넌트는 자신의 자손에 해당하는 모든 컴포넌트에게 직통으로 데이터를 전달할 수 있다.Provider 컴포넌트의

Page Routing이란 브라우저에서 웹 서버로 페이지 요청을 했을 때 그 페이지를 응답하는 일련의 과정을 말한다. '/home'이라고 요청하면 웹 서버에서 'Home.html' 페이지를 반환해주는 과정 자체를 페이지 라우팅이라고 할 수 있다.여러개의 페이지를 가지고

단일 페이지로 이루어진 SPA 방식의 React는 페이지를 이동하기 위하여 Router를 사용해야한다.터미널에 아래 코드를 입력하여 라우터를 설치할 수 있다. @6은 버전을 의미한다.package.json 파일에서 react-router-dom이 정상적으로 설치되었는지

Web Storage API는 브라우저에서 키/값을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공한다. Web Storage의 두 가지 방식은 sessionStorage와 localStorage가 있다.sessionStorage는 각각의 출처에 대해 독립적인 저

React 프로젝트 배포를 준비하며 build 하는 방법을 알아보겠다.package.json 파일에 "build": "react-scripts build" script가 있으므로 build 명령어를 사용할 수 있다.build라는 명령어를 사용하여 배포할 수 있는 압축