Front-end/React

[JUSTCODE] Advanced Foundation - React dvanced Router

라우팅 다른 경로에 따라 다른 view(화면)을 보여주는 것. 정적 라우팅 정해진 경우에 대해서만 경로를 표현하는 것. "/" => "/users" => "/products" => 동적 라우팅 무수히 많은 view를 띄우기 위해서 경로 끝에 id값에 따라 특정 페이지로 이동하는 것. 동적라우팅의 처리방법 Path Parameter 형태 : 경로/:id "/users/:id" => // function Users() { const params = useParams(); console.log(params.id); return {params.id} } id를 가져오는 hooks const navigate = useNavigate(); const location = useLocation(); const para..

[JUSTCODE] Advanced Foundation - React 재사용 컴포넌트

컴포넌트 UI 중 비슷한 구조를 가진 것들을 하나로 묶어서 분리하는 것을 말한다. 장점 유지보수가 쉽다. 명시적이다. 재사용성이 좋다. 사용방법 화면을 보고 구조가 비슷하거나 같은 묶음을 확인한다. 각 요소에 내려줄 prop의 구조를 확인한다. (prop로 자식 컴포넌트에 내려줄 때는 자식 컴포넌트 파일을 import한다.) mock 데이터를 만들어서 가져온다. or back-end와 통신하여 데이터를 db에서 가져온다. css 파일도 각자 컴포넌트에 맞게 분리한다. ex) 부모 컴포넌트 // Modal.js function Modal() { return ( ); } const signUpData = [ { id:1, type: "name", text: "이름", }, { id:2, type: "emai..

[JUSTCODE] Advanced Foundation - React (리)렌더링, 조건부 렌더링

(리)렌더링 화면에 UI를 그리는 것을 렌더링이라고 한다. (리)렌더링의 과정 컴포넌트가 렌더링 된다. (이것을 mount라고 한다.) useEffect의 콜백함수가 실행된다. (이것을 side Effect라고 한다.) (리)렌더링은 state, props 등이 변경된 경우에 발생한다. useEffect의 의존성배열에 따라 렌더링이 달라진다.(의존성 배열이 없다면 -> 맨 처음에만 실행, 값이 있다면 -> 그 값이 변할 때마다 실행) state, props의 값이 변경되면 리렌더링된다. ex) 부모 컴포넌트 import React, {useState, useEffect} from 'react'; import Child from './Child'; function Parent() { const [first..

[JUSTCODE] Basic Foundation - React useEffect

Side Effect "부수효과"로, 내가 원하던 결과 값 이외에 발생한 다른 결과를 의미한다. ex) let count = 0 function greetWithSideEffect(name) { // Input count = count + 1 // Side Effect! return `${name}님 안녕하세요!` // Output } 내가 원하던 결과인 return문 외에 count가 하나씩 올라가는 효과를 얻었기 때문에 count는 Side Effect라고 할 수 있다. 만약, UI를 그려내는 렌더링이 원하던 결과였다면, UI를 그려내는 활동을 제외한 모든 것은 Side Effect라고 할 수 있다. 대표적으로는 data fetching, DOM에 직접 접근, 구독(setInterval)등이 있다. ..

[JUSTCODE] Basic Foundation - React useState, props

Hooks Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into) 할 수 있게 해주는 함수 use로 시작되는 것들은 내장 Hook이다. 사용이유 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 위해 관심사의 분리를 위해 사용규칙 최상위에서만 Hook을 호출해야한다. React 함수 컴포넌트 내에서만 Hook을 호출해야한다. State 컴포넌트 내부에 가지고 있는 컴포넌트의 상태값(화면에 보여줄 UI의 상태) 정의하는 법 import React, { useState } from 'react'; function State() { const [color, setColor] = useState(); return ( Function Com..

[JUSTCODE] Basic Foundation - React Router, Saas

SPA(Single Page Application) 리액트 프로젝트에서 html의 파일 수는 한 개이다. SPA는 페이지가 한 개인 어플리케이션을 의미한다. Router 위에서 설명한 SPA로 여러 페이지를 보여줄 수 있도록 사용하는 것. React 자체에는 이런 기능이 없기 때문에 Framework이 아니라 Library로 분류된다. 설치방법 npm install react-router-dom --save 컴포넌트 구현 방법 import React from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Nav from "./components/Nav/Nav"; import Footer from "./com..

[JUSTCODE] Basic Foundation - React CRA, Component, JSX

CRA React를 시작하기 위해서는 CRA를 설치해야한다. 설치하는 명령어는 다음과 같다. npx create-react-app 디렉토리 진입 cd 로컬 서버 띄우기 npm run start http://localhost:3000로 접속하여 리액트 로고가 빙글빙글 돌고있는지 확인 CRA의 기본 폴더 및 파일 초기 구성 node.modules package.json .gitignore index.html index.js App.js public 폴더 src 폴더 Component React에서 사용하는 페이지의 구성 단위 Component의 특징 유지보수가 쉽다. 부모 Component가 자식 Component를 가질 수 있다. 재활용하여 사용하기 좋다. Component에는 Class형과 함수형이 존재..